My Role: UX Designer
Timeline: 4 months
Tools: Sketch, Invision, Zeplin, HotJar, and GetFeedBack
Team: Product Manager, UX Manager, and Developer
Stakeholders: Director of AKC Shop, VP & Director of Marketing
Overview
AKC Shop is an online retail website dedicated to dog lovers. The website has not been updated for years and AKC would like to redesign the website using Shopify's template to have a cleaner and fresher look and improve the overall user experience.
Website: https://shop.akc.org/
Problems
1. Outdated UI
2. Ambiguous shipping information because of different vendors
3. Difficult to navigate and searching for items
4. Technical issues with the login API
Research Findings
E-commerce Best Practices
In order to make sure that our team understand the principles and best practices of designing an e-commerce website, I searched and read many articles from credible websites to establish the best design practices, such as Baymard Institute and Nielsen Norman Group.
Based on the feedback we collected from GetFeedBack, we organized the feedback into 5 categories:
1. Shipping & Returns: This is the area the people have most trouble with. We do not have a standardized shipping and return policy and information because we work with different vendors and each have different policies.
2. Usability Problems: Search-ability, find-ability, scan-ability...etc.
3. Technical Problems: Login issues due to the API we are using currently and it is very difficult to change.
Screenshots of feedbacks
HotJar Analysis
HotJar is a very useful tool for this redesign. We are able to understand users' behaviors much better by looking at the heat maps, click maps, and recordings and we found several problems our users encounter on our website.
1. Text are too big and users are not able to read the entire item titles
2. Too little products display on a category page that causes interaction fatigue
3. Lack of Notification or feedback
4. Filter on mobile is confusing
5. Product thumbnails on Product pages
Design Solution
Based on our priorities and development resources, we have decided what need to be fixed in the order of importance and level of efforts:
1. UI: Overall size & typography
2. Display more products on product listing page
3. Add "Add to Cart" Notification or feedback
4. Add "apply/Reset" CTA on Filter (mobile)
5. Add color thumbnails on Product Page
6. Provide specific vendor or shipping information on the Product page
Hi-Fi Mock Ups
Desktop
Mobile
Since we use agile process to redesign the shop, we didn't have a style guide in place before the redesign due to tight deadline. However, we are in the process of creating a style guide for AKC shop as we are in the process of Phase 2 design.
Results (Phase 1)
1. Adding items to cart is up 65%
2. Conversion rate is up +13%
3. User Interaction is up across several metrics