Bivouac

Led the UX redesign of a local outdoor retailer from research to high-fidelity wireframes, building a 20+ component design system with 100+ variables for developer handoff

UI design panel displaying buttons, text, images, and chips

  • COURSE

    Advanced Interaction Design

  • ROLE

    Lead UX Designer

  • COLLABORATORS

    1 UX Designer

  • DURATION

    12 Weeks

Bivouac

Led the UX redesign of a local outdoor retailer from research to high-fidelity wireframes, building a 20+ component design system with 100+ variables for developer handoff

UI design panel displaying buttons, text, images, and chips

  • COURSE

    Advanced Interaction Design

  • ROLE

    Lead UX Designer

  • COLLABORATORS

    UX Designers
    Front-end Developers
    Accessibility SME
    Accessibility PO

  • DURATION

    12 Weeks

Project overview

3 custom components including icon buttons, accordian, and a media card

Bivouac is a local outdoor specialty retailer based in Ann Arbor for 50 years. They carry premium brands for hiking, camping, and high-end everday clothing

Bivouac is a local outdoor specialty retailer based in Ann Arbor for 50 years. They carry premium brands for hiking, camping, and high-end everday clothing

I collaborated with another student to lead its redesign, creating a delivery file ready for developer handoff

I collaborated with another student to lead its redesign, creating a delivery file ready for developer handoff

My role and contribution

As the Lead UX Designer, I was responsible for:

As the Lead UX Designer, I was responsible for:

  • creating scalable design system with 15+ components and 3 templates

  • managing 100+ primitive, semantic variables, and design tokens

  • defining 3-part design strategy

  • creating scalable design system with 15+ components and 3 templates

  • managing 100+ primitive, semantic variables, and design tokens

  • defining 3-part design strategy

The problem

Why redesign?

Bivouac's digital experience doesn't reflect the quality of its in-store experience, a gap that risks conversion for online shoppers

Banner promoting Bivouac's winter sale

Bivouac's homepage

Research

Field visit

2-story shop filled with outdoor gear

Interior of Bivouac

Products were organized via everyday clothing vs. outdoor gear, a strategy that targeted 2 distinct shopping habits: casual and sporting wear

Card sorting

2 card sorting sessions revealed users mental models:

2 card sorting sessions revealed users mental models:

  • Users group outdoor activities under a distinct "sporting" group

  • Users group activity-related products under "gear" or "equipment"

Sorted information architecture

ACTIVITY

Climbing

Hiking

Camping

Everyday outdoor

GEAR

Ropes

Water bottles

Harness

Helmet

First Aid

ACCESSORIES

Jewelry

Scarves

Socks

Bags

Sunglasses

CLOTHING

Sweaters

Tops

Denim

Dresses

Shorts

Pants

SHOES

Running shoes

Sneakers

Sandals

Boots

Personas

I used field study observations and 25+ Google reviews to define Bivouac's 3 types of primary shoppers

I used field study observations and 25+ Google reviews to define Bivouac's 3 types of primary shoppers

Outdoor Adventurer
The Browser
The Practical Buyer

UX Opportunities for each persona:

  • Advanced filtering by material, type, brand → Outdoor Adventurers

  • Support product-first navigation alongside activity→ Practical Buyers

  • Curated featured styles sections → the Browser

Design strategy

01

Design system

Refresh the visual design without losing its original character

02

Information architecture

Simplify IA to accelerate decision-making and minimize cognitive overload

03

Usability

Implement UX opportunities that address different buyer's needs

Design system

Variables and tokens

Primitive, Greyscale, and Semantic color variables
Responsive Variables Panel

Components and templates

Button component set of primary, secondary, and tertiary buttons
Collection of additional components
Product page of Beta SL Jacket
4 primary checkout frames to place an online order

Information architecure

Sitemap

4 levels of Bivouac's information architecture

Navigation bar

Primary navigation is organized via clothing, activity, gear, and sale

Explore the design file

Learnings

Following this project, I learned 3 valuable lessons

Creating variables

Creating 100+ variables taught me how to maintain consistency throughout design

Designing with technical feasibility

Redesigning pages challenged me to consider the technical feasibility of implementation

Rooting design choices in data

Because this project was not research-focused due to scope, I learned how to find and use existing data to support my decisions

Back to top

More case studies

Check out another project

3 flowcharts and an accessibility guidelines document

Embedding Accessibility into UX Workflows

Optimized a 2-checkpoint design review process by 30% and scaled to 6 product teams

Mortgage Industry Project

A11y

3 mobile device mockups of bluemind app

BlueMind

Created the brand identity and design system for a student mental health app

UI Design

Visual Design