Apt2B Sectional Builder Tool

Lead UX Designer
Outward, Inc (Williams-Sonoma, Inc)
San Jose, CA

July 2019, February 2020 (1.5 months)

Outward worked with Apt2B to provide renders of their sectional collections, as well as to design and develop a sectional builder tool for their online store. Our goal wa to provide Apt2B with a consumer-facing tool for users to build and visualize custom pieces by themselves.

Problem

Apt2B is an online home-furnishing platform (with no brick&mortar store) that offers many customization options for its users. With so many existing customization options there has been a high number of costly returns of sectionals due to purchasing the wrong product, wrong sizing, and wrong quantities. With that in mind, Apt2B learned about Outward’s previous work on the sectional builder tool and has asked us to build one for their brand.

Apt2B also utilizes Shopify, which limits customers to 100 variants (customization combinations), and has created a temporary workaround on their multiple fabric and leg finish selections. However, they still want to allow more customization flexibility for their users, which is a problem with the variant limitation.

Our Goal

Outward is to implement a sectional builder tool within the Apt2B e-commerce site that allows Apt2B customers to build endless variations of sectional layouts and visualize fabrics in detail, for thousands of sectional styles, all in one place, while working around Shopify’s variant limit for our tool.

Design principles to follow:

• Earn their trust. Display choices to the user and provide feedback for user actions clearly and obviously.

• Add value, not features. Reduce extraneous clicks or steps to convert users with minimal effort. Design features that communicate functionality while educating the user.

Apt2B will be able to reduce their number of costly returns with our sectional builder tool by enabling the customer to:

• Swiftly build and experiment with different sectional configurations

• Enable customers to add the correct pieces into the cart from the configuration build (avoid ordering one piece at a time)

• Receive accurate dimensions for configuration and verify it fits in their space

Understanding Shopify Limitations

Shopify is an all-in-one platform with all the e-commerce and point of sale features you need to start, run, and grow your business. However, they limit their customers to 100 variants (customization combinations) per product.

Apt2B offers 3 different customization options: color, leg finish, and configuration (furniture arrangement) and this already exceed 100 variants. Currently, to bypass the variant limitation, Apt2B created separate products based on configuration and leg finish combination, leaving ONLY fabric color as the variant option.

Apt2B’s
Existing Flow

Currently, Apt2B sells their sectional variations per product page.

• If a user found a style they liked but cannot find the right size or configuration, they need to exit out of the product page back to the main menu to find another configuration within that same style.

• If a user wanted to see a 2 piece configuration separated into indivudal products or substited one for another, they will have to manually search if that product page exists.

Though the fabric colors and leg finishes are quite customizable, the configuration itself (as well as its dimensions) is very difficult to shop for.

Shopify Variant Possible Solutions

After a some clarification in an internal sync, we drafted two possible solutions for the application flow while keeping in mind of the Shopify Variant issue.

This required a lot of working side by side with developers to understand their constraints when connecting and loading product pages.

Apt2B will create a new landing page called “Build Your Own Sectional,” which displays at franchise level only. Images (entry points) will be “Logan Sectional” instead of “Logan 2PC Sectional"."

DESIGNERS FEEDBACK:

• Not the best solution for leading the user to customization options (not the most natural way to approach)

• Gives a larger platform for Apt2B to market the “Build Your Own Sectional” integration - potentially bring more interest into purchasing their products

DEVELOPER FEEDBACK:

• This opens our builder tool without creating a product page, meaning only one editor will exist and all product pages are hidden in the background.

• We will only have to call each product page once.

Product pages will be displayed as-is on the item level. Users will have to enter the product page with a “Build Your Own Sectional” CTA within the page.

DESIGNERS FEEDBACK:

• A more organic solution to lead the user to more customization options

• The existing page already offers fabric + leg finish customization –it’s only natural to also include configuration customization as well

DEVELOPER FEEDBACK:

• Each product will have its own editor

• If the user was to build a sectional with more pieces than the original product page described, we will have to reload the editor as well as the product page.

Our final decision was to go with Option 1 to address developer’s concerns about reloading a page multiple times. Since loading time for each page already have a higher risk in lagging due to the many customization offerings, we wanted to avoid adding to that problem by reloading the editor and product page as well.

Market Research

In order to narrow down key competitors, we analyzed other sectional builder applications and created a +/Δ opportunities chart to narrow down important features in each competitor experience.

We identified four customers: Crate&Barrel, Basset, Room&Board, and IKEA. After further analysis, we were able to compile the best of all these competitor experiences to formulate another that fits with Apt2B brand.

Preliminary Sketches

Since we are designing a new sectional builder to fit Apt2B’s branding, we went through many iterations of sketches on paper and whiteboard and compared it across to variations of designs to find the best aspects of every version.

Some designs had different template structures, feature displays, modals…etc, so even within this phase, some critiques and guerilla testing was held with our team and cross-functional teams for their feedback and more ideation on how we can improve our design.

Wireframes

For these wireframes, the other designer and I swapped desktop and mobile documents and worked side by side to ideate symbol categorization and potential flows. The following are just a few of the important screens/features.

