Bivouac Shopping Redesign
Role
UX Designer
UX Designer
Domain
E-commerce
E-commerce
Duration
10 weeks
10 weeks
Team
Zayd Alghazali
Zayd Alghazali
TL;DR
TL;DR
Problem
Problem
Bivouac's large catalog made navigation confusing; subcategories were buried and search offered very minimal filters to narrow results. This risked shoppers abandoning the site before finding what they needed
Bivouac's large catalog made navigation confusing; subcategories were buried and search offered very minimal filters to narrow results. This risked shoppers abandoning the site before finding what they needed
My responsibilities
My responsibilities
As the UX Designer, I created the design system and designed all 6 wireframes from the homepage to checkout across desktop, tablet, and mobile. I was responsible for competitive analysis to inform design strategy
As the UX Designer, I created the design system and designed all 6 wireframes from the homepage to checkout across desktop, tablet, and mobile. I was responsible for competitive analysis to inform design strategy
What I delivered
What I delivered
A redesigned Bivouac optimized for advanced filtering and streamlined navigation to reduce information overload
A redesigned Bivouac optimized for advanced filtering and streamlined navigation to reduce information overload
THE BRIEF
Redesigning Bivouac
Redesigning Bivouac
In my Advanced Interaction Design course, I collaborated with 1 designer to revamp Bivouac's website. For the past 50 years Bivouac has been a top destination shop in Ann Arbor for specialty outdoor clothing and gear. But it's website contained usability issues that we saw as design opportunities for making shopping more intuitive
In my Advanced Interaction Design course, I collaborated with 1 designer to revamp Bivouac's website. For the past 50 years Bivouac has been a top destination shop in Ann Arbor for specialty outdoor clothing and gear. But it's website contained usability issues that we saw as design opportunities for making shopping more intuitive
Current website
Current website
PROBLEM
Confusing to browse, hard to refine
Navigation buried subcategories and search results offered no activity, material, or type of product filters to narrow things down. These touch points required shoppers to do extra work just so they can find what they're looking for
Navigation buried subcategories and search results offered no activity, material, or type of product filters to narrow things down. These touch points required shoppers to do extra work just so they can find what they're looking for
Information overload in the navigation -> users face decision paralysis and give up
Not enough filters -> users can't find product and quit their task
Under "Gear" alone, there were 11 categories with 50+ subcategories packed into a single dropdown
Under "Gear" alone, there were 11 categories with 50+ subcategories packed into a single dropdown
Only 4 types of filters for any results page
Only 4 types of filters for any results page
RESEARCH
Designing for the Outdoor Adventurer
Designing for the Outdoor Adventurer
I used 25 reviews to learn more about the users and define 3 types of Bivouac shoppers. I designed for the Outdoor Adventurer because addressing their need for precision and advanced filtering also satisfies the Practical Buyer's simpler need for a quick, findable search
I used 25 reviews to learn more about the users and define 3 types of Bivouac shoppers. I designed for the Outdoor Adventurer because addressing their need for precision and advanced filtering also satisfies the Practical Buyer's simpler need for a quick, findable search
Outdoor Adventurer — knows exactly what they want
Increase visual consistency
Cares about specs, materials, and technical fit
Relies on advanced filtering
Practical Buyer — shopping for a specific occasion
Increase visual consistency
Knows roughly what they need, just wants to find it
Tends to ask for help looking for something
The Browser — browses for inspiration
Increase visual consistency
Browses for inspiration
Values style and a good deal
Hard to find starting points
I de-prioritized the Browser since they're driven by deals and style inspiration, not by finding something specific. Possible design solutions such as curated collections or editorial content may better address their needs
CARD SORTING
Grouping clothing by activity vs. gear
Grouping clothing by activity vs. gear
Bivouac's information architecture challenges stemmed from having such a large product catalog, which made navigation and filtering difficult to align with users' mental models
2 card sorting sessions revealed that users think of activities and gear as separate mental categories rather than one combined group. This meant the IA needed two distinct paths: one organized by activity and one by gear, rather than merging them into a single structure
2 card sorting sessions revealed that users think of activities and gear as separate mental categories rather than one combined group. This meant the IA needed two distinct paths: one organized by activity and one by gear, rather than merging them into a single structure
Snippet of synthesized card sorting
Snippet of synthesized card sorting
DESIGN GOALS
What I aimed to achieve
What I aimed to achieve
Simplify Navigation
Simplify Navigation
Limit navigation menu categories from 10 to 5 to reduce cognitive load and information overload
Limit navigation menu categories from 10 to 5 to reduce cognitive load and information overload
Make Filtering Relevant
Make Filtering Relevant
Introduce greater filtering options via sport and material so users can quickly find what they need
Introduce greater filtering options via sport and material so users can quickly find what they need
Aid confidence in product fit
Increase visual consistency
Provide visual context of the size and fit of a product so users get a sense of how it moves for sport and activity
Provide visual context of the size and fit of a product so users get a sense of how it moves for sport and activity
Increase visual consistency
Increase visual consistency
Help users confidently navigate the site through clear CTAs and strong visual hierarchy
Help users confidently navigate the site through clear CTAs and strong visual hierarchy
FINAL DESIGN
KEY DECISION #1
Navigation aligned with user's mental models
Navigation aligned with user's mental models
Card sorting and competitive analysis revealed that users approach product discovery in two ways: some search by product category, while others browse by activity or occasion. Neither approach was dominant enough to prioritize over the other
Card sorting and competitive analysis revealed that users approach product discovery in two ways: some search by product category, while others browse by activity or occasion. Neither approach was dominant enough to prioritize over the other
I designed navigation that supported both mental models at the same time, letting users jump straight to a product type or browse by activity to find a curated set of items
I designed navigation that supported both mental models at the same time, letting users jump straight to a product type or browse by activity to find a curated set of items
Before
Before
After
After
KEY DECISION #2
Filtering tools where users need them
Filtering tools where users need them
Competitive analysis of Patagonia and Nike's results page revealed that robust filtering for product type and activity was buried at least 3 pages deep. I designed tabs to let users select product type right away, while deeper sidebar filters provide greater specificity what they actually need
Competitive analysis of Patagonia and Nike's results page revealed that robust filtering for product type and activity was buried at least 3 pages deep. I designed tabs to let users select product type right away, while deeper sidebar filters provide greater specificity what they actually need
Before
Before
After
After
KEY DECISION #3
Photography that reduces fit uncertainty
Photography that reduces fit uncertainty
Nike, Sierra, and Patagonia had 2-6 photo angles of product fit, with up to 12 photos per product. Bivouac's product photos focused on color variants and had 1 modeled shot per item, making users guess how a technical jacket would actually fit or move
Nike, Sierra, and Patagonia had 2-6 photo angles of product fit, with up to 12 photos per product. Bivouac's product photos focused on color variants and had 1 modeled shot per item, making users guess how a technical jacket would actually fit or move
I designed a photo set for item pages that prioritizes fit context with multiple angles on a model combined with a tag so users can calibrate sizing before adding to the bag
I designed a photo set for item pages that prioritizes fit context with multiple angles on a model combined with a tag so users can calibrate sizing before adding to the bag
Before
Before
After
After
Explore the design file
Our delivery file contains our typography, colors, components, templates, and high-fidelity wireframes
Our delivery file contains our typography, colors, components, templates, and high-fidelity wireframes
Our delivery file contains our typography, colors, components, templates, and high-fidelity wireframes
Takeaways
Takeaways
Working on this project taught me how to how to make intentional design decisions under time constraints. Creating variables and design tokens also taught me how to achieve greater design consistency across many screens. With more time, I would have liked to conduct stakeholder interviews with Bivouac employees and usability testing with users to validate navigation design decisions
Working on this project taught me how to how to make intentional design decisions under time constraints. Creating variables and design tokens also taught me how to achieve greater design consistency across many screens. With more time, I would have liked to conduct stakeholder interviews with Bivouac employees and usability testing with users to validate navigation design decisions