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 to redesi
- 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.
- 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.
- 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.
- 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.
- 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.
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
|
Lo-fi Wireframe V2
With the V2 wireframe we get more specific about the content and interactions.
|
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.
|
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.
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.
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
-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.