Gear Finder - Multi-Sport Gear Advisor Tool
UX/UI Case Study - Website Platform
Gear Finder is a web-based tool that guides athletes in choosing the right gear, apparel, and accessories tailored to their sport and season. It offers expert recommendations for high-quality products, emphasizing comfort, safety, and performance. Additionally, it simplifies shopping by suggesting nearby stores and online platforms for complete kits, making the sports experience convenient and enjoyable.
UX/UI Highlights:
- Tailored user journeys and intuitive navigation flows.
- Curated gear recommendations based on detailed user research.
- Innovative branding inspired by the adaptability of the octopus.
Skills & Tools:
- User Flows & Wireframes (Adobe XD, Bizagi Modeler)
- High-Fidelity Interactive Prototypes
- Branding & Visual Design (Adobe Illustrator)
Video Prototype
This video showcases the high-fidelity prototype of Gear Finder, a user-centered platform that helps people find the right gear for their sport and season. The prototype guides users through a simple four-step flow—from selecting the season and sport to discovering personalized gear and store locations.
This project was created for the UI/UX Prototyping Tools course at BCIT, as part of the User Interface (UI) and User Experience (UX) Design Certificate. Designed with usability and clean visuals in mind, it demonstrates key principles of interaction design, consistency, and responsiveness.
PURPOSE:
A web-based advisor designed to guide athletes in finding the perfect gear for their chosen sport and season.
Gear Finder simplifies the decision-making process with expert recommendations and curated shopping options.
Key Highlights:
User-Centered Design
Crafted around the needs of beginner and intermediate athletes, ensuring comfort, safety, and performance.
Intuitive User Flow
Step-by-step navigation from season selection to recommended products and trusted retailers.
Visual Identity
A sleek, adaptable design inspired by the intelligence and versatility of the octopus.
USER STORY
Business: Gear Finder
Task-Based Scenario: Santiago is looking for proper gear for two of his favorite sports. He needs to find the best gear for trail running during the upcoming fall and also, he is looking for the next summer best clothes to play football.
Background: Gear Finder is a web that helps people finding the right gear, apparel, and accessories to practice a specific sport according to the time of the year (spring, summer, fall, and/or winter) advising specially those novice athletes initiating a new experience. This web-based advisor will also suggest places in the city, and web stores where they can buy the entire kit.
Statement
User Profile
Name: Santiago
Experience Level: Beginner to Intermediate Athlete
Sports Interests: Trail Running and Football
Needs: Proper gear for different seasons (Fall for Trail Running, Summer for Football)
User Goals
Santiago wants to find the best gear, apparel, and accessories tailored to the sport and season.
He seeks expert recommendations rather than spending hours researching options.
He wants a convenient way to locate physical or online stores selling the full kit.
He prioritizes comfort, safety, and performance in his gear selection.
Key Pain Points
Eliminates time-consuming research by offering curated recommendations.
Reduces the confusion of choosing the right seasonal gear.
Suggests trusted retailers, making it easy to buy everything in one place.
Provides a beginner-friendly experience, guiding users step by step.
USER FLOW
The Gear Finder user flow represents the step-by-step interaction users take to find and purchase the right sports gear based on the season.
User Flow Breakdown
- Home Page – The user lands on the homepage and sees a selection of seasons and sports.
- Season Selection – The user chooses the season they need gear for (Fall, Winter, Spring, or Summer).
- Sport Selection – The user selects their desired sport (e.g., Trail Running, Football, Cycling, etc.).
- Gear Selection – The platform displays recommended gear based on the sport and season.
- Store Selection – The user can choose to view:
- Online Stores – Direct links to e-commerce platforms selling the selected gear.
- Physical Stores – Locations in the city where the user can buy the items.
- User Registration (Optional) – The user is prompted to sign up or log in for a personalized experience.
- Additional Features:
- Testimonials & Reviews – Users can read feedback from other athletes.
- “Need More Gear?” – Option to browse additional equipment.
PROTOTYPES
Mid-Fi Prototype
The Gear Finder platform is designed in Abobe Xd to help users discover season-specific gear, apparel, and accessories tailored to various sports. This wireframe explores the layout and navigation flow, emphasizing simplicity, seasonal filtering, user registration, and content engagement through resources and product highlights.
Home
Landing page introducing Gear Finder’s purpose — helping users find the right gear based on sport and season. Includes a 3-step visual guide explaining how the platform works and call-to-action buttons to explore or get started.
Seasons Page
Users can browse gear by season (Winter, Spring, Summer, Fall). Highlights weekly picks and features seasonal gear categories with large visuals and icons, helping users narrow down based on climate or time of year.
Where to Buy It
Provides store/contact info with a map view and form for direct communication. Helps users locate where they can buy recommended gear nearby.
Sign Up
New user registration screen with sporty illustration to match the theme. Includes basic form fields and social account sign-up options.
Sports Page
The Sports page is designed as a hub for users to select a sport of interest, acting as the entry point for gear discovery based on both sport and season. It promotes exploration while keeping the interface intuitive and responsive.
Product Listing
This page serves as the sport selection interface for users to browse gear specific to a selected sport or category. It displays product previews with pricing and promotes discovery through a clean, scrollable layout.
About
Communicates the mission and values of Gear Finder. Helps users connect with the brand’s purpose and story, reinforcing why it exists.
Allies
A showcase of partners and collaborators—brands, organizations, or individuals that support or contribute to the Gear Finder ecosystem.
This mid-resolution wireframe, created using Adobe Xd, outlines the core structure and user journey of the Gear Finder platform. It offers a clear flow—from sport and season selection to product browsing—while establishing key layout elements and content blocks. The design prioritizes usability, seasonal relevance, and product discoverability, providing a solid foundation for high-fidelity UI design and further prototyping.
Hi-Fi Prototype
The Gear Finder platform is designed to help users discover season-specific gear, apparel, and accessories tailored to various sports. This wireframe explores the layout and navigation flow, emphasizing simplicity, seasonal filtering, user registration, and content engagement through resources and product highlights.
Design System
I developed a consistent and scalable design system for the Gear Finder platform, including a cohesive set of colors, typography, icons, buttons, and UI components. This system ensures visual harmony across the site and streamlines the user experience, making it intuitive and accessible.
High-Fidelity Prototype
The high-fidelity prototype brings the Gear Finder experience to life through a guided, four-step process—selecting the season, choosing a sport, viewing gear recommendations, and finding where to buy them. The prototype emphasizes usability, clean layout, and responsive design for both desktop and mobile views.
LOGO
IDENTITY
The Gear Finder logo is a visual embodiment of the platform’s mission: to empower athletes with clarity, adaptability, and confidence in their gear selection journey. Drawing inspiration from the octopus, the mark captures the intelligence, versatility, and multi-tasking nature of the Gear Finder experience.
Octopus as Central Metaphor
Adaptability: Just as an octopus thrives in dynamic environments, Gear Finder supports multiple sports and changing seasonal needs.
Intelligence & Foresight: The embedded goggles highlight the athlete’s vision and preparation — a nod to the platform’s data-informed, proactive design.
Multitasking & Efficiency: Eight limbs reflect streamlined navigation through multiple product categories, retailers, and seasons.
The mark is constructed on a square-based modular grid to ensure balance and scalability across digital and print media. Ample clear space around the logo ensures legibility and brand consistency, especially when used in responsive UI designs or small-scale applications (favicons, mobile headers, etc.).
The Gear Finder logo system is built for versatility and clarity across all platforms:
Primary color logo for digital platforms and website headers.
White tone for dark-mode UIs and branded merchandise.
Black tone for print materials and minimalist layouts.
Octopus emblem for icons, favicons, and mobile apps.
Horizontal layout for presentations and banners.
All versions preserve the core design elements to ensure a consistent, recognizable brand identity
The Gear Finder logo system is built for versatility and clarity across all platforms:
Primary color logo for digital platforms and website headers.
White tone for dark-mode UIs and branded merchandise.
Black tone for print materials and minimalist layouts.
Octopus emblem for icons, favicons, and mobile apps.
Horizontal layout for presentations and banners.
All versions preserve the core design elements to ensure a consistent, recognizable brand identity
Gear Finder UX UI Project
Conclusion
Gear Finder was an engaging project that allowed me to design a smart, user-centered tool aimed at helping athletes find the right gear through guided selection. I used Adobe XD for interface design and interactive prototyping, Photoshop and Illustrator for visual asset creation, InDesign for documenting the process, and Bizagi Modeler to structure user decision flows. A YouTube video was produced to showcase the high-fidelity prototype, highlighting the final design and key user interactions
Throughout the process, I gained valuable experience in:
User flow modeling, ensuring the decision-making journey was smooth and intuitive
High-fidelity prototyping, with attention to both form and function
Visual system design, creating a clean, performance-driven aesthetic
Presenting UX/UI solutions, using video to clearly communicate user experience
This project enhanced my ability to combine structured logic with engaging visuals, resulting in a polished, purpose-driven solution that puts the user at the center of every interaction.
