Back

AthletiQ

"Your ultimate online sports gear destination."

Figma Prototype

Check out my interactive Figma prototype by clicking the link below.

View Prototype

🛑 The Problem

Despite the popularity of sports and fitness e-commerce, most online stores lack visual clarity, accessibility, and smooth user flows.

Users often feel overwhelmed by cluttered interfaces, inconsistent product categorization, and a lack of contextual guidance — which leads to drop-offs and frustration.

Despite the popularity of sports and fitness e-commerce, most online stores lack visual clarity, accessibility, and smooth user flows.

Users often feel overwhelmed by cluttered interfaces, inconsistent product categorization, and a lack of contextual guidance — which leads to drop-offs and frustration.

Despite the popularity of sports and fitness e-commerce, most online stores lack visual clarity, accessibility, and smooth user flows.

Users often feel overwhelmed by cluttered interfaces, inconsistent product categorization, and a lack of contextual guidance — which leads to drop-offs and frustration.

🎯 Project Goal

Redesign a sports e-commerce platform that offers an intuitive, engaging, and accessible shopping experience.

AthletiQ aims to improve product discoverability, elevate visual hierarchy, and streamline the shopping journey for athletes and sports enthusiasts.

👤 User Persona

John, 27 — Software Engineer from Hyderabad.

John is a fitness-focused software engineer who values efficiency and clarity. He struggles to balance work, exercise, and personal life, making it crucial that his online shopping experience is fast, reliable, and intuitive.

His expectations include a wide product variety, smooth UI, secure payment options, and detailed product reviews to make confident purchase decisions.

Despite the popularity of sports and fitness e-commerce, most online stores lack visual clarity, accessibility, and smooth user flows.

Users often feel overwhelmed by cluttered interfaces, inconsistent product categorization, and a lack of contextual guidance — which leads to drop-offs and frustration.

Despite the popularity of sports and fitness e-commerce, most online stores lack visual clarity, accessibility, and smooth user flows.

Users often feel overwhelmed by cluttered interfaces, inconsistent product categorization, and a lack of contextual guidance — which leads to drop-offs and frustration.

🗺️ Empathy Map

Says

It takes too long to find the product I need. There’s too much going on — it feels messy. I wish the filters actually worked properly. I'm not sure if I can trust these reviews. Why doesn’t the product page show delivery info clearly?

Thinks

Why are similar items showing in completely unrelated sections? Am I being shown fake offers or unclear discounts? This payment process feels risky and cluttered.

User

John, 27, is a tech-savvy software engineer from Hyderabad. With a busy work schedule and active lifestyle, he prefers fast, efficient desktop shopping for fitness gear during breaks or late evenings.

Does

Before: Thinks about what he needs (e.g., a cricket bat, skipping rope).

During: Applies filters but resets them often.

After: Often abandons the purchase midway.

Feels

😩 Overwhelmed by the interface and endless options.
🤔 Distrustful of product quality due to unclear information.
😐 Disconnected — the site doesn’t feel tailored to fitness enthusiasts.
😓 Anxious during checkout unclear pricing, poor payment validation.

Define

Problem Statement:

Based on the user research and empathy mapping, I distilled the problem into key opportunity areas:

How Might We...

Help users find the right products faster?
Build trust through clean presentation and transparent reviews?
Reduce friction in checkout with better feedback and clarity?

📄 Competitive Audit Summary

Decathlon

Cluttered Listings

Overwhelming product grid with basic filters and low personalization.

Nike

NIke

Visual-First, Low Utility

Premium look, but lacks helpful and easy product comparison.

Amazon

Feature Overload

Lots of options, but visually noisy and difficult to compare items.

AthletiQ’s Response

Clean & Guided UX

Assistive filters, visual clarity, and minimal UI lead to faster decisions.

🧠 Ideation

Flow Diagram

I began by mapping out the core shopping flow for AthletiQ — from homepage entry to product discovery, comparison, and checkout.

🧠 Ideation

✏️ Wireframes

I started with low-fidelity wireframes to focus purely on layout and structure without the distraction of color or branding.

These wireframes helped clarify visual hierarchy, align CTA placement with user flow, and define content priorities across the product listing, detail, cart, and confirmation screens.

Visual Design

🎨 Color Palette

AthletiQ’s visual identity is grounded in deep #002962, a rich, high-saturation blue that evokes trust, reliability, and energy.
Paired with neutral greys, white space, and clear status colors, this palette promotes clarity, accessibility, and confidence across all touchpoints.

