Role:
User Experience Designer
Date:
March - September 2023
Prototype:
Tools:
Figma | Adobe Illustrator
| Optimal Workshop
Project Overview
StitchFit is an ecommerce app that recommends shoppers correct fitting clothing by measuring them with photo technology and using their measurements to curate a selection of clothing from different brands personalized to their size and preference.
This case study delves into the challenges of finding the correct size when shopping online. Over a six-month period, I designed an application from ideation to prototype, addressing this issue with an innovative approach and user-informed solutions.
Problem
A common issue with the rise of online shopping is purchasing clothes that turn out to be the wrong size. This problem leads to a higher rate of returns, creating challenges for both companies and the environment.
Inconsistency in clothing sizing exists due to vanity sizing that emerged in the 20th century as well as different styles across different brands.
Sizing inconsistency in the fashion industry is an issue for shoppers, businesses, and the environment.
Shoppers bracket purchase clothing and return the wrong sized clothing to combat this existing issue they face.
There are some solutions towards the issue of clothing size inconsistency such as plug-ins for online retail stores as well as more experimental solutions
Final Designs
To tackle this issue, I explored methods to improve size accuracy using both objective and subjective forms of measurements and data collection. StitchFit utilizes photo technology to measure users' sizes and recommends clothing from their favorite brands that fits them correctly.
Why is this a problem?
To further understand users pain points on the current state of online shopping, I conducted user interviews to recognize the target user and to see how online shoppers felt about finding their size online.
I conducted user interviews with five participants to gain deeper insights into my target users and inform my design. The questions focused on their routines and opinions about the current state of online shopping. Which informed the design to analyze users' body measurements to determine the best size for them, addressing the inevitable inconsistencies between brand sizes. Some main insights that users brought up include:
"It's important for the online store to have a good return policy, and it played a factor in whether they were willing to purchase from the store."
"Sizes are inconsistent more between brand than within brands but fabric stretch can make sizes within brands inconsistent"
" Reviews and images play a large part in how I determine my size online."
" If I am in between 2 sizes, I will decide if I prefer a looser or tighter fit and then choose my size according to that."
Current Solutions
Similar problem spaces have been addressed by other products. Market solutions typically include retail site plugins with quizzes for size estimation. These approaches fall short due to subjective measurements and limited user awareness. However, TrueFit presents an innovative solution by estimating sizes based on brands the user already knows, thus incorporating the user's personal knowledge for more accurate sizing.
One gap in the market is a product that recommends clothing based on the user's size and preferences, rather than the user having to search for items that fit. This approach ensures that users won't encounter the frustration of finding something they like only to discover it's not available in their size.
Allows users to save data
Sizing based off familiar brands
Visibility
Objective Sizing Accuracy
Retail Site Integration
Sketches
Informed by the user research, I began designing low-fidelity sketches to determine the direction that I wanted to take my project and to brainstorm details that would be included in the final design.
I brainstormed two ideas for products that would solve the problem of inconsistent sizing online.
Sketch 1 is an app that utilizes photo scanning technology to determine an users size, then suggests clothing based on their size
Sketch 2 is a browser plug-in that asks users a variety of questions about their body, fit preferences, an sizing from specific brands
I decided to proceed with Sketch 1 because it provides a more objective method for measuring the user's size, resulting in more accurate sizing suggestions.
I decided to proceed with Sketch 1 because it provides a more objective method for measuring the user's size, resulting in more accurate sizing suggestions.
1
2
Wireframes
I translated my first sketches into low-fidelity wireframes and created a clickable prototype to test with users. Based on 3 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.
Some recommendations that users suggested were:
Add a filter search option.
Make switching users more intuitive and easier to find.
Move the login to a later part of the app so that users are not asked to login immediately after opening the app.
Improving the onboarding process
One challenge identified during usability testing was that users did not want to log in at the beginning of the set-up process. Allowing users to skip certain steps creates a more seamless and user-driven introduction to the app, enabling them to understand its functionality before signing up.
Users will have three opportunities to skip the setup process:
Set-up Flow
Design Improvements
To test my high-fidelity design, I conducted usability testing with 5 users. I asked the users to complete a series of tasks while providing feedback on specific flows and functions. The main usability issues identified included:
Issue 1: Order history is hard to find.
I moved the order history to the front page of the profile so that it is easier for users to find.
I moved the order history to the front page of the profile so that it is easier for users to find.
Issue 2: Closet button is hidden and not intuitive.
I moved the 'add the closet' button next to the 'add to bag' button and changed it to a heart icon so that it is more intuitive and easier to find for users.
I moved the 'add the closet' button next to the 'add to bag' button and changed it to a heart icon so that it is more intuitive and easier to find for users.
Issue 3: Settings button does not navigate anywhere.
I added a pop-up that controls settings for the photo sizing process.
I added a pop-up that controls settings for the photo sizing process.
Issue 4: The change from "Add to bag" to "View in bag" is not obvious.
I added the link to view in bag on the pop-up so that it is more visible for users.
I added the link to view in bag on the pop-up so that it is more visible for users.
Lessons Learned
The set-up process for an app should be quick and simple, giving the user a choice to skip certain choices.
It is important to keep the user's needs in mind throughout the whole design process.
Usability testing is important throughout the design process and will reveal usability issues that you did not predict.
Role:
User Experience Designer
Date:
March - September 2023
Prototype:
Tools:
Figma | Adobe Illustrator | Optimal Workshop
Project Overview
StitchFit is an ecommerce app that recommends shoppers correct fitting clothing by measuring them with photo technology and using their measurements to curate a selection of clothing from different brands personalized to their size and preference.
This case study delves into the challenges of finding the correct size when shopping online. Over a six-month period, I designed an application from ideation to prototype, addressing this issue with an innovative approach and user-informed solutions.
Problem
A common issue with the rise of online shopping is purchasing clothes that turn out to be the wrong size. This problem leads to a higher rate of returns, creating challenges for both companies and the environment.
Inconsistency in clothing sizing exists due to vanity sizing that emerged in the 20th century as well as different styles across different brands.
Sizing inconsistency in the fashion industry is an issue for shoppers, businesses, and the environment.
Shoppers bracket purchase clothing and return the wrong sized clothing to combat this existing issue they face.
There are some solutions towards the issue of clothing size inconsistency such as plug-ins for online retail stores as well as more experimental solutions
Final Designs
To tackle this issue, I explored methods to improve size accuracy using both objective and subjective forms of measurements and data collection. StitchFit utilizes photo technology to measure users' sizes and recommends clothing from their favorite brands that fits them correctly.
1
App introduction
When a user opens the app for the first time, they are greeted with an introduction and a tutorial, complete with images showcasing the app's features.
2
Measuring Size
Users are prompted to select their sizing preferences and optionally input their measurements for greater accuracy. They the can follow on-screen directions to complete the photo-sizing process.
3
Create Profile
After being presented with their sizing results, users are prompted to save their size details by creating a user profile.
4
Buying Items
The items on the homepage are generated from the users brand preferences as well as sizing results. They can view individual items, look at reviews and add the item to their bag.
Why is this a problem?
To further understand users pain points on the current state of online shopping, I conducted user interviews to recognize the target user and to see how online shoppers felt about finding their size online.
I conducted user interviews with five participants to gain deeper insights into my target users and inform my design. The questions focused on their routines and opinions about the current state of online shopping. Which informed the design to analyze users' body measurements to determine the best size for them, addressing the inevitable inconsistencies between brand sizes. Some main insights that users brought up include:
"It's important for the online store to have a good return policy, and it played a factor in whether they were willing to purchase from the store."
"Sizes are inconsistent more between brand than within brands but fabric stretch can make sizes within brands inconsistent"
" Reviews and images play a large part in how I determine my size online."
" If I am in between 2 sizes, I will decide if I prefer a looser or tighter fit and then choose my size according to that."
Current Solutions
Similar problem spaces have been addressed by other products. Market solutions typically include retail site plugins with quizzes for size estimation. These approaches fall short due to subjective measurements and limited user awareness. However, TrueFit presents an innovative solution by estimating sizes based on brands the user already knows, thus incorporating the user's personal knowledge for more accurate sizing.
One gap in the market is a product that recommends clothing based on the user's size and preferences, rather than the user having to search for items that fit. This approach ensures that users won't encounter the frustration of finding something they like only to discover it's not available in their size.
Allows users to save data
Sizing based off familiar brands
Visibility
Objective Sizing Accuracy
Retail Site Integration
Sketches
Informed by the user research, I began designing low-fidelity sketches to determine the direction that I wanted to take my project and to brainstorm details that would be included in the final design.
I brainstormed two ideas for products that would solve the problem of inconsistent sizing online.
Sketch 1 is an app that utilizes photo scanning technology to determine an users size, then suggests clothing based on their size
Sketch 2 is a browser plug-in that asks users a variety of questions about their body, fit preferences, an sizing from specific brands
I decided to proceed with Sketch 1 because it provides a more objective method for measuring the user's size, resulting in more accurate sizing suggestions.
I decided to proceed with Sketch 1 because it provides a more objective method for measuring the user's size, resulting in more accurate sizing suggestions.
1
2
Wireframes
I translated my first sketches into low-fidelity wireframes and created a clickable prototype to test with users. Based on 3 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.
Some recommendations that users suggested were:
Add a filter search option.
Make switching users more intuitive and easier to find.
Move the login to a later part of the app so that users are not asked to login immediately after opening the app.
Improving the onboarding process
One challenge identified during usability testing was that users did not want to log in at the beginning of the set-up process. Allowing users to skip certain steps creates a more seamless and user-driven introduction to the app, enabling them to understand its functionality before signing up.
Users will have three opportunities to skip the setup process:
Skip size set up
Users can skip the size set up and go straight to the homepage to browse popular items.
They will be prompted to complete size set up to get personalized suggestions.
Skip size set up
Users can skip the size set up and go straight to the homepage to browse popular items.
They will be prompted to complete size set up to get personalized suggestions.
Skip profile creation
Users can skip creating their user profile after their size set up to browse clothing items in their size.
Users are prompted to create their user profile to save their sizing details.
Skip profile creation
Users can skip creating their user profile after their size set up to browse clothing items in their size.
Users are prompted to create their user profile to save their sizing details.
Fully logged in
Once a user is fully logged in, they will see clothing options in their size and brand preferences.
Fully logged in
Once a user is fully logged in, they will see clothing options in their size and brand preferences.
Set-up Flow
Design Improvements
To test my high-fidelity design, I conducted usability testing with 5 users. I asked the users to complete a series of tasks while providing feedback on specific flows and functions. The main usability issues identified included:
Issue 1: Order history is hard to find.
I moved the order history to the front page of the profile so that it is easier for users to find.
I moved the order history to the front page of the profile so that it is easier for users to find.
Issue 2: Closet button is hidden and not intuitive.
I moved the 'add the closet' button next to the 'add to bag' button and changed it to a heart icon so that it is more intuitive and easier to find for users.
I moved the 'add the closet' button next to the 'add to bag' button and changed it to a heart icon so that it is more intuitive and easier to find for users.
Issue 3: Settings button does not navigate anywhere.
I added a pop-up that controls settings for the photo sizing process.
I added a pop-up that controls settings for the photo sizing process.
Issue 4: The change from "Add to bag" to "View in bag" is not obvious.
I added the link to view in bag on the pop-up so that it is more visible for users.
I added the link to view in bag on the pop-up so that it is more visible for users.
Lessons Learned
The set-up process for an app should be quick and simple, giving the user a choice to skip certain choices.
It is important to keep the user's needs in mind throughout the whole design process.
Usability testing is important throughout the design process and will reveal usability issues that you did not predict.
Role:
User Experience Designer
Date:
March - September 2023
Prototype:
Tools:
Figma | Adobe Illustrator | Optimal Workshop
Project Overview
StitchFit is an ecommerce app that recommends shoppers correct fitting clothing by measuring them with photo technology and using their measurements to curate a selection of clothing from different brands personalized to their size and preference.
This case study delves into the challenges of finding the correct size when shopping online. Over a six-month period, I designed an application from ideation to prototype, addressing this issue with an innovative approach and user-informed solutions.
Problem
A common issue with the rise of online shopping is purchasing clothes that turn out to be the wrong size. This problem leads to a higher rate of returns, creating challenges for both companies and the environment.
Inconsistency in clothing sizing exists due to vanity sizing that emerged in the 20th century as well as different styles across different brands.
Sizing inconsistency in the fashion industry is an issue for shoppers, businesses, and the environment.
Shoppers bracket purchase clothing and return the wrong sized clothing to combat this existing issue they face.
There are some solutions towards the issue of clothing size inconsistency such as plug-ins for online retail stores as well as more experimental solutions
Final Designs
To tackle this issue, I explored methods to improve size accuracy using both objective and subjective forms of measurements and data collection. StitchFit utilizes photo technology to measure users' sizes and recommends clothing from their favorite brands that fits them correctly.
1
App introduction
When a user opens the app for the first time, they are greeted with an introduction and a tutorial, complete with images showcasing the app's features.
App introduction
When a user opens the app for the first time, they are greeted with an introduction and a tutorial, complete with images showcasing the app's features.
2
Measuring Your Size
Users are prompted to select their sizing preferences and optionally input their measurements for greater accuracy. They then can follow on-screen directions to complete the photo-sizing process.
Measuring Your Size
Users are prompted to select their sizing preferences and optionally input their measurements for greater accuracy. They then can follow on-screen directions to complete the photo-sizing process.
3
User Profile Creation
After being presented with their sizing result, users are prompted to save their size details by creating a user profile.
User Profile Creation
After being presented with their sizing result, users are prompted to save their size details by creating a user profile.
4
Buying an Item
The items on the homepage are generated from the users brand preferences as well as sizing results. They can view individual items, look at reviews and add the item to their bag.
Buying an Item
The items on the homepage are generated from the users brand preferences as well as sizing results. They can view individual items, look at reviews and add the item to their bag.
Why is this a problem?
To further understand users pain points on the current state of online shopping, I conducted user interviews to recognize the target user and to see how online shoppers felt about finding their size online.
I conducted user interviews with five participants to gain deeper insights into my target users and inform my design. The questions focused on their routines and opinions about the current state of online shopping. Which informed the design to analyze users' body measurements to determine the best size for them, addressing the inevitable inconsistencies between brand sizes. Some main insights that users brought up include:
"It's important for the online store to have a good return policy, and it played a factor in whether they were willing to purchase from the store."
"Sizes are inconsistent more between brand than within brands but fabric stretch can make sizes within brands inconsistent"
" Reviews and images play a large part in how I determine my size online."
" If I am in between 2 sizes, I will decide if I prefer a looser or tighter fit and then choose my size according to that."
Current Solutions
Similar problem spaces have been addressed by other products. Market solutions typically include retail site plugins with quizzes for size estimation. These approaches fall short due to subjective measurements and limited user awareness. However, TrueFit presents an innovative solution by estimating sizes based on brands the user already knows, thus incorporating the user's personal knowledge for more accurate sizing.
One gap in the market is a product that recommends clothing based on the user's size and preferences, rather than the user having to search for items that fit. This approach ensures that users won't encounter the frustration of finding something they like only to discover it's not available in their size.
Allows users to save data
Sizing based off familiar brands
Visibility
Objective Sizing Accuracy
Retail Site Integration
Sketches
Informed by the user research, I began designing low-fidelity sketches to determine the direction that I wanted to take my project and to brainstorm details that would be included in the final design.
I brainstormed two ideas for products that would solve the problem of inconsistent sizing online.
Sketch 1 is an app that utilizes photo scanning technology to determine an users size, then suggests clothing based on their size
Sketch 2 is a browser plug-in that asks users a variety of questions about their body, fit preferences, an sizing from specific brands
I decided to proceed with Sketch 1 because it provides a more objective method for measuring the user's size, resulting in more accurate sizing suggestions.
I decided to proceed with Sketch 1 because it provides a more objective method for measuring the user's size, resulting in more accurate sizing suggestions.
1
2
Wireframes
I translated my first sketches into low-fidelity wireframes and created a clickable prototype to test with users. Based on 3 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.
Some recommendations that users suggested were:
Add a filter search option.
Make switching users more intuitive and easier to find.
Move the login to a later part of the app so that users are not asked to login immediately after opening the app.
Improving the onboarding process
One challenge identified during usability testing was that users did not want to log in at the beginning of the set-up process. Allowing users to skip certain steps creates a more seamless and user-driven introduction to the app, enabling them to understand its functionality before signing up.
Users will have three opportunities to skip the setup process:
Set-up Flow
Design Improvements
To test my high-fidelity design, I conducted usability testing with 5 users. I asked the users to complete a series of tasks while providing feedback on specific flows and functions. The main usability issues identified included:
Issue 1: Order history is hard to find.
I moved the order history to the front page of the profile so that it is easier for users to find.
I moved the order history to the front page of the profile so that it is easier for users to find.
Issue 2: Closet button is hidden and not intuitive.
I moved the 'add the closet' button next to the 'add to bag' button and changed it to a heart icon so that it is more intuitive and easier to find for users.
I moved the 'add the closet' button next to the 'add to bag' button and changed it to a heart icon so that it is more intuitive and easier to find for users.
Issue 3: Settings button does not navigate anywhere.
I added a pop-up that controls settings for the photo sizing process.
I added a pop-up that controls settings for the photo sizing process.
Issue 4: The change from "Add to bag" to "View in bag" is not obvious.
I added the link to view in bag on the pop-up so that it is more visible for users.
I added the link to view in bag on the pop-up so that it is more visible for users.
Lessons Learned
The set-up process for an app should be quick and simple, giving the user a choice to skip certain choices.
It is important to keep the user's needs in mind throughout the whole design process.
Usability testing is important throughout the design process and will reveal usability issues that you did not predict.