StyleMatch
StyleMatch
StyleMatch
Personalized Wardrobe Assistant
Personalized Wardrobe Assistant
Personalized Wardrobe Assistant
StyleMatch is a hypothetical mobile application I conceptualized and designed to address the clothing shopping challenges faced by busy professional women in their 30s.
StyleMatch is a hypothetical mobile application I conceptualized and designed to address the clothing shopping challenges faced by busy professional women in their 30s.
StyleMatch is a hypothetical mobile application I conceptualized and designed to address the clothing shopping challenges faced by busy professional women in their 30s.
Timeline
Timeline
6+ weeks, 2024
6+ weeks, 2024
Role
Role
Product Designer
Product Designer
Responsibilities
Responsibilities
Desk/User Research
Desk/User Research
UI Design
UI Design
Prototyping
Prototyping
User Testing
User Testing
Tools
Tools
Figma
Figma
Figjam
Figjam
Midjourney
Midjourney
Final Design
Final Design
Personal Preference Onboarding
Personal Preference Onboarding
A quick setup for your own standard
A quick setup for your own standard
Chatbot-Assisted Intent Identification
Chatbot-Assisted Intent Identification
Assistant who understand your needs just like a professional
Assistant who understand your needs just like a professional
Product Image-Based Virtual Try-On
Product Image-Based Virtual Try-On
Personalized fit based on your body, beyond standard size charts
Personalized fit based on your body, beyond standard size charts
Style Profile Settings
Style Profile Settings
Set detailed preferences for more personalized recommendations
Set detailed preferences for more personalized recommendations
User Review
User Review
"It saves a lot of time because if you already have set preferences, it'll constantly show you based on those preferences, so you don't have to keep typing it."
"It saves a lot of time because if you already have set preferences, it'll constantly show you based on those preferences, so you don't have to keep typing it."
My Approach
My Approach
Design Thinking Process
Design Thinking Process
01 Empathize
01 Empathize
Understand the Problem
Understand the Problem
Desk Research
Desk Research
User Research
User Research
02 Define
02 Define
Affinity Diagram
Affinity Diagram
User Persona
User Persona
User Journey Map
User Journey Map
Problem Prioritization
Problem Prioritization
03 Ideate
03 Ideate
Brainstorming
Brainstorming
Idea Sketch
Idea Sketch
04 Prototype
04 Prototype
Mid-fi Wireframes
Mid-fi Wireframes
User Feedback
User Feedback
Hi-fi Design
Hi-fi Design
Prototype Design
Prototype Design
05 Test
05 Test
Usability Test
Usability Test
Empathize
Empathize
Understand the Problem
Understand the Problem
Women in their 30s often need to purchase new clothing for various reasons. However, their busy professional and personal lives often leave little time for shopping. Moreover, due to their specific styles and standards, finding suitable items can be more challenging. Therefore, there is a demand for a service that can help them discover clothes matching their preferences.
Desk Research
Desk Research
To identify market demands, I researched online forums where women discuss their experiences with online shopping. The findings are categorized into four main areas:
To identify market demands, I researched online forums where women discuss their experiences with online shopping. The findings are categorized into four main areas:
Shop less than in their 20s
Shop less than in their 20s
More purposeful with specific preferences
More purposeful with specific preferences
Better understanding of body type, size,
and their own styles
Better understanding of
body type, size,
and their own styles
Better understanding of body type, size,
and their own styles
Focusing on quality
Focusing on quality
This desk research suggests that women in 30s have a need for purposeful shopping over frequent shopping, driven by well-defined size and style preferences and a focus on a high quality.
This desk research suggests that women in 30s have a need for purposeful shopping over frequent shopping, driven by well-defined size and style preferences and a focus on a high quality.
User Research
User Research
With the insights gathered from desk research, I conducted in-depth user interviews with two professional women in their 30s. I was focusing on discovering their real-world challenges when shopping for clothes online.
With the insights gathered from desk research, I conducted in-depth user interviews with two professional women in their 30s. I was focusing on discovering their real-world challenges when shopping for clothes online.
Here are the main challenges they mentioned:
Here are the main challenges they mentioned:
Time-consuming process
Time-consuming process
"It shouldn't take that long because when I find something I like, it's often sold out."
"It shouldn't take that long because when I find something I like, it's often sold out."
Difficulty in comparison
Difficulty in comparison
“It’s hard to see and buy one item from bunch of different websites on the phone.”
“It’s hard to see and buy one item from bunch of different websites on the phone.”
Discrepancy between image and reality
Discrepancy between image and reality
“Sometimes you feel cheated when you buy something and it was expensive but the quality isn't.”
“Sometimes you feel cheated when you buy something and it was expensive but the quality isn't.”
Size and fit uncertainty
Size and fit uncertainty
“Not being able to trust the sizing for the place that you're shopping at is the main challenge.”
“Not being able to trust the sizing for the place that you're shopping at is the main challenge.”
Hard to find items matching preferences and standards
Hard to find items matching preferences and standards
“I know what I like, but finding it is another story.”
“I know what I like, but finding it is another story.”
Through interviews, I confirmed that the needs identified in the desk research such as purposeful shopping with specific criteria are not being met in actual shopping experience.
Through interviews, I confirmed that the needs identified in the desk research such as purposeful shopping with specific criteria are not being met in actual shopping experience.
Define
Define
Affinity Diagram
Affinity Diagram
To synthesize and categorize the insights identified from the user interviews, I created Affinity Diagram.
To synthesize and categorize the insights identified from the user interviews, I created Affinity Diagram.
The challenges were categorized as below:
The challenges were categorized as below:
Challenges
Challenges
Description
Description
Choice Overload
Choice Overload
The abundance of options online can be overwhelming.
The abundance of options online can be overwhelming.
Shopping Fatigue
Shopping Fatigue
Users feel that shopping takes longer than it should.
Users feel that shopping takes longer than it should.
Assessment Challenge
Assessment Challenge
Evaluating size, fit, quality and other product details is difficult.
Evaluating size, fit, quality and other product details is difficult.
Limitation of Recommendation
Limitation of Recommendation
Recommendations often fail to align with users' style or intent.
Recommendations often fail to align with users' style or intent.
Fragmented Shopping Experience
Fragmented Shopping Experience
Users' preferred items are scattered across multiple websites, making the process inefficient.
Users' preferred items are scattered across multiple websites, making the process inefficient.
Budget and Value Concerns
Budget and Value Concerns
Users struggle to balance their budgets with their quality standards.
Users struggle to balance their budgets with their quality standards.
The affinity diagram showed that challenges were interrelated and partially causing each other. Moreover, most of them seem to originated from one main problem.
The affinity diagram showed that challenges were interrelated and partially causing each other. Moreover, most of them seem to originated from one main problem.
Main Problem
Main Problem
By analyzing the relationship between the challenges, I was able to identify a root issue to address:
By analyzing the relationship between the challenges, I was able to identify a root issue to address:
Current shopping platforms fail to effectively reflect users' clear preferences and standards. As a result, users have to manually explore product options and gather information, leading to time-consuming decision-making and shopping fatigue.
Current shopping platforms fail to effectively reflect users' clear preferences and standards. As a result, users have to manually explore product options and gather information, leading to time-consuming decision-making and shopping fatigue.
Ideate
Ideate
Before Diving into Ideation
Before Diving into Ideation
To design a user-centric solution, I refer to retailer’s sales techniques:
To design a user-centric solution, I refer to retailer’s sales techniques:
Providing excellent customer service:
Providing excellent customer service:
For example, offering reliable product information.
For example, offering reliable product information.
Personalizing the customer experience:
Personalizing the customer experience:
For example, recommending products based on their size, preferences, or shopping intent.
For example, recommending products based on their size, preferences, or shopping intent.
Based on these insights, I focused on the following aspects to shorten users’ exploring and comparing process:
Identifying users’ buying preferences and shopping intention.
Recommending available items and best deals along with detail information aligned with existing user’s criteria and goals.
Based on these insights, I focused on the following aspects to shorten users’ exploring and comparing process:
Identifying users’ buying preferences and shopping intention.
Recommending available items and best deals along with detail information aligned with existing user’s criteria and goals.
Idea Sketch
Idea Sketch
Personal Preference Onboarding
Personal Preference Onboarding
By collecting users' preferences and sizes during onboarding, the platform can effectively showcase and recommend products aligned with their tastes and sizes.
By collecting users' preferences and sizes during onboarding, the platform can effectively showcase and recommend products aligned with their tastes and sizes.
Option 1
Option 1
👍
👍
Easy, clear to select options.
Easy, clear to select options.
👎
👎
Needs so many steps to input all personal information.
Needs so many steps to input all personal information.
Option 2
Option 2
👍
👍
Users can quickly select a large amount of information based on categories in one page.
Users can quickly select a large amount of information based on categories in one page.
👎
👎
It might feel overwhelming and boring due to a lot of options.
It might feel overwhelming and boring due to a lot of options.
Option 3
Option 3
👍
👍
Users can select information by browsing through categories.
Users can select information by browsing through categories.
👎
👎
It might be cumbersome to visit each categories individually.
It might be cumbersome to visit each categories individually.
Intent Identification
Intent Identification
By asking users questions, the platform can narrow down their intention for visiting, enabling more relevant product recommendations.
By asking users questions, the platform can narrow down their intention for visiting, enabling more relevant product recommendations.
Option 1
Option 1
👍
👍
Ask intention from top area when user first open the app.
Ask intention from top area when user first open the app.
👎
👎
Users may not feel that they need to answer the question.
Users may not feel that they need to answer the question.
Option 2
Option 2
👍
👍
Ask intention while they are shopping by displaying questions in between products on the browsing page.
Ask intention while they are shopping by displaying questions in between products on the browsing page.
👎
👎
Users may not feel that they need to answer the question.
Users may not feel that they need to answer the question.
Option 3
Option 3
👍
👍
Ask intention through the bottom sheet from all the area.
Ask intention through the bottom sheet from all the area.
👎
👎
The options in bottom sheet list could be limited.
The options in bottom sheet list could be limited.
Product Image Based Virtual Try-on
Product Image Based Virtual Try-on
Providing a 3D virtual try-on based on the user's body size, helping them visualize how the products will fit.
Providing a 3D virtual try-on based on the user's body size, helping them visualize how the products will fit.
1
1
1
2
2
2
3
3
3
Option 1
Option 1
👍
👍
Ask intention from top area when user first open the app.
Ask intention from top area when user first open the app.
👎
👎
Users may not feel that they need to answer the question.
Users may not feel that they need to answer the question.
Option 2
Option 2
👍
👍
Ask intention while they are shopping by displaying questions in between products on the browsing page.
Ask intention while they are shopping by displaying questions in between products on the browsing page.
👎
👎
Users may not feel that they need to answer the question.
Users may not feel that they need to answer the question.
Option 3
Option 3
👍
👍
Ask intention through the bottom sheet from all the area.
Ask intention through the bottom sheet from all the area.
👎
👎
The options in bottom sheet list could be limited.
The options in bottom sheet list could be limited.
After evaluating the pros and cons of each idea sketch, I decided to prioritize the most intuitive options. This decision aligns with my primary goal of reducing shopping fatigue for the target user.
After evaluating the pros and cons of each idea sketch, I decided to prioritize the most intuitive options. This decision aligns with my primary goal of reducing shopping fatigue for the target user.
Prototype
Prototype
Lo-fi Wireframe and Workflow
Lo-fi Wireframe and Workflow
With selected ideas, I proceeded to the prototyping. During the workflow mapping process, I identified an additional need: a Personal Preference Settings feature. It would allow users to manage and update their preferences beyond the initial onboarding process. Recognizing its importance, I added this new feature on the wireframes.
With selected ideas, I proceeded to the prototyping. During the workflow mapping process, I identified an additional need: a Personal Preference Settings feature. It would allow users to manage and update their preferences beyond the initial onboarding process. Recognizing its importance, I added this new feature on the wireframes.
Test
Test
User Testing and Feedback
User Testing and Feedback
From the user test, I was able to gather feedbacks on design options. Based on these insights, I improved the designs.
From the user test, I was able to gather feedbacks on design options. Based on these insights, I improved the designs.
Balancing Detail and Simplicity
Balancing Detail and Simplicity
The initial designs had challenges:
Option A was overwhelming with all details on one page, while Option B required excessive back-and-forth navigation despite its simplicity.
The initial designs had challenges:
Option A was overwhelming with all details on one page, while Option B required excessive back-and-forth navigation despite its simplicity.
Preference Settings
Preference Settings
The user suggested adding the ability to input preferred brands to enhance personalization.
The user suggested adding the ability to input preferred brands to enhance personalization.
Colors and Typography
Colors and Typography
For the next step, I selected the color theme and typography. Since the service is a fashion e-commerce platform, my goal was to emphasize product photos. Therefore, I chose a neutral tone as the main color to keep the focus on the products rather than UI elements.
Additionally, I used purple as an accent color, as it can bridge warm and cool tones, creating visual balance among various colors on the screen.
For the next step, I selected the color theme and typography. Since the service is a fashion e-commerce platform, my goal was to emphasize product photos. Therefore, I chose a neutral tone as the main color to keep the focus on the products rather than UI elements.
Additionally, I used purple as an accent color, as it can bridge warm and cool tones, creating visual balance among various colors on the screen.
#0D0D0D
#0D0D0D
#3D3D3D
#3D3D3D
#6B6B6B
#6B6B6B
#DCDCDC
#DCDCDC
#8A2BE2
#8A2BE2
I selected Neue Haas Grotesk as the primary typeface to ensure product details are communicated clearly.
I selected Neue Haas Grotesk as the primary typeface to ensure product details are communicated clearly.
Neue Haas Grotesk Bold, 60px
H1
Neue Haas Grotesk Bold, 48px
H2
Neue Haas Grotesk Bold, 32px
H3
Neue Haas Grotesk Bold, 24px
H4
Neue Haas Grotesk Regular, 20px
Body 1
Neue Haas Grotesk Regular, 18px
Body 2
Neue Haas Grotesk Regular, 16px
Body 3
Final Designs
Final Designs
Feedback Applied Final Designs
Feedback Applied Final Designs
Personal Preference Onboarding
Personal Preference Onboarding
Like a sales representative, the feature collects user’s personal preferences to provide recommendations closely aligned with their preferences.
Like a sales representative, the feature collects user’s personal preferences to provide recommendations closely aligned with their preferences.
Chatbot-Assisted Intent Identification
Chatbot-Assisted Intent Identification
When users are unsure of what they want, the chatbot asks about their shopping intentions based on context, narrowing down options to better match their needs.
When users are unsure of what they want, the chatbot asks about their shopping intentions based on context, narrowing down options to better match their needs.
Product Image-Based Virtual Try-on
Product Image-Based Virtual Try-on
Users can see how products fit and look on their own body, providing both visual and text-based size information, reducing size issues.
Users can see how products fit and look on their own body, providing both visual and text-based size information, reducing size issues.
Style Profile Settings
Style Profile Settings
Beyond basic preferences, users can set highly detailed criteria such as texture, personal values for even more personalized recommendations.
Beyond basic preferences, users can set highly detailed criteria such as texture, personal values for even more personalized recommendations.
Final Feedback
Final Feedback
Final Feedback
I gathered the opinions about the final design to the user and these are the key points:
I gathered the opinions about the final design to the user and these are the key points:
Positive Onboarding Experience
Positive Onboarding Experience
Users found the onboarding process to be straightforward which provided them with a clear understanding of the service features and set appropriate expectations for personalized recommendations.
Users found the onboarding process to be straightforward which provided them with a clear understanding of the service features and set appropriate expectations for personalized recommendations.
Personalized Shopping Assistant
Personalized Shopping Assistant
Users found the shopping assistant feature to be useful, as it allowed them to refine their search and get more recommendations.
Users found the shopping assistant feature to be useful, as it allowed them to refine their search and get more recommendations.
Lessons Learned
Lessons Learned
Lessons Learned
Engaging directly with users provided deeper insights into their needs. For example, while they were frustrated by long shopping times, they also enjoyed exploring new and diverse products. Additionally, user test shows unexpected behaviors, such as users skipping the onboarding process designed for them. This highlighted the importance of observing user actions with an open mind. This experience allowed me to rethink UX strategies to ensure users engage with features instead of skipping them.
Engaging directly with users provided deeper insights into their needs. For example, while they were frustrated by long shopping times, they also enjoyed exploring new and diverse products. Additionally, user test shows unexpected behaviors, such as users skipping the onboarding process designed for them. This highlighted the importance of observing user actions with an open mind. This experience allowed me to rethink UX strategies to ensure users engage with features instead of skipping them.