E-commerce

UX Design

Bivouac Shopping Redesign

Revamping information architecture and the product filtering experience to streamline the shopping experience

Role

UX Designer

Domain

E-commerce

Duration

10 weeks

Team

Zayd Alghazali

Mockup of a redesigned product page on a laptop and a checkout page and product page on a mobile screen.

OVERVIEW

I led the redesign of Bivouac's information architecture and product filtering experience so that shoppers find the gear they need

I collaborated with 1 designer in my Advanced Interaction Design course to create a design system and wireframes across web and mobile. I was responsible for the design strategy, design system, and designing all 6 pages of high-fidelity wireframes

Why Redesign?

Challenging to navigate and filter products down

Bivouac's "Gear" navigation dropdown, showing multiple columns of densely listed subcategories.
Bivouac homepage layout with seasonal promotional content and product imagery.
Bivouac's Jackets results page, showing a sidebar with only four filter categories: Brand, Color, Size, and Price.

1

Overwhelming navigation

Navigation menu had an overwhelming amount of subcategories

2

Inconsistent visual hierarchy

Homepage contained inconsistent heading styles, buttons, and CTAs

3

Lack of filtering

Product result pages offered no way to narrow things down by activity, material, or product type

Bivouac's "Gear" navigation dropdown, showing multiple columns of densely listed subcategories.
Bivouac homepage layout with seasonal promotional content and product imagery.
Bivouac's Jackets results page, showing a sidebar with only four filter categories: Brand, Color, Size, and Price.

1

Overwhelming navigation

Navigation menu had an overwhelming amount of subcategories

2

Inconsistent visual hierarchy

Homepage contained inconsistent heading styles, buttons, and CTAs

3

Lack of filtering

Product result pages offered no way to narrow things down by activity, material, or product type

Business Impact

Information overload in the navigation causes users to use more mental effort in selecting a category. If an item is not where they expect it to appear under a category, they may quit their task. If there's not enough filters, users can't find the product they're looking for and quit their task

PERSONAS

There are 3 primary shoppers, but I prioritized designing for shoppers who know exactly what they want

Using 25 reviews to learn more about the users, 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 and findable search

Outdoor Adventurer

Shops knowing exactly what they want

Practical Buyer

Shops for a specific occasion

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

The Browser

Browses for inspiration

CARD SORTING

Current information architecture didn't match shoppers' mental models

Bivouac's information architecture combined activities under gear

Bivouac's information architecture combined activities under gear

Gear

Essential equipment to perform activities

Activity

Leisure, sports, or recreational pursuits

But 2 card sorting sessions revealed that users think of activities and gear as separate categories rather than one combined group

But 2 card sorting sessions revealed that users think of activities and gear as separate categories rather than one combined group

Activity

Gear

This meant the IA needed two distinct paths to match users' mental models: one organized by activity and one by gear, rather than merging them into a single structure

This meant the IA needed two distinct paths to match users' mental models: one organized by activity and one by gear, rather than merging them into a single structure

Card sorting results grouped into five categories—Clothing, Activity, Gear, Shoes, and Accessories, each with sample items sorted underneath.

Snippet of synthesized card sorting

Snippet of synthesized card sorting

Design goals

Simplify Navigation

Simplify Navigation

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

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

Increase visual consistency

Increase visual consistency

Help users confidently navigate the site through clear CTAs and strong visual hierarchy

Solution

A navigation and filtering experience that helps users find what they need

Mockup of a redesigned product page on a laptop and a checkout page and product page on a mobile screen.

Key Decision #1

Navigation aligned with user's mental models

Insight: Card sorting and competitive analysis revealed that users approach product discovery in two ways: search by product category (e.g. tops, bottoms) and search by activity or occasion (e.g. running, hiking. Neither approach was dominant enough to prioritize over the other

Insight: Card sorting and competitive analysis revealed that users approach product discovery in two ways: search by product category (e.g. tops, bottoms) and search by activity or occasion (e.g. running, hiking. Neither approach was dominant enough to prioritize over the other

Action: I refined navigation to support 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

Action: I refined navigation to support 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

Bivouac's "Gear" navigation dropdown, showing multiple columns of densely listed subcategories.

Before

Before

After

After

Key Decision #2

Filtering tools where users need them

Insight: 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 for search results. Robust filtering included both a tab group for product activity and sidebar for deeper product specifications

Insight: 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 for search results. Robust filtering included both a tab group for product activity and sidebar for deeper product specifications

Action: I added tabs to let users select product type right away without having to navigate to a different page. I added more sidebar filters to provide greater specificity for what users typically look for (e.g. brand, materials)

Action: I added tabs to let users select product type right away without having to navigate to a different page. I added more sidebar filters to provide greater specificity for what users typically look for (e.g. brand, materials)

Bivouac's Jackets results page, showing a sidebar with only four filter categories: Brand, Color, Size, and Price.

Before

Before

After

After

Key Decision #3

Intentional photography that reduces fit uncertainty

Insight: Nike, Sierra, and Patagonia had 2-6 photo angles of product fit, with up to 12 photos per product. However, Bivouac's primary users are active individuals, but product photos only focused on color variants with 1 modeled shot per item, making users guess how a technical jacket would actually fit or move

Insight: Nike, Sierra, and Patagonia had 2-6 photo angles of product fit, with up to 12 photos per product. However, Bivouac's primary users are active individuals, but product photos only focused on color variants with 1 modeled shot per item, making users guess how a technical jacket would actually fit or move

Action: 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

Action: 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

Original Bivouac product page for the Beta Jacket, showing a single modeled photo alongside color swatch thumbnails.

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

Design file

Design file

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