2025
GearFrog
GearFrog is a tool I designed to streamline the gear-buying experience, helping gamers make confident, informed choices while saving time and money.
This solo project was part of the Google UX Design Certificate, and I had a blast bringing it to life across both app and responsive web formats.
The Gear You Need. Minus the Noise.
One app. All the right gear. GearFrog simplifies the shopping experience for gamers by uniting trusted brands in a clean, intuitive interface.
Background
GearFrog was designed around four core shopping frustrations faced by gamers: decision fatigue from too many product options, difficulty trusting reviews, the need to stick to a budget, and the constant struggle to find in-stock gear. The goal is to thoughtfully connect these elements into a streamlined digital platform that empowers gamers to shop with clarity, confidence, and ease.
Challenges
To understand the gamer experience, I conducted interviews and observed shopping behaviors. Four key challenges emerged: overwhelming choices, untrustworthy reviews, tight budgets, and frequent stock shortages—each adding a layer of complexity to the design problem.
Too many options leave gamers feeling overwhelmed and unsure of what to pick.
HMW guide users into picking the gear that best fits their needs?
Gamers want high-performance gear but often have tight budgets. HMW support budget-conscious gamers in finding gear that doesn't break the bank?
Fake or biased reviews make it hard to know which products truly perform. HMW build trust in user reviews and surface authentic reviews?
Popular products are frequently out of stock, leading to missed opportunities and frustration. HMW help users stay ahead of restocks so they never miss out?
Paper Wireframes
DESIGN PROCESS
MOBILE
The homepage simplifies shopping with a centralized Brand Hub, smart product highlights, clear category filters, and seamless navigation to reduce choice fatigue.
The product page features a bold hero image, user reviews, a price comparison tool, and clear CTAs to support trust, value, and fast decision-making.
For the mobile application paper wireframes, I have chosen to only highlight two screens which serve the most importance.
WEB
The homepage simplifies browsing with clear sections to shop by category or brand, helping users find what they need quickly and confidently.
Responsive design layout
The search page combines refined filters, sortable product listings, and a comparison tool to support efficient, value-driven decision-making.
Mockups
After 5 rounds of iterations and user testing, these are the finalized hi-fidelity mockups.
Solutions for Navigating Choice Overload
By centralizing gaming gear from all major brands into a single, unified platform and introducing clear, intuitive categories, GearFrog empowers users to cut through the noise. This structured approach simplifies discovery and helps gamers quickly narrow down options to what best fits their preferences, play style, and budget.
Horizontal scroll of categorized product types
“Discover what’s new” spotlight on products
Helps gamers instantly filter by product type, reducing decision fatigue.
Supports smart recommendations and keeps users up-to-date on the latest gear.
Maintains focus on the shopping experience while giving users easy access to tools and general nav.
Centralized Brand Hub
Clean UI
Builds trust and confidence by bringing well-known brands into one place.
Round 5 High-Fidelity Prototypes - Homepage
Solutions for reducing Stock Shortage Issues
By integrating real-time stock alerts on mobile and clear “Selling Fast” indicators on desktop, GearFrog keeps users informed the moment product availability becomes critical. This proactive approach reduces frustration, builds urgency, and ensures gamers never miss out on high-demand gear again.
%201_edited.png)
“Almost Out of Stock” animation triggered upon viewing a product page on mobile.
Bright "Selling Fast" Indicators.
Creates urgency and sets clear expectations about availability, helping users act quickly and avoid missing out on popular gear.
Delivers immediate, contextual feedback about availability, reducing user frustration and supporting faster decision-making in a mobile-first flow.
Solutions for mitigating Trust Issues and Price Pressure
Side-by-side visual comparison of similar products with pricing deltas clearly displayed, and instalment payment options.
Supports budget-conscious shoppers by highlighting value differences, making it easier to choose the best option within their price range.
Transparent star ratings, detailed reviews, and user profiles with timestamps.
Builds trust and credibility by showcasing authentic user experiences and helping gamers make confident decisions.
Fitting It All Together
When the pieces come together, the result is GearFrog—a unified platform designed to ease decision-making, build trust, support budgets, and reduce friction. Each feature, while solving a specific problem, also complements the others—creating a smooth, confident shopping experience that puts gamers first.
Key Takeaways
-
Designing for clarity starts with empathy. Understanding gamers’ frustrations—like choice overload and stock uncertainty—was the foundation for creating focused, intuitive solutions.
-
Each feature should solve one problem but support the whole. Treating each pain point as a puzzle piece helped me design features that not only stand alone but work together seamlessly.
-
Trust is a design decision. By including verified reviews and transparent product info, I learned how crucial it is to design for credibility and avoid deceptive patterns—not just usability.
-
Smart UX meets real needs. Tools like price comparison and stock alerts weren’t just “nice-to-haves”—they directly addressed core user anxieties and decision pressures.
-
Visual storytelling strengthens the design narrative. Using the puzzle metaphor clarified the journey and made the process easy to communicate and remember.
Other Important Design Decisions
General Navigation
During testing, users struggled to locate key actions such as viewing their orders, indicating that the general navigation was unintuitive and lacked familiarity.
Solution: Replaced the static layout with a contextual radial menu anchored to the bottom center of the screen. The expandable menu includes intuitive icons for Home, Search, and Orders—improving discoverability while maintaining a clean interface.
Add to Cart Overlay
Users found it disruptive when adding an item to the cart automatically redirected them away from browsing, preferring a smoother flow with clear feedback.
Solution: Introduced a high-contrast add-to-cart animation that confirms the action without redirecting. This allows users to clearly see that an item was added while continuing their shopping experience.
Address Update Made Visible
Users were unable to locate where to change their shipping address from the product page, leading to confusion and unnecessary navigation.
Solution: Integrated a clickable location tag with a pulsing animation near the shipping info on the product page. This subtle but dynamic cue draws attention and signals interactivity, allowing users to easily update their shipping address without leaving the page.
Design System
I built a lightweight design system to keep GearFrog feeling consistent across web and mobile. DM Sans gives the web experience a bold, clean look, while Inter keeps mobile smooth and readable. It’s all about making the interface simple, familiar, and easy to use.
“Details are not the details. They make the design.”
— Charles Eames