The Challenge & Result

Our goal was to redesign the Product Details Page to improve the add to cart conversion and decrease friction for users. This resulted in a 50%+ increase in add to cart conversion rates* from the Product Details Page.
*Conversion rate compared over 2 months before and 2 months after the redesign

Design Challenge to Get the Job

To get the job I was initially assigned a task to complete in 1-2 hours. Very broadly, I was asked to "Create a wireframe/sketch that increases the add to cart conversion rate, and decreases friction for the customer."
This is the original Product Details Page. I was asked how I could improve it and to provide a lofi mockup of solutions to any presented problems.
  1. Positioning of price and product information. The information being on the left side makes readability different than the standard e-commerce website, with most of them opting to place their Add to Cart, Product Information and Pricing on the right.
  2. Color of the CTA button. The call-to-action is in a box with a transparent background. This does two things, it makes it harder for users to find the button, and looks inactive until hovered over.
  3. Customization interactions. On the right side you'll find the customization interactions. This is where users decide the fabric type and leg colour of their chair, and, in the case of beds, the sizes as well. The colour selection is a simple and working design, however tabs for patterns and legs (small text at the top) are fairly hidden.
  4. Limited number of customization options shown. The value proposition of The Inside is high customizability, but each colour takes up the entire column, meaning the user will see less colours as they customize.
  5. Swatch CTA visibility. A big part of conversion for their online only purchases came from customers who ordered swatches, but the CTA to order swatches (bottom right) is using very small text and does not appear to be clickable.

Initial Sketch

I started out with a sketch. This was to get my ideas down on paper as an outline for what might work. This was maybe my third or fourth quick sketch (as seen by the very crude lines). Using pen helps me move forward and commit to each decision I make since I can't erase any of it. Ideally by the end of this process I have an outline of what I'll need to wireframe in Sketch.

Initial Wireframe

Building the wireframes came next. I decided on putting all the interaction elements on the right to lead the users eyes directly to customization in favour of having users read the page as three separate columns. Putting the fabric and legs option upfront was the most important aspect of this redesign, ensuring that users understand how to customize their chair and the options available.

After completing this task, I got the contract and moved forward with the full redesign.

Lo-fi Wireframe V1

With the V1 wireframe we already see massive improvements in visibility and decreasing friction for the user. Our next step is to 
  1. Product information right side placement. ​Following e-commerce industry standards, we moved the product details to the right side of the page and created a loose wireframe to see what that would look like.
  2. Customization awareness. All the customizable elements of the furniture are visible up front and no longer hidden by the need to click on tabs. The goal is to increase user awareness of how to customize and the options available.
  3. Add to cart coloured in.​ Colouring in the add-to-cart button makes it a lot more noticeable. We'll decide on a colour in the next steps.

Lo-fi Wireframe V2

With the V2 wireframe we get more specific about the content and interactions. 
  1. Filters to sort through fabrics. ​Adding in space for the filters above the fabrics so we can better understand where that interaction will be and how it will work for the user. We decided to add filters so customers can easily sort through colours, fabric types, pattern types and pet friendly options.
  2. Specifying selector panel design for content. Because the number of fabric customizations vastly outnumbers the number of leg customizations, the panel size was adjusted for each ones content. In this case, the fabrics selector is larger and the legs selector stays about the same size.
  3. Adding in order swatches. Adding in the order swatches button as a more obvious call to action was very important due to its high conversion rate, and placing nearer to the swatches leads to a more intuitive interaction for customers.
  4. Scrollable product image. Not viewable in this mockup is the product image on the left side (see below). The page was designed with a sticky product image so as the user scrolls and customizes their product, they can see the customizations happening in real-time. This is meant to lower the amount of scrolling the user has to do as they check out the different customization options available.

Hi-fi Handoff

The design all comes together in the hifi. I worked with the brand designer and the product manager, who has been my main source of feedback throughout the design process, to create this.

This wireframe as passed along to the brand designer to make some final UI adjustments.
  1. Brand colours. Making sure we use our brand colours this time around, the orange properly accented active elements and CTAs.
  2. Clarifying choices. Adding a selection box (below fabric grid) assures users understand what fabric choice they made, and increased the readability of fabric and designer names.
  3. Cleaning up.​ The design was cleaned up to a proper grid, buttons were added, the content was specified and we tested the sticky image internally to understand how it would work out in a live environment.

Designing with Mobile in Mind

My team and I looked at the data and understood that most of of the browsing customers did came from mobile. However, our customers were rarely purchasing from their mobile devices. We discovered that customization was difficult on mobile, and we made the necessary design choices to decrease friction while shopping on mobile.

We made the product image a sticky header, and our customization panels - being designed with mobile in mind - fit nicely into our responsive mobile design. We had to limit certain design decisions due to development constraints.

One improvement we plan to make in the future making fabric selection a tap-in separate page on mobile. This change was prompted by the difficulty users had scrolling through the page, as they would sometimes end up scrolling through fabrics as they tried to get to the bottom of the page. We mitigated this issue for now by adding extra margins on the left and right for users to place their fingers on to scroll, and will have the proper separate fabric page fix out in the future.

Lo-fi V1

Lo-fi V2

Hi-fi Handoff

The Results

The handoff was very clean as our developer is very familiar with Sketch, I left the required specs next to each mockup. The developer and I work closely together as he releases, and I help him with clarifications and QA before release.
"The site is A W E S O M E ! Srsly. I am loving the vibe, the flow, and how you are presenting the range of options per product. Really - it looks great but it "feels" even better to use. Just a little consumer note to share w your dev team. They are rocking it!"
-The Inside Customer
Along with great feedback we saw great results. Our add to cart conversion increased by 50%+ and we had more click-ins to our new swatch page. Overall, our work was very successful, and the team continues to iterate and improve on shopping flow.