Case study: Backcountry
Adding an item-comparison feature
What is Backcountry?
Backcountry is an online specialty retailer based in Utah that sells clothing and outdoor recreation gear for hiking, camping, road biking, mountain biking, rock climbing, winter sports, fly fishing, kayaking, rafting, road and trail running, and more. Offering high-quality outdoor gear and apparel, Backcountry is also known for its sustainability efforts.
Role: Researcher, UX/UI Designer
Methods: UX Research, Wireframing, Usability Testing, and Iteration
Timeline: June 2024 - July 2024
Empathize
First, What’s the problem?
The current user interface of Backcountry gives users the option to browse products and read reviews before buying an item, but there is no way to tell how it compares to other similar items on the site or to quickly add the item as they’re browsing without looking through the full product details.
Competitor Analysis
This comparison of Backcountry, REI, Moosejaw, and Sierra Trading Post highlights their distinct approaches to outdoor retail. Backcountry and REI emphasize expert-level advice and community-driven resources, with Backcountry focusing on premium outdoor gear and personalized online shopping experiences, while REI offers a broad range of educational classes and sustainability-focused practices. Moosejaw brings a fun, engaging brand with trending content and a loyalty program, whereas Sierra Trading Post attracts bargain shoppers with discounted prices on outdoor products.
Both Backcountry and REI lead with comprehensive online experiences and high-end gear, while Moosejaw excels in brand engagement, and Sierra Trading Post capitalizes on value pricing. However, Backcountry’s challenges include a lack of in-store shopping and complex navigation, whereas REI faces high operational costs.
After completing this competitor analysis, I gained valuable insights that provided clarity on the strategic positioning of each brand, helping to understand potential market gaps and opportunities for growth.
User Research
In order to better understand how users interact with Backcountry’s website and make purchasing decisions, I aimed to explore the factors that influence product comparisons and overall shopping behavior. Specifically, I focused on how users prioritize different criteria, such as price, features, reviews, and sustainability, and how the absence of a quick-add or compare feature impacts their browsing experience. Through a combination of user interviews, competitive research, and contextual analysis, I gained valuable insights into how users approach online shopping for outdoor gear. These are the main findings from my research:
What qualifies as a ‘good’ product when shopping online? Why?
A good product is one that balances quality and value. Most users cited durability and positive reviews as key indicators of a good product. One user noted, “If it lasts and has strong reviews, I feel confident buying it.”
What criteria (e.g., price, features, reviews, sustainability) is prioritized when making purchasing decisions? Why?
Price is typically prioritized, with many users choosing the cheaper option if two products have similar features. Reviews are also critical, as they provide insight into product performance, while sustainability is important to eco-conscious users.
How do users compare products when shopping online? Why?
Users compare products by manually opening multiple tabs or switching between pages. One user said, “It’s frustrating to go back and forth between similar items,” showing the need for a more efficient comparison feature.
How does the absence or presence of a quick-add or compare feature affect online browsing and purchasing behavior? Why?
Without a quick-add or compare feature, users found it harder to stay organized while shopping. One participant noted that these tools would make shopping smoother, keeping them engaged longer and more likely to make a purchase.
Research Synthesis
Insight: Users have difficulty choosing an item within a given category if they don’t already have something in mind.
POV: I’d like to explore ways to offer users a more effective way to compare related products because there is no way to do this on Backcountry.com without doing one’s own research.
HMW: How might we find an easy way to help users compare related products effectively and reduce stress in the process?
Define
Who are we designing for?
In compiling my research findings, I was able to narrow down who my users are, their motivations, needs, and pain points.
Welcome, Marie and Michael.
Meet Marie
The Outdoor-Obsessed Biker
Marie grew up in the Northeast and now spends her free time mountain biking whenever she can get away from her IT job. She shops mostly online for her biking gear but spends a lot of time researching to find the best products.
Motivations: wants to maximize her time outdoors with equipment that enhances her biking experience.
Needs: ways to compare products online more efficiently without getting stuck in extensive research since she frequently requires up-to-date gear for safe and seamless mountain biking
Pain-points: in-store shopping = a waste of valuable biking time, but online shopping is overwhelming
Meet Michael
The Purposeful Trail Explorer
26-year-old Michael grew up in the Midwest and now lives in the mountains, working a 9-5 job during the week and exploring nearby trails on the weekends. Always needing new gear, Michael shops online with intent but prefers to browse in-store.
Motivations: purpose-driven shopper—buys gear only when there's a specific need
Needs: frequently requires up-to-date gear for safe weekend adventures
Pain-points: struggles to find the best gear for his trail runs, feeling overwhelmed by technical specs online
IDEATE
User Flows
Considering how Marie and Michael might want to eliminate the overwhelming number of options when shopping online and compare just a handful of products, this flow came to mind… Here you can see the current user flow, and the ideal flow.
PROTOTYPE
Lo-Fi Wireframes + Finished Component Library = Hi-Fi Prototype
High Fidelity Prototype
TEST
Usability Testing
Objectives
Determine if the workflow provides a satisfying and smooth experience
Evaluate the ease and efficiency of task completion
Identify any usability issues and and/or pain points
Gather feedback on the application as a whole, if it accomplishes its intended use
Questions
Per Task
Q1: How easy or difficult did you find this task? Why?
Q2: Did anything seem overly complicated or confusing?
Q3: Do you have any questions regarding this task?
After Testing
Have you used a Compare feature on any other websites before? If yes, how does this compare?
Do you have any suggestions for improving the added Compare feature?
Do you have any questions for me?
Revisions
1. Enhance Compare Functionality for Improved User Awareness
Modifying the compare side tab to only appear after an item is added to the comparison, while making it static at the bottom of the screen, was the top priority. Previously, the tab was always visible, distracting users from their browsing experience and cluttering the interface. Additionally, we increased the size of the checkbox and the “compare” label beneath each item to enhance awareness of the ability to select individual items.
By implementing these changes, we ensure that the compare functionality only appears when relevant, providing a cleaner and more focused user experience. When active, the static position at the bottom allows users to easily access the comparison without interrupting their navigation.
Before
AFTER
2. Implement Pop-Ups for Enhanced Confirmation feedback
Previously, users had no immediate feedback on their selections, leading to uncertainty about whether their actions were registered.
By implementing these pop-ups, we provide clear, instant confirmation that enhances the user experience, ensuring users feel confident in their selections and improving overall engagement with the comparison feature.
Before
AFTER
3. Implement error message for edge case of too many items added
Users could previously exceed the selection limit without any feedback, leading to confusion and frustration during their browsing and item comparison experience.
By implementing an error message, we can ensure that users receive immediate, clear guidance when they try to make too many selections, improving usability and helping them stay within the designated limits.
Before
AFTER
The Final Solution
Roamradar: an end-to-end mobile-first website
Features
Comparison for up to 3 items
Individual and all item comparison removal
Confirmation & error message pop-ups
Scrollable in-depth comparison page
Next Steps
By adding a comparison feature to Backcountry’s mobile website, users like Marie and Michael can confidently decide on well-suited items for their needs while making the best use of their time.
Since the conclusion of this project, from discovery of the issue at hand, defining the problem, developing and delivering a solution, and launching and iterating on the final prototype, next steps include handoff to developers, where the designs may be implemented and launched to real-life users!