top of page
Gear Shack App (1).png

Gear SHack App

The Product

The Gear Shack is a dual-stream mobile e-commerce platform engineered to serve both curious novices and seasoned outdoor professionals. By balancing interactive, educational gear-matching wizards with high-performance technical filters, the app recreates the inclusive, reliable expertise of a premium local mountain shop in a mobile-first digital environment.

project duration

3 months

My Role

Lead Product Designer (End-to-End UX/UI)

My Responsibilities

​Guided the entire product definition and design lifecycle, executing user research, competitive analysis, informational architecture, user flows, wireframing, high-fidelity UI design, and interactive prototyping.

The Problem

Navigating technical outdoor gear online is notoriously exclusionary. Beginners face a steep learning curve, a wall of confusing jargon, and a high risk of purchasing the wrong gear, which frequently leads to choice paralysis or frustrating return cycles. Conversely, experienced outdoor enthusiasts face friction when forced through generic e-commerce flows that lack the precise, high-performance technical filters needed to quickly source specific equipment.

The goal

To design a fluid, dual-stream mobile application that democratizes the gear-shopping experience. The goal was to create a tailored, interactive wizard that guides novices through intuitive, needs-based gear bundles, while simultaneously maintaining an accelerated, filter-dense shopping route for experts who already know exactly what they want.

Research+ Discovery

Operating on a fast three-month timeline, I focused my research on benchmarking e-commerce competitors and mapping the contrasting mental models of novice and veteran campers. This allowed me to pinpoint the exact informational friction points that cause choice paralysis and cart abandonment across both user groups.

Competitive Analysis

  • Goal
    • To evaluate how top-tier outdoor retailers balance technical specifications for experts with educational onboarding for beginners, identifying key digital gaps to create a more efficient, inclusive, and transparent shopping experience.

  • Gaps + Opportunities
    • The "Human-Plus-AI" Guidance Gap: While big-box retailers rely on generic search filters, an opportunity exists to integrate an intelligent, interactive gear-matching wizard that builds tailored equipment lists based on real-world terrain and weather constraints.

    • The Operational Transparency Gap: Competitors face significant backlash for confusing ordering experiences, restrictive return rules, and hidden opt-out fees. The Gear Shack can win immediate user trust through guaranteed inventory accuracy and upfront, flat-rate shipping policies.

    • The Technical vs. Approachable Balance: Existing digital platforms either bury novices under a wall of intimidating technical jargon or fail to provide experts with the high-performance filters they need to source specific gear efficiently.

Gear Shack Competitive Analysis Chart.png

USer personas

To structure the app’s dual-stream navigation, I distilled my research into two distinct user personas. Mapping these opposing archetypes allowed me to design side-by-side user journeys that intentionally address the conflicting needs of a hesitant beginner who requires guided education and a seasoned pro who demands raw efficiency.

user-persona-1-henry.png
Henry, 35 | the Nervous novice
 

Henry is a dental assistant looking to take his wife and two toddlers on their first camping trip. Detail-oriented but easily intimidated by technical outdoor jargon, he deeply fears making a "wrong" purchase that could compromise his family's comfort or safety. He needs an educational, welcoming digital storefront that strips away exclusionary gatekeeping and guides him cleanly from choice anxiety to a confident checkout.

Design Focus: An intuitive, step-by-step "Starter Kit" wizard featuring clear, interactive checklists and jargon-free educational tips to prevent cart abandonment caused by information overload.

Quote:

“I just want my kids to have a great first trip without me needing an engineering degree to pick out a tent.”

user-persona-2-sasha.png
Sasha, 28 | The Efficient Expert
 

Sasha is a tech professional and veteran outdoor athlete who needs to replace worn-out, pro-level climbing and camping equipment before an upcoming weekend trip. Managing ADHD, she has zero patience for digital fluff, slow multi-step checkouts, or generic introductory content. She requires a streamlined, performance-oriented interface that respects her expertise and allows her to execute highly precise, technical queries without triggering sensory overload.

 

