Zappos.com
Site Rebranding and Redesign
Overview: Modernizing Zappos.com
Zappos tasked Code and Theory with a critical challenge: modernize Zappos.com to attract new demographics (millennial/Gen Z men, top footwear spenders) without alienating loyal customers (75% of 2021 revenue from repeat buyers, mostly women and children’s apparel shoppers).
My role was to lead the UX design for this complex balancing act, ensuring an upgraded experience that honored Zappos's brand promise of "Delivering Happiness."
This type of large-scale e-commerce redesign has direct parallels with optimizing content discovery and user experience for millions for major streaming platforms.
Initial Challenges:
- Redundant navigation & outdated categories.
- Poor Product Detail Page (PDP) & Product Listing Page (PLP) interactions.
- ~200 Baymard guideline violations impacting usability.
- Gaps in inclusive content & editorial tone.
Key Project Goals:
- Engage younger, value-driven male shoppers.
- Broaden appeal to a more diverse customer base.
- Preserve loyalty of existing repeat buyers.
- Support Zappos’s brand promise of “Delivering Happiness.”
Process: Strategic Design & Baymard Compliance
I led the design of templates and components, leveraging existing research and client materials. A core focus was integrating ~200 **Baymard Institute e-commerce guidelines** to align with best practices and address identified usability issues.
Concurrently, I supervised the partnership with the Product Strategy team to audit the Baymard library, specifically focusing on Product Details (PDP) and Product List (PLP) templates. My designs for both PDP and PLP directly incorporated these guidelines, ensuring a modern and user-friendly experience.
Design Principles & Iteration
To guide the design process and address overall usability, I established the following core design principles:
- **Consistency:** Build scalable templates & modules across categories, facets, and content types.
- **Hierarchy:** Streamline information flow, reducing 'Roller Coaster' scanning.
- **Usable & Useful:** Enable key user jobs (Research, Education, Selling, Support, Wayfinding) through intuitive interface design.
- **Seamless:** Minimize friction on the path to conversion.
- **Add Value:** Upgrade the experience to enhance customer value.
I prioritized designing the Product Details Page (PDP) and then the Product List Page (PLP), applying these principles rigorously.
Adopting a **mobile-first approach**, I optimized information hierarchy in the 'Buy Area' for a 590px viewport height. I recognized breadcrumbs as seminal to site map understanding and user wayfinding.
I partnered with the Content Strategy team to align breadcrumb design and Product Information sections with our updated content facet and attribute strategy.
My UX research at Best Buy revealed that shoppers often perform product research across multiple websites for high-spec items. This insight led me to hypothesize that **information visualizations and icons** could significantly benefit shoppers researching high-cost, spec-driven footwear and outerwear. I explored this through the design of Product Information and Product Comparison modules.
Leveraging my extensive retail experience, I applied my understanding of how customers shop for technical outerwear, shoes, and apparel. I integrated insights on customer questions, effective sales techniques, and product demonstrations to instill purchase confidence, aiming to set a new expectation for educational tools on Zappos.com. A similar investigative approach was applied to optimizing cross-selling modules.
Outcomes
The Zappos.com reskin was a significant UI overhaul. Our team successfully built an upgraded Component Library and Design System that not only met but exceeded the client's expectations for the core shopping templates. These new templates and modules were implemented in phases, so the complete long-term impact of the design is still evolving.
While overall site traffic trended down from 14.9M (8M unique) in August 2023 to 11.4M (6.3M unique) in August 2024, direct traffic increased from 54% to 63% during the same period. The bounce rate remained consistent at 54%.
Critically, the conversion rate saw a notable increase from 1.82% to 3.5%, indicating stronger user engagement with the site's merchandising and effective selling. Had I remained on the project, I would have prioritized testing the direct influence of our visual updates on this conversion increase and explored opportunities to further optimize modules for increased cart size.
The Zappos redesign helped me to hone invaluable skills in scaling UX for millions of users and refining content navigation, expertise highly applicable to dynamic consumer experience environments like major streaming platforms.
Key Takeaways:
- **Driving Business Impact:** Achieved a significant **1.82% to 3.5% conversion rate increase**, demonstrating direct business value through design.
- **Strategic Modernization:** Successfully modernized a legacy e-commerce platform while retaining core user loyalty and attracting new demographics.
- **Design System Leadership:** Led the creation of an upgraded Component Library and Design System, ensuring scalability and consistency across the site.
- **Baymard Compliance:** Integrated ~200 Baymard guidelines, significantly improving usability and UX best practices.
- **Cross-functional Alignment:** Partnered effectively with Product Strategy and Content Strategy teams to align design with broader business and content goals.
- **Data-Driven Hypothesis:** Applied insights from prior UX research (Best Buy) to hypothesize and explore innovative information visualizations for product comparison.