Usability Testing

We conducted A|B testing to confirm our UI/UX direction. Since Apt2B’s target audience ranges from 23-43 years old, we selected coworkers in our company to test our wireframes.

We printed two sets of home screens of our desktop and mobile wireframes and asked questions to see if the UI is clear and easy to understand for users. While they answered our questions and pointed to areas on the screen, we observed their interactions, expressions, time spent finding specific actions, etc.

Upon finishing the A|B testing, we learned that there were some interactions and UI displays that weren’t as clear and easily understood by our coworkers. We also learned that we should ask some more follow-up questions to have a better insight into their overall experience as well as compiling a more thorough script and write out questions or have a template set up before testing.

More Iterations

Through more design iterations, I learned that it is best to keep mobile and desktop experiences the same or as similar as possible. Not just to consider our developers, but also to consider the user experience. Bringing in a new interaction will only confuse users when utilizing the responsive platform.

Review Tab

Though this was out of our original scope, the Outward internal team approved this to move forward. However, we are just in charge of suggesting a design and we are not responsible for the implementation because the review tab will require our developers to handle too many unstable variables.

The purpose of this tab is to allow the user to review all the items in their configuration before adding the entire build to their cart. This is an essential step in establishing trust and reducing the possibilities of returning the product due to incorrect pieces, sizing, etc.

Initial Designs

I created a series of different styled summary tabs that features different information hierarchy.

The following were some considerations I made when creating these screens:

• Should I bring the fabric color and leg finish to the top because it remains consistent through all the products?

• Does listing the fabric color and leg finish repeatedly take up too much room in the review tab?

• How important is it to have text references with the fabric swatches?

• Is it easier to view the price point and quantity when it’s all aligned and stacked on top of each other?

SCAMPER
Critique Session

In this critique session, I used S.C.A.M.P.E.R., a brainstorming method where you ask 7 different questions to encourage and inspire new ideas in order to brainstorm solutions to solve this information hierarchy in the summary tab.

SUBSTITUTE:
Is there anything we can replace in the Review Tab?

COMBINE:
Is there a way to combine the review tab with another?

ADAPT:
Are there any ways to adapt what other similar platforms are doing?

MODIFY:
Is there a way to add extra value to this review tab?

PUT TO ANOTHER USE:
What are other ways we can utilize the review tab?

ELIMINATE:
What are some information we can remove? Can we eliminante the review tab in general?

REVERSE:
Reimagine the flow (Review Tab > Cart > Checkout) and reanalyze what information is important at each stage.

Some key learnings from this discussion:

• Consider users with visual impairments

  • Image of swatches cannot stand a lone - requires a text/alt text

• Reminders that “Review” tab is ESSENTIAL because it is the only place for users to view product price before paying

Critique Solution

I decided to include both the swatch and swatch descriptions above all the piece details as well as include the swatch descriptions in the piece details.

Popular Configurations

Before finalizing the design, we received another ask outside of our original scope, but our internal team decided that this was appropriate and proceeded to develop this feature.

Most of the main features for the sectional builder were completed by now, so there’s only so much space for any more changes. All new changes needed to be handled with care. The main goal of this sectional builder is to create the most streamless, low-effort interaction for users to customize their sectional. Some questions I started asking myself:

• How much prompting will a user need to customize a sectional?

• Will these Popular Configurations complicate or simplify user interactions?

Version 1 - Outside of the builder tool

Version 2 - Within the builder tool

In the end, since all the user interactions are completed within the iFrame (builder canvas and tabs), it makes the most sense to include the popular configuration assets within the right tab. At one point, I was stuck on the idea that I needed to minimalize the container that holds all the pieces; however, I realized that I just needed to make the Popular Configurations tab pop over (creating a white overlay) the pieces to imply every other interaction outside of the Popular Configuration tool is deactivated.

Final Mockups
Desktop

Final Mockups
Mobile

Developer Handoff

Upon completion of the design work, I created this 13-page detailed documentation (equivalent to at least 8 JIRA tickets) to clearly outline the deliverables for both our Outward developer team as well as Apt2B’s third-party agency. To create the most effective documentation, I spoke with our main Front End Developer to see what he wishes to see in our writing. All essential assets, links, prototypes, and documents are supplied per ticket for smooth implementation.

Here is an example of the engineering tickets I drafted for Apt2B’s third-party developer agency.

What I learned…

This project took much longer than expected and my team and I have learned so much from this experience.

As a resourceful team member:

1. Focus on what to do next rather than why it went wrong. In some of our meetings with our stakeholders, both teams intensely debated on their understanding of the scope and design direction. Rather than spending time being frustrated at each other, it is important to stop and figure out what to do next.

2. Write meeting notes that occur as is without making the information vague. Our team accidentally summarized too vaguely with our meeting notes which led to confusion on both parties. Do not make assumptions that one side will understand - be explicit with the project scope as much as possible.

As a good designer:

1. Everything can change and will change. In the span of 3 weeks, I received the ask to create 3 different types of user flows and experiences. Stay focused and organized with file versions and be flexible and ready for change.