Overview
I undertook this redesign project for Wholesale Hats, an apparel website specializing in custom embroidery. The client faced high shopping cart abandonment rates due to a confusing cart system, exacerbated by the utilitarian nature of bulk orders from businesses. My mission was to simplify the shopping experience by redesigning the shopping cart and checkout flow. The project later extended to a comprehensive rebranding effort, with a specific focus on the home page. Through user research, strategic design choices, and rigorous testing, the project successfully reduced abandonment rates and transformed the way businesses approached custom apparel orders.
Role
UX/UI Designer. I was responsible for all wireframing and prototyping and reported to the directors for feedback. I collaborated with a visual designer on rebranding for the home page.
Toolkit
Figma, Illustrator
Timeline
5-month project, May 2023 - Sep 2023
Team
I worked alongside a Lead Designer, UX Director, and Visual Designer
Cart and Checkout Redesign
The Problem
At the outset of this project, our client had already taken significant strides toward understanding users' needs and pain points. Through their research, they identified three major problems:
1. High Cart Abandonment Rates: The existing shopping cart and checkout process suffered from a high rate of cart abandonment. This was a pressing issue that required immediate attention.
2. Complex Product Listings: Each combination of size, color, and embroidery was listed as a separate product in the cart, leading to user confusion and a cluttered shopping experience.
3. Utilitarian Purchasing Experience: User research revealed that the majority of Wholesale Hats' clientele were businesses ordering apparel for their employees. This utilitarian approach to purchasing turned the shopping process into a tedious chore, rather than an enjoyable experience.
Goals
Project goals and 'how might we' questions
Heuristic Evaluation
In addition to the client's user research, I performed a heuristic evaluation of the shopping cart and checkout flow to identify any opportunities for improvement. I identified two main issues:
1. Redundant Product Listings: Multiple combinations (colors, sizes, embroidery) were listed separately in the cart creating a cluttered and potentially frustrating shopping experience.
Proposed solution: Group product listings by embroidery for a cleaner more organized interface.
2. Checkout Flow Complexity: Users were confronted with all information at once during checkout. Potential for confusion and cognitive overload.
Proposed solution: Transition to a stepped checkout approach. Introduce "continue" buttons for progressive information disclosure.
Shopping cart annotations
Checkout annotations
Sketches
Through a series of rough sketches, I delved into various design possibilities, honing in on refining the product presentation in the cart to enhance user clarity and comprehension. These sketches played a pivotal role in helping me visualize potential elements, such as input buttons for adjusting size quantities.
Iteration. Iteration. Iteration.
Testing prototypes with users and gathering feedback from the Lead Designer and UX Director provided invaluable insights that guided the iterative process. Some iterations led to minor usability enhancements, while others prompted significant shifts in my design direction.
Iterations with user and director feedback
Final Designs
Shopping Cart
The final cart design is a user-friendly interface with a strong emphasis on intuitive navigation and seamless interactions. We achieved this by incorporating the following key features:
1. Product Categorization
Implemented a left column for customization and a right column for corresponding products and sizes, offering a clear and organized view.
2. Efficient Edit Links
Strategically placed edit links trigger overlays, allowing users to make adjustments without the need to navigate away from the cart. Providing users with the option to edit directly from the cart helps prevent frustration that might arise from having to delete and re-add items.
Checkout
In the final checkout design, we implemented a stepped checkout for a more intuitive user experience. At the client's request, we incorporated an option for rushed processing time, seamlessly integrated into the "delivery" section alongside the shipping method. We also simplified the form fields to ensure a smooth and efficient checkout process.
Checkout flow
Mobile Designs
I created mobile-friendly versions for the shopping cart and checkout to ensure usability on different devices.
Mobile prototypes
Home Page Redesign
Having successfully streamlined the shopping cart experience, our focus shifted towards revamping the homepage to create a cohesive and engaging user journey.
Problems
In analyzing the existing homepage, several issues came to light:
1. Unclear Brand Identity: Users struggled to recognize Wholesale Hats as a custom embroidery website, undermining its unique value proposition.
2. Perception of Quality: The previous design did not effectively convey a sense of high quality, which was essential for building trust and confidence in the brand.
3. Articulating Differentiation: The client faced difficulties in communicating the value of their design expertise, a crucial aspect that sets them apart in the market.
4. Diversification of Products: With the introduction of new apparel items like polos and sweatshirts, it was imperative to communicate this expansion and position Wholesale Hats as more than just a hat company.
5. Product Overwhelm: The multitude of product options overwhelmed users, making it challenging for them to make informed purchasing decisions.
Old home page design
Solutions
1. Prominent Apparel Showcase: The introduction of a dedicated section for apparel items prominently highlights Wholesale Hats' expanded product line, signaling a shift from a hat-centric focus.
2. Product Recommendations: The top section of the page now showcases the best-selling and most sought-after products, simplifying the decision-making process.
3. Strategic Messaging and Imagery: By incorporating concise yet impactful messaging and high-quality imagery, the homepage now distinctly communicates Wholesale Hats' expertise in custom embroidery and design assistance.
4. Refined Visual Elements: A refined color palette, sleek typography, and carefully curated visuals were implemented to exude a premium aesthetic, reinforcing the brand's commitment to quality.
Final Design
Reflection
Key Takeaways
Balancing Client Desires and User Needs: Finding the right balance between what the client wants and what the user needs was crucial in this project. It involved clear communication, empathy, and a deep understanding of both viewpoints.
Client Education Matters: Guiding the client through the design process and explaining design choices helped align expectations and foster a productive partnership. From this project, I learned that effective client education can lead to smoother project execution.
Next Steps
The shopping cart and checkout have been successfully coded and deployed. You can experience the optimized shopping cart and checkout process by visiting the Wholesale Hats website.
The homepage redesign is currently in development and not yet live. As we move forward, we anticipate the need for further refinements based on user feedback and evolving industry standards. This iterative process will ensure the homepage meets and exceeds user expectations upon its official launch.
