top of page
SB-removebg-preview 2

StyleHub: A personalized fashion website

UI/UX Case Study

Web Design

Image 20-02-2025 at 15.13 1
Image 20-02-2025 at 16.17 1
Image 20-02-2025 at 16.20 1

Tools Used!

7564187_figma_logo_brand_icon 2
6299f743b04c5ae587c4119d 2
2993708_adobe_brand_brands_illustrator_logo_icon 2
a24cc489f7646feaf603abe38d5b0e0a 2
Untitled_design_8_-removebg-preview 1

StyleHub is a personalized fashion shopping website designed to provide users with AI outfit recommendations, virtual try-on features, and smart styling assistance. This app helps users find clothing that matches their unique style, body type, and color preferences while enhancing the online shopping experience with seamless UI/UX.

Project Overview

Untitled_design_9_-removebg-preview 1
Untitled_design_9_-removebg-preview 2
Untitled_design_9_-removebg-preview 3

Reduce decision fatigue by offering curated fashion picks based on user preferences

Provide a personalized shopping experience with AI-driven outfit recommendations.

Enhance user confidence through virtual try-on and color-matching AI analysis.

Most of the existing  e-commerce sites offer an overwhelming number of choices without style guidance, making it difficult for users to find the perfect and suitable outfit.

Decision fatigue

lack of personalized recommendations

1

3

2

Solutions

Reduce decision fatigue by offering curated fashion picks based on user preferences

Problem Statement

Uncertainty about fit and color

Target Audiance

Young Professionals (Ages 20-35)

Gen Z & Millennials (Ages 18-30)

Busy Shoppers & Minimalists

Untitled_design_11_-removebg-preview 1
Untitled_design_11_-removebg-preview 2
Untitled_design_11_-removebg-preview 3

Design Thinking Process

Untitled design(12) 1

EMPATHIZE

DEFINE

IDEATE

PROTOTYPE

TEST

Research

User Persona

Brainstorming

Wireframes

Usability Check

Survey

Journey Map

Card Sorting

Visual Design

Survey Insight

User Interview

Empathy Map

User Flow

Prototype

Improvements

Project Timeline

Project Timeline

UI Design

UX Research

EMPATHIZE

PROTOTYPE

DEFINE

TEST

IDEATE

Day 1

Add 

Day 3

Day 5

Day 7

Day 8

Day 10

Day 14

Quatitative Research

Untitled_design__2_-removebg-preview 1

Quantitative research is a method used to collect and analyze numerical data to identify patterns, relationships, and trends. This research focused on Surveys about users’ shopping habits, favorite fashion platforms, and struggles with online shopping.

1.  How often do you shop for clothes online?

Once a month or more

Every few months

Only on special occasions

Untitled_design_13_-removebg-preview 1

What is your biggest challenge when shopping for fashion online?

Choosing the right color for my skin tone

Too many options, hard to decide

Lack of personalized  recommendations

Untitled_design_14_-removebg-preview 1
How important is personalized fashion  recommendation for you?

I prefer AI-driven suggestions

I prefer to pick everything manually

Neutral, I don’t mind either way

3.
Have you ever used a virtual try-on feature while shopping?

Yes, and I found it helpful

No, but I would love to try it

No, I prefer traditional shopping

4.
Untitled_design_16_-removebg-preview 1
Untitled_design_15_-removebg-preview 1

Olivia’s Persona

Black and White Simple User Persona Brainstorm 1
Untitled_design__3_-removebg-preview 1

User  Persona

A user persona is a fictional profile representing your target user, based on research. It includes details like age, goals, pain points, and behaviors to help designers understand user needs. Personas keep the design process user-focused, ensuring solutions align with real user expectations.

Olivia’s empathy map

Blue Yellow Simple Empathy Map Brainstorm 1

Jake’s  Persona

Black and White Simple User Persona Brainstorm(1) 1

Jake’s empathy map

Blue Yellow Simple Empathy Map Brainstorm(1) 1

Information  Architecture

Information architecture (IA) is the process of organizing, structuring, and labeling content in a way that makes it easy for users to find and navigate information. It focuses on creating clear navigation paths, menus, and hierarchies to enhance user experience.

Information Architecture - User Flows - Example 1

High-Fidelity   Wireframes

Untitled-Blank-Project-–-Uizard-03-04-2025_08_00_PM 1

Visual   Design

What is unique in    “StyleHub”

Create outfit

AI  dress color suggestion
In this section user can upload their photo and will get instant recommendetion of dresses which will suit their skin tone.
Suitable Color
This is results of dress color test. User will know what type of color dress will suit them and why
Search
Search your dream outfits like tops, pants, skirts
Outfit Builder 2
These are add  button.
User can can multiple outfits and
create their dream
outfits.
Add
Personalized outfit
These are some outfits recommendation. this outfits are suitable for user’s skin tone

Virtual Try-on

Try-on
Here users can see virtually how that outfit will actually look  on them.
Edit outfits
Users can add or delete any items to make there dream outfits and try-on here.
try on 1 2

Personalized quiz

Quiz
This quiz section will help users to get personalized outfits suggestion.
Quiz section 1 2

Some UI  Design

try on 1 1
Outfit Builder 1
Discover 1 1
log in(1) 1 1
Sign up 1 1
Quiz section 1 1
Home Screen 1 1
Subscribe section 1 (5) 1
Search section 1
Women Section (2) 1 1
Outfit details 1 (1) 1
fashion icon profile 1 1
outfit editable 1

Thanks for scrolling

bottom of page