The North Face: Mobile Native Cart
Redesigning The North Face's web view cart into a mobile-first experience, enabling users to enjoy a seamless and streamlined checkout process
TL;DR
What: The North Face cart redesign aimed to improve usability and engagement by transitioning from a webview to a streamlined native mobile interface.
How: Through thorough research, usability testing, and collaborative workshops, the team identified key pain points, such as cluttered layouts and unclear information, and developed solutions prioritizing user needs and mobile best practices. Testing confirmed significant improvements, including seamless navigation, clear order totals, and confident checkout experiences.
Result: These efforts contributed to a dramatic increase in user engagement and a 120% year-over-year boost in conversion rates.
How: Through thorough research, usability testing, and collaborative workshops, the team identified key pain points, such as cluttered layouts and unclear information, and developed solutions prioritizing user needs and mobile best practices. Testing confirmed significant improvements, including seamless navigation, clear order totals, and confident checkout experiences.
Result: These efforts contributed to a dramatic increase in user engagement and a 120% year-over-year boost in conversion rates.
Overview
As part of the VF mobile UX team, I contributed to redesigning The North Face cart, transitioning it from a webview to a streamlined native mobile interface. With a focus on efficiency and minimal backend changes, the project aimed to tackle high abandonment rates and boost conversions. Using user insights and mobile-first principles, we reimagined the cart as a seamless, user-friendly feature designed to drive a 40% increase in engagement and checkout success.
Outcome
After launching the native mobile cart design, we saw a significant drop in cart abandonment and a dramatic boost in conversion rates, with an impressive 120% year-over-year increase.
Preliminary research
Our team began thoroughly analyzing the existing cart experience through user testing, surveys, and competitive benchmarking. Our research included studying best practices from the Baymard Institute, Nielsen Norman Group, and key competitors’ mobile apps, alongside usability and accessibility standards. This exploration helped us define a clear strategy: identify what features to prioritize in the first phase, what could be deferred for later updates, and what to avoid entirely to create a streamlined and user-friendly design.
Using these insights, we conducted a comprehensive SWOT analysis to pinpoint areas of improvement:
- Cluttered cart layout with unclear placement of "Save for Later" items and hard-to-find "Edit" options
- Difficulty locating order totals, total item count, and pricing for multiple-quantity items
- Confusing "Secure Checkout" vs. "Checkout" buttons and excessive scrolling to reach checkout
Using these insights, we conducted a comprehensive SWOT analysis to pinpoint areas of improvement:
- Cluttered cart layout with unclear placement of "Save for Later" items and hard-to-find "Edit" options
- Difficulty locating order totals, total item count, and pricing for multiple-quantity items
- Confusing "Secure Checkout" vs. "Checkout" buttons and excessive scrolling to reach checkout
Wireframes
We conducted multiple in-person whiteboard sessions to refine and prioritize a list of proposed changes. These collaborative workshops led to the selection of a final concept, which served as the foundation for developing our wireframes.
User testing
Our team ran 9 usability tests through UserTesting.com. These sessions helped us assess whether the design effectively resolved major user frustrations, including cart navigation challenges, unclear information hierarchy, and interaction inefficiencies. The feedback gathered guided us in fine-tuning the interface to create a smoother and more user-friendly experience.
Key takeaways:
- Seamless navigation between the Cart and "Save for Later" sections
- Order totals were clearly displayed and easy to understand
- Editing items in the cart was simple and intuitive
- Participants proceeded to checkout with confidence and clarity
Key takeaways:
- Seamless navigation between the Cart and "Save for Later" sections
- Order totals were clearly displayed and easy to understand
- Editing items in the cart was simple and intuitive
- Participants proceeded to checkout with confidence and clarity
Final designs
