Case Study
Redesigning the birchbox.com navigation for reduced buying friction and increased product discovery.
Birchbox, 2016-2018 – Beauty & Lifestyle (Ecommerce, Subscription Retail)
Problem Statement
The Shop navigation had historically been overlooked, becoming bloated and cumbersome over time.
Categories and products had been arranged in an alphabetical list by default which was not the most intuitive or customer friendly experience and made product discovery more difficult.
Solution
Working closely with the Birchbox Merchandising team, we hypothesized that we could improve UX, increase product discovery and shop revenue by injecting some brand narrative into the online customer browsing experience.
My role:
Lead Designer – Information architecture, User research, UX/UI design, usability testing
Team credits:
Heather Shoon - Design Director
David Luke - Product Design
Eva Lam - Product Management
Brian Fraser - Product Management
Mike Allen - Engineering
Zack Linder - Engineering
Research & Design
I began by leading group working sessions between the Product and Merchandising teams.
We explored new ideas for presenting our rich product inventory and captured our thoughts and sketches on a whiteboard. During that process we uncovered an idea to categorize products based on a simple guided beauty/grooming routine. This pattern seemed to align really well with the navigation project and, moreover, with the Birchbox brand positioning as a “beauty best friend”. I used this as the starting point for the information architecture sketching.
The old (top) VS redesigned desktop nav (bottom) featuring a color palette and pattern that dynamically updated for each box cycle
Whiteboard sketches from an early working session with the Merchandising Team
My approach was to produce 3-4 options of navigation design showing different product groupings, using alternate wording and varying amounts of brand narrative and guiding content for testing.
One example was a new approach including “complexion” as a standalone top nav category, which did not test well with customers. They found the term too vague and intimidating, not something they would naturally search for–so we included complexion products along with the existing skincare categories and added some educational editorial content around it.
We took the opportunity to update the use of the binary “women” and “Men” product distinction for the more permeable “beauty” and “grooming”. We incorporated some of our editorial content and spotlighted the Birchbox point of view more heavily throughout the navigation in order to present an enriched branded browsing experience. I built the various prototypes in Sketch and InVision and tested them with our customers to distinguish which navigation solutions were resonating the most.
Different information architecture layout experiments for comparison and testing
Test visuals with “complexion” as a top level category
Resulting visuals with “complexion” incorporated into the “skin” category and coupled with educational content
Outcomes
Presenting the “Why” as well as the “What” of the birchbox.com shop
On top of improving the UX, we wanted to really showcase Birchbox’s unique value, and demonstrate to every visitor the reason they were choosing to shop with us instead of a competitor. The result was a more streamlined and easily digestible presentation of all that Birchbox had to offer, both beauty/grooming product and lifestyle content wise.
Implementing this new universal navigation structure prompted conversations for scoping further work around personalizing the browsing experience for our “logged in subscriber” base, who were providing more specific product preference data. It also kick-started a larger improvement project to update the Birchbox.com product taxonomy.
A test visual with the focus on highlighting new content which didn’t ultimately make it into the finished navigation structure
Examples of the wider account navigation and search functionality housed within dropdown UI
Spotlighted Birchbox content within it’s newly dedicated category