🔡 Typography

AthletiQ uses the Roboto typeface for its modern, legible structure and digital-optimized rendering.

Available in multiple weights from Thin to Black
Excellent legibility for product details and pricing
Clean, neutral tone that aligns with AthletiQ’s functional and professional voice
Familiar across e-commerce platforms, increasing readability and user comfort

🔲 Iconography

AthletiQ uses Google Material Icons for their wide range, clarity, and adaptability.

Icons are vector-based and scale without loss of quality
Available in outlined, filled, rounded styles for UI flexibility
Lightweight and optimized for fast web rendering
Align well with AthletiQ’s modern, functional tone
Fully accessible with ARIA support and consistent stroke control

AthletiQ uses Google Material Icons for their wide range, clarity, and adaptability.Icons are vector-based and scale without loss of qualityAvailable in outlined, filled, rounded styles for UI flexibilityLightweight and optimized for fast web renderingAlign well with AthletiQ’s modern, functional toneFully accessible with ARIA support and consistent stroke control

📏 Grid & Spacing System

AthletiQ follows an 8px base spacing system, meaning all vertical and horizontal spacing scales in multiples of 8 for visual rhythm and clarity.

The layout is built on a 12-column grid inside a 1200px-wide container, giving content balanced alignment and breathing room.

📏 Spacing & Layout

To maintain consistent rhythm and alignment across the interface, I used plugins like Redlines and Outline in Figma to annotate and verify spacing. These redline overlays ensured that margins, paddings, and element groupings followed an underlying grid and adhered to accessibility standards — especially for visual scanning and clickable areas. The layout system allows scalability while preserving clarity across screen sizes.

🧩 UI Components

AthletiQ’s UI system is built on reusable components that ensure visual consistency, scalability, and accessibility across the platform.

These components were designed to be modular and adaptive, maintaining brand identity while supporting fast, intuitive interactions.

📏 Grid & Spacing System

AthletiQ follows an 8px base spacing system, meaning all vertical and horizontal spacing scales in multiples of 8 for visual rhythm and clarity.

The layout is built on a 12-column grid inside a 1200px-wide container, giving content balanced alignment and breathing room.

📏 Spacing & Layout

To maintain consistent rhythm and alignment across the interface, I used plugins like Redlines and Outline in Figma to annotate and verify spacing. These redline overlays ensured that margins, paddings, and element groupings followed an underlying grid and adhered to accessibility standards — especially for visual scanning and clickable areas. The layout system allows scalability while preserving clarity across screen sizes.

🧩 UI Components

AthletiQ’s UI system is built on reusable components that ensure visual consistency, scalability, and accessibility across the platform.These components were designed to be modular and adaptive, maintaining brand identity while supporting fast, intuitive interactions.

🔁 Interactive Prototype

Explore how users interact with AthletiQ through an end-to-end prototype built in Figma.

Key flows include:

Product discovery & filtering
Add to cart
Address & payment input
Confirmation feedback

This prototype showcases the experience from homepage to successful purchase — with smooth transitions and assistive UI cues throughout.

Open Prototype

🖼️ Final UI Mockups

AthletiQ’s final design delivers a seamless shopping experience across screens. Each screen is structured for clarity, with a visual hierarchy that emphasizes product exploration, easy comparison, and frictionless checkout — whether on desktop or mobile.

🧠 Reflection & Learnings

This project deepened my understanding of e-commerce UX — particularly how subtle layout, filtering, and visual clarity influence user trust and conversion. I learned to balance visual appeal with real-world constraints like accessibility and scalability. If I were to revisit this project, I’d explore more A/B testing with actual users, and expand the design system to support seasonal content and marketing campaigns.

Figma Prototype

Check out my interactive Figma prototype by clicking the link below.

View Prototype

Visual Design

🎨 Color Palette

AthletiQ’s visual identity is grounded in deep #002962, a rich, high-saturation blue that evokes trust, reliability, and energy.
Paired with neutral greys, white space, and clear status colors, this palette promotes clarity, accessibility, and confidence across all touchpoints.

Figma Prototype

Check out my interactive Figma prototype by clicking the link below.

View Prototype

🛑 The Problem

🛑 The Problem

🛑 The Problem

Despite the popularity of sports and fitness e-commerce, most online stores lack visual clarity, accessibility, and smooth user flows.