Design Focus: An ultra-fast, un-cluttered alternative shopping stream utilizing multi-select technical filters, persistent spec sheets, and an accelerated "Quick-Buy" overlay to minimize cognitive load and drastically reduce time-on-task.

Quote:

“I know exactly what I need; I just want a fast, clean way to find the best gear on sale without getting distracted by a million pop-ups.” 

Information architecture + user mapping

To bridge the gap between complex gear specifications and beginner anxiety, I focused the app's structure entirely around an educational, low-friction entry point. By pairing a streamlined sitemap with a deep-dive user journey map, I was able to transform emotional friction points into concrete product features.

Gear Shack sitemap.png

Sitemap of the mobile app that places the interactive gear wizard front and center, ensuring beginners can bypass retail clutter and access curated kits immediately.

Gear Shack User Journey Map.png

User journey map for Henry Garcia, charting his emotional transition from gear anxiety to checkout confidence, which directly informed our interactive wizard feature set.

From blueprint to high-fidelity: Translating concept to Interface

This section demonstrates the progression from skeletal digital wireframes focused on mobile content hierarchy to polished, high-fidelity prototypes that bring an inclusive, reliable mountain shop experience to life. By validating layouts early in Figma, I transformed a complex gear-matching wizard into a clean, scannable mobile interface that reduces cognitive load and removes technical gatekeeping for the user.

Digital Wireframes

Before introducing visual styling, I created digital wireframes to establish a clean content hierarchy and validate the mobile layout. My primary goal was to eliminate the visual noise and technical gatekeeping that typically alienates novice shoppers, ensuring the interface felt immediately welcoming and intuitive.

The Home Screen:

Designed with a prominent, single-tap entry point for the "Starter Kit" builder, allowing beginners to completely bypass dense big-box navigation and intimidating retail filters.

Step 1 of the Kit Builder:

Structured a minimal, step-by-step onboarding wizard using plain-English prompts and clear progress indicators to prevent information overload right from the start.

Gear Shack Wireframes.png

Home Screen

Step 1 of Kit Builder

High-Fidelity Prototypes

By pairing crisp outdoor photography with an approachable, clean design system, I transformed the foundational wireframes into an inclusive, polished digital experience. The final high-fidelity interface shifts away from intimidating, expert-oriented gatekeeping to focus on readable typography scales, fluid mobile transitions, and absolute structural transparency—building immediate user trust and ensuring a confident path to checkout for every camper.

Accessibility considerations

  1. Jargon-free Educational Tooltips
​Integrated accessible informational overlays that define technical terms (e.g., explaining insulation R-values in plain English), ensuring users of all experience levels can make safe, informed choices without feeling excluded by gatekeeping.

​2. Sustained focus + Reduced cognitive load

Designed a clean, distraction-free interface layout explicitly optimized for users managing ADHD or sensory overload, completely eliminating predatory pop-ups, aggressive subscription walls, and erratic visual elements.

Final Takeaways

Impact

The final design successfully demonstrates how empathetic UX can dismantle retail gatekeeping and expand a brand's market reach. By replacing intimidating technical specs with a human-centric onboarding wizard, the interface directly mitigates choice anxiety and cart abandonment for a high-value, underserved customer segment. Testing validated that the guided structural framework successfully converts user hesitation into checkout confidence, establishing a highly scalable blueprint for inclusive outdoor e-commerce.

Lessons learned
  • The Paradox of the 'Universal' User: Designing for two diametrically opposed archetypes, a hesitant beginner needing hand-holding versus a fast-paced expert demanding raw efficiency taught me that good UX rarely means a one-size-fits-all layout. Instead, it requires building flexible, adaptive user paths within a single ecosystem to respect everyone's time and cognitive bandwidth.

  • Empathy is a Safety Feature: Working through this project reinforced that in the outdoor space, clear information design isn't just about making a sale—it's a matter of user safety. Stripping away confusing jargon and implementing "Don't Forget" checklists showed me how deeply micro-interactions and content strategy influence a user's real-world confidence and well-being.

bottom of page