Responsive Web Redesign
Context And Challenge
Mable is an e-commerce site that offers premium quality bamboo toothbrushes. They are planning to launch new products like kids brushes and family packages in the next two months, therefore the team reached out to us for a new layout of the product page, with a clarity of difference between subscription and one-time purchase. They also aim to encourage people to choose subscription model and simplify their check out process. Our challenge was to redesign the responsive website to both reach the client's business goal and users' pain points.
To begin the discovery phase of the redesign, we did competitive analysis on Mable's competitors and in-depth interviews with their current users. At the same time, we did a heuristic evaluation of their current site and found some usability issues of their current Shopify template and some design issues.
After collecting all the feedback from interviews and our own evaluation, we used an affinity diagram that groups the inputs by similarity to create patterns and generate design ideas.
Some insights and design ideas:
• Users prefer a easier check out process.
• We need to provide the users with customization options if there are more products coming up.
• Users are sensitive to the pricing difference.
• There should be a clear distinction between subscription and one-time purchase.
• Some users prefer to try it out first and then choose the subscription model.
Based on these feedback, we decided to separate the subscription and one-time purchase products into two tabs but both are under Products page. The following sitemap shows the changes that we made in the information architecture.
To simplify the users' check out process, we removed one of the two order review pages that they had before. We also provide people who do not buy a subscription product with a guest checkout option. People who buy a subscription product need to create an account to come back and manage their subscription. Therefore, we create two user flows based on the products that they choose.
We started ideation from the research synthesis and summarized design ideas. First, we did a few paper sketches of the home page, the product page and product detail page.
On the product page, I came up with two versions to clarify and remind users of the difference in one-time purchase and subscription. Then I conducted A/B testing to choose the optimal version in the wireframe.
A: All products are on the same page, but different in the use of icons, some of which represent subscription and some do not.
B: We create a tab on the product page allowing them to switch between one-time purchase and subscription and also remind them what they are viewing below the tab.
The A/B testing result was that most of the people prefer the design on the right because it has more clarity than the icons. Users are more aware of the two options here. It also creates more blank space to match the simple style that they have right now.
Product Detail Page
Order Summary Page
After we finalized our wireframes, I created the prototype using Invision including the homepage, product page, product details page, log in page and the checkout process.
I also conducted usability testing and expert review on our mobile responsive prototype. Here are some testing takeaways:
• The mission sentence could be more attractive and relevant to the product.
• The product name need to be consistent, especially when they have more products coming out.
• Product detail page can be less clustered even with lots of information on customization.
• Users got a clear understanding that products are available as one-time purchase and subscriptions when they browsed through the products page and played with the switch view buttons.
Overall it was a fun project on an e-commerce website which required lots of research work on consumer insights. A comprehensive heuristic evaluation helped our design work a lot and provided the client with a different perspective to look at her own product which included things she did not notice before. Our team utilized small scale A/B testing a few times when we needed to make design decisions. It is always important to apply these methods and think from the users' perspective, removing our own bias, in the UCD process.
Our client is implementing our design right now with her engineering team before launching new products in the next month. We will get the analysis and validation to see if we reach our redesign goal.
"Landy tailored a new design and flow for our product selection and checkout process centered around our customers' feedback and needs. Her research was very thorough and her excellent attention to detail really shined through in the final design. She listened to our companies goals and objectives and was able to design something that exceeded our expectations but most importantly will make purchasing of our product easier, faster and more enjoyable. It was a delight working with her and we are thrilled with the results!"
- Emma Grose, founder of Mable