Users often feel overwhelmed by cluttered interfaces, inconsistent product categorization, and a lack of contextual guidance — which leads to drop-offs and frustration.

Despite the popularity of sports and fitness e-commerce, most online stores lack visual clarity, accessibility, and smooth user flows.

Users often feel overwhelmed by cluttered interfaces, inconsistent product categorization, and a lack of contextual guidance — which leads to drop-offs and frustration.

Despite the popularity of sports and fitness e-commerce, most online stores lack visual clarity, accessibility, and smooth user flows.

Users often feel overwhelmed by cluttered interfaces, inconsistent product categorization, and a lack of contextual guidance — which leads to drop-offs and frustration.

🎯 Project Goal

🎯 Project Goal

🎯 Project Goal

Redesign a sports e-commerce platform that offers an intuitive, engaging, and accessible shopping experience.

AthletiQ aims to improve product discoverability, elevate visual hierarchy, and streamline the shopping journey for athletes and sports enthusiasts.

👤 User Persona

👤 User Persona

👤 User Persona

John, 27 — Software Engineer from Hyderabad.John is a fitness-focused software engineer who values efficiency and clarity. He struggles to balance work, exercise, and personal life, making it crucial that his online shopping experience is fast, reliable, and intuitive.

His expectations include a wide product variety, smooth UI, secure payment options, and detailed product reviews to make confident purchase decisions.

Despite the popularity of sports and fitness e-commerce, most online stores lack visual clarity, accessibility, and smooth user flows.

Users often feel overwhelmed by cluttered interfaces, inconsistent product categorization, and a lack of contextual guidance — which leads to drop-offs and frustration.

Despite the popularity of sports and fitness e-commerce, most online stores lack visual clarity, accessibility, and smooth user flows.

Users often feel overwhelmed by cluttered interfaces, inconsistent product categorization, and a lack of contextual guidance — which leads to drop-offs and frustration.

🗺️ Empathy Map

🗺️ Empathy Map

🗺️ Empathy Map

Says

Thinks

User

Does

Feels

Define

Define

Define

Problem Statement:

Based on the user research and empathy mapping, I distilled the problem into key opportunity areas:

How Might We...

Help users find the right products faster?

Build trust through clean presentation and transparent reviews?

Reduce friction in checkout with better feedback and clarity?

📄 Competitive Audit Summary

📄 Competitive Audit Summary

📄 Competitive Audit Summary

Decathlon

Decathlon

Decathlon

Cluttered Listings

Overwhelming product grid with basic filters and low personalization.

Nike

Nike

NIke

Visual-First, Low Utility

Premium look, but lacks helpful and easy product comparison.

Amazon

Amazon

Amazon

Feature Overload

Lots of options, but visually noisy and difficult to compare items.

AthletiQ’s Response

AthletiQ’s Response

AthletiQ’s Response

Clean & Guided UX

Assistive filters, visual clarity, and minimal UI lead to faster decisions.

🧠 Ideation

🧠 Ideation

Flow Diagram

I began by mapping out the core shopping flow for AthletiQ — from homepage entry to product discovery, comparison, and checkout.

🧠 Ideation

✏️ Wireframes

✏️ Wireframes

✏️ Wireframes

Visual Design

Visual Design

🎨 Color Palette

AthletiQ’s visual identity is grounded in deep #002962, a rich, high-saturation blue that evokes trust, reliability, and energy. Paired with neutral greys, white space, and clear status colors, this palette promotes clarity, accessibility, and confidence across all touchpoints.

🔡 Typography

🔡 Typography

John, 27 — Software Engineer from Hyderabad.

John is a fitness-focused software engineer who values efficiency and clarity. He struggles to balance work, exercise, and personal life, making it crucial that his online shopping experience is fast, reliable, and intuitive.

AthletiQ’s visual identity is grounded in deep #002962, a rich, high-saturation blue that evokes trust, reliability, and energy.
Paired with neutral greys, white space, and clear status colors, this palette promotes clarity, accessibility, and confidence across all touchpoints.

AthletiQ’s UI system is built on reusable components that ensure visual consistency, scalability, and accessibility across the platform.

These components were designed to be modular and adaptive, maintaining brand identity while supporting fast, intuitive interactions.

AthletiQ’s visual identity is grounded in deep #002962, a rich, high-saturation blue that evokes trust, reliability, and energy.
Paired with neutral greys, white space, and clear status colors, this palette promotes clarity, accessibility, and confidence across all touchpoints.