Gear Quest

The Problem

Users struggle to find and compare gaming components due to poor filtering, unclear navigation, limited compatibility support, and a lack of visual cues for promotions, especially on mobile devices.

How to solve it?

Deliver an intuitive, high-performance shopping experience that enhances product discoverability, simplifies compatibility filtering, supports brand trust, highlights promotions visually, and works seamlessly across mobile and desktop.

My role:

Led the end-to-end design process for Gear Quest, an e-commerce platform for retro gaming components. Responsibilities included user research, persona development, ideation (Crazy 8s), wireframing, prototyping, and building a mini design system. Focused on solving discoverability and compatibility issues while ensuring a seamless, accessible experience across desktop and mobile .

Responsibilities:

my responsibilities included conducting user and market research to identify key opportunities, developing wireframes and low to high-fidelity prototypes to visualize the app's design, executing usability studies to gather user feedback, and refining the design based on insights, accounting for accessibility, iterating on designs and responsive design.

User research: summary

This case study explores how users face difficulties navigating a gaming components e-commerce site due to limited filtering, unclear navigation, and lack of compatibility support (especially on mobile). The absence of promotional visuals also hinders product discovery. Targeting advanced users like PC builders, the study proposes a comprehensive redesign focused on intuitive navigation, compatibility-based filtering, and mobile optimization. Through user-centered design solutions and a usability study involving both expert and casual users, actionable insights were gathered to inform improvements in product discoverability, user satisfaction, and conversion rates.

Persona

Alex is a hardcore PC gamer and tech-savvy buyer who needs a fast and intuitive way to find and compare gaming components because current e-commerce sites have poor filtering, unclear navigation, and limited compatibility support(especially on mobile) making the shopping experience frustrating and inefficient.

User journey map

I created a user journey map of Alex experience using the site to help identify possible pain points and improvement opportunities.

Paint Points

Confusing Labels : Technical jargon in filter categories confused non-expert users

Cluttered Layout : Poor visual hierarchy made filters overwhelming.

Overwhelming Descriptions : Overly technical descriptions make key information hard to find, frustrating casual users

Starting the design

Sitemap

Given the wide range of products and their varied technical specifications, it's essential to design a fluid, intuitive navigation system that prioritizes functionality, supports advanced compatibility filtering, and allows users to easily explore relationships between product types and categories. For users like Alex, a hardcore PC gamer and tech-savvy buyer who often custom-builds gaming rigs, this means enabling quick access to relevant components, clear paths between related items such as GPUs and power supplies, and streamlined filtering to compare products based on brand, specifications, and promotions. The navigation must work seamlessly across devices, particularly on mobile, where many users initiate product research.

Paper Wireframe

By creating this wireframe on paper for the website's homepage, I was able to quickly explore design ideas (using the Crazy 8 technique), refine the user flow, and test concepts before moving to digital design. This helped me stay creative, reduce revisions, and get a first glimpse of how to propose a solution to the problem at hand.

Digital Wireframe

Using user pain points can make new changes when moving to a digital wireframe and thus refine the user experience. Simplifying a menu and a carousel to emphasize certain products on sale was one of the customer's requests.

Link to Figma:

Desktop Wireframe

Phone Wireframe

Mockups

The usability study showed us that, due to the variety of products and brands, a customizable filter was appreciated for specific searches, especially with regard to compatibility. This filter is available on all category pages.

Screen size variations

I accounted for various screen sizes in my mockups, building on my initial wireframes. Since users shop on different devices, I wanted to ensure a seamless browsing experience across platforms like mobile and tablet by optimizing the design for each.

Accessibility Considerations

Support keyboard navigation for all filter and navigation components
Use consistent iconography with descriptive alt text
Provide captions or text alternatives for any video content within the product pages

High-fidelity prototype

This prototype follows the user flow of a fast product purchase and also the selection of a category with the advanced filter option.

Link to Figma:

Desktop version

Phone version

Takeaways

Impact:

Users now navigate with greater ease, apply filters more confidently, and discover compatible products and promotions faster. Conversion rates and session durations improved following implementation.

What I learned:

Talking to users early helped me find the right balance between powerful features and ease of use. Keeping things accessible and clear made a big difference in satisfaction, and adding eye catching visuals for promotions really helped users feel more informed and engaged.