The New Fitting Room: Expert Styling for Online Shoppers
The New Fitting Room: Expert Styling for Online Shoppers
The New Fitting Room: Expert Styling for Online Shoppers
MiStyle is a virtual styling experience that brings fashion experts to your fingertips. It is designed for individuals who are now spending more time shopping online versus in store but are still looking for that expert advice.
MiStyle is a virtual styling experience that brings fashion experts to your fingertips. It is designed for individuals who are now spending more time shopping online versus in store but are still looking for that expert advice.
MiStyle is a virtual styling experience that brings fashion experts to your fingertips. It is designed for individuals who are now spending more time shopping online versus in store but are still looking for that expert advice.
The problem
The problem
The problem
Since the pandemic, consumers are shopping online more, however, they're still looking for that expert advice that they received in store.
Since the pandemic, consumers are shopping online more, however, they're still looking for that expert advice that they received in store.
Since the pandemic, consumers are shopping online more, however, they're still looking for that expert advice that they received in store.
My role
My role
My role
I executed the design process using various tools, including Google Forms, Google Drawings, Whimsical, Optimal Workshop, UsabilityHub, Marvel, and Figma.
I executed the design process using various tools, including Google Forms, Google Drawings, Whimsical, Optimal Workshop, UsabilityHub, Marvel, and Figma.
I executed the design process using various tools, including Google Forms, Google Drawings, Whimsical, Optimal Workshop, UsabilityHub, Marvel, and Figma.
Design process
Design process
Design process
Considering the nature of this project (designing a new web app), I used the 5 Stage Design Thinking Process.
Considering the nature of this project (designing a new web app), I used the 5 Stage Design Thinking Process.
Considering the nature of this project (designing a new web app), I used the 5 Stage Design Thinking Process.
What do we know about the e-comm space?
What do we know about the e-comm space?
What do we know about the e-comm space?
Since the pandemic began, e-commerce sales have significantly increased, with estimates suggesting they will double 2019's total sales in 2021. This presents a substantial opportunity in the e-commerce space
Since the pandemic began, e-commerce sales have significantly increased, with estimates suggesting they will double 2019's total sales in 2021. This presents a substantial opportunity in the e-commerce space
Since the pandemic began, e-commerce sales have significantly increased, with estimates suggesting they will double 2019's total sales in 2021. This presents a substantial opportunity in the e-commerce space
Understanding the market
Understanding the market
Understanding the market
I conducted a Competitive Analysis for two apps: Stylebook and Wishi.
This allowed me to understand their overall strategy, their market advantage and explore opportunities for our solution to meet unfulfilled user needs.
I conducted a Competitive Analysis for two apps: Stylebook and Wishi.
This allowed me to understand their overall strategy, their market advantage and explore opportunities for our solution to meet unfulfilled user needs.
I conducted a Competitive Analysis for two apps: Stylebook and Wishi.
This allowed me to understand their overall strategy, their market advantage and explore opportunities for our solution to meet unfulfilled user needs.
Stylebook
Stylebook
Wishi
Wishi
Opportunities identified
Opportunities identified
Opportunities identified
Different styling packages including affordable options with clear explanations on the differences
Ability to choose a stylist based on needs and their expertise
Wardrobe feature
Ability to sync app across devices using a login
Different styling packages including affordable options with clear explanations on the differences
Ability to choose a stylist based on needs and their expertise
Wardrobe feature
Ability to sync app across devices using a login
Different styling packages including affordable options with clear explanations on the differences
Ability to choose a stylist based on needs and their expertise
Wardrobe feature
Ability to sync app across devices using a login
Getting to know the customer
Getting to know the customer
Getting to know the customer
I followed by conducting surveys and interviews. Since I was on the journey to create an app that was fairly new in the market, for the interviews, I selected individuals who would benefit from a personal styling app or individuals who have used in-store stylists’.
I followed by conducting surveys and interviews. Since I was on the journey to create an app that was fairly new in the market, for the interviews, I selected individuals who would benefit from a personal styling app or individuals who have used in-store stylists’.
I followed by conducting surveys and interviews. Since I was on the journey to create an app that was fairly new in the market, for the interviews, I selected individuals who would benefit from a personal styling app or individuals who have used in-store stylists’.
Survey findings
Survey findings
Survey findings
User interviews
User interviews
User interviews
Research Goals
Research Goals
Research Goals
Better understand the way people shop online and decide what to buy
Identify their pain points when getting dressed in their day to day lives
Understand general attitudes they may have towards seeking a virtual stylist
Discover features they'd like to see in a personal styling app
Better understand the way people shop online and decide what to buy
Identify their pain points when getting dressed in their day to day lives
Understand general attitudes they may have towards seeking a virtual stylist
Discover features they'd like to see in a personal styling app
Better understand the way people shop online and decide what to buy
Identify their pain points when getting dressed in their day to day lives
Understand general attitudes they may have towards seeking a virtual stylist
Discover features they'd like to see in a personal styling app
Learnings
Learnings
Learnings
All participants said they would benefit from a personal styling service
High cost is the #1 factor holding them back from using a personal styling service
All users would use a community chat feature where they can send and receive style inspiration and tips
All participants said they would benefit from a personal styling service
High cost is the #1 factor holding them back from using a personal styling service
All users would use a community chat feature where they can send and receive style inspiration and tips
All participants said they would benefit from a personal styling service
High cost is the #1 factor holding them back from using a personal styling service
All users would use a community chat feature where they can send and receive style inspiration and tips
People need affordable access to fashion advice as they shop online more frequently and struggle with self-styling
People need affordable access to fashion advice as they shop online more frequently and struggle with self-styling
People need affordable access to fashion advice as they shop online more frequently and struggle with self-styling
User journey maps
User journey maps
User journey maps
After creating personas, I used the journey mapping technique to visualize and identify users thoughts and emotions when completing tasks to draw attention to any pain-points they might experience. This allowed me to pinpoint areas I needed to focus on.
After creating personas, I used the journey mapping technique to visualize and identify users thoughts and emotions when completing tasks to draw attention to any pain-points they might experience. This allowed me to pinpoint areas I needed to focus on.
After creating personas, I used the journey mapping technique to visualize and identify users thoughts and emotions when completing tasks to draw attention to any pain-points they might experience. This allowed me to pinpoint areas I needed to focus on.
Pain points identified
Pain points identified
Pain points identified
Users have various body types which can sometimes making finding suitable options challenging
Users have demanding schedules with limited availability
Cost, cost, cost
Users have various body types which can sometimes making finding suitable options challenging
Users have demanding schedules with limited availability
Cost, cost, cost
Users have various body types which can sometimes making finding suitable options challenging
Users have demanding schedules with limited availability
Cost, cost, cost
I could now start brainstorming possible solutions.
I could now start brainstorming possible solutions.
I could now start brainstorming possible solutions.
Information architecture
Information architecture
Information architecture
Having an understanding of the different elements of the app, I began to organize features/pages into a sitemap.
Having an understanding of the different elements of the app, I began to organize features/pages into a sitemap.
Having an understanding of the different elements of the app, I began to organize features/pages into a sitemap.
Evaluating the structure
Evaluating the structure
Evaluating the structure
I evaluated my sitemap using the Open Card Sorting method, where participants sorted cards into logical categories and named them. On average, they created 6 categories—2 fewer than my original sitemap.
I evaluated my sitemap using the Open Card Sorting method, where participants sorted cards into logical categories and named them. On average, they created 6 categories—2 fewer than my original sitemap.
I evaluated my sitemap using the Open Card Sorting method, where participants sorted cards into logical categories and named them. On average, they created 6 categories—2 fewer than my original sitemap.
*The Similarity Matrix clusters cards most commonly paired together by percentage of participants.
Refining my sitemap
Refining my sitemap
Refining my sitemap
I simplified my original sitemap by reducing first-level pages and removing most third-level pages. Now, users can quickly find what they need without clicking through multiple layers.
I simplified my original sitemap by reducing first-level pages and removing most third-level pages. Now, users can quickly find what they need without clicking through multiple layers.
I simplified my original sitemap by reducing first-level pages and removing most third-level pages. Now, users can quickly find what they need without clicking through multiple layers.
User flows
User flows
User flows
Now that I had further solidified the navigation structure, I created User Flows to map out the paths my target users would take when completing tasks. I focused on the key features of the app: booking a stylist and finding style inspiration.
Now that I had further solidified the navigation structure, I created User Flows to map out the paths my target users would take when completing tasks. I focused on the key features of the app: booking a stylist and finding style inspiration.
Now that I had further solidified the navigation structure, I created User Flows to map out the paths my target users would take when completing tasks. I focused on the key features of the app: booking a stylist and finding style inspiration.
Wireframing
Wireframing
Wireframing
With a clearer understanding of my site's navigation, I sketched low-fidelity wireframes for key features and screens. After sharing for feedback and refining the designs, I created mid-fidelity wireframes with additional screens to complete flows, preparing the designs for user testing.
With a clearer understanding of my site's navigation, I sketched low-fidelity wireframes for key features and screens. After sharing for feedback and refining the designs, I created mid-fidelity wireframes with additional screens to complete flows, preparing the designs for user testing.
With a clearer understanding of my site's navigation, I sketched low-fidelity wireframes for key features and screens. After sharing for feedback and refining the designs, I created mid-fidelity wireframes with additional screens to complete flows, preparing the designs for user testing.
Stylist profiles and booking
Stylist profiles and booking
Stylist profiles and booking
My closet
My closet
My closet
Inspiration feed
Inspiration feed
Inspiration feed
Testing the mid-fidelity prototype
Testing the mid-fidelity prototype
Testing the mid-fidelity prototype
I conducted usability tests with the mid-fidelity prototype to see if users understood the app's basic functions and could easily navigate and complete tasks.
Six tests were done—five remotely over Zoom and one in-person, recorded with Loom. Each participant was given four tasks to complete.
I conducted usability tests with the mid-fidelity prototype to see if users understood the app's basic functions and could easily navigate and complete tasks.
Six tests were done—five remotely over Zoom and one in-person, recorded with Loom. Each participant was given four tasks to complete.
I conducted usability tests with the mid-fidelity prototype to see if users understood the app's basic functions and could easily navigate and complete tasks.
Six tests were done—five remotely over Zoom and one in-person, recorded with Loom. Each participant was given four tasks to complete.
The results
The results
To analyze the Usability Test results, I used Affinity Mapping from an evaluative research perspective. I noted observations and sorted them into four categories: Observations, Negative Quotes, Positive Quotes, and Errors, using a closed card sort. These were then transferred into a Rainbow Spreadsheet to visualize usability patterns and track error frequency. I used Jakob Nielsen’s four-step rating scale to measure error severity and prioritize fixes.
To analyze the Usability Test results, I used Affinity Mapping from an evaluative research perspective. I noted observations and sorted them into four categories: Observations, Negative Quotes, Positive Quotes, and Errors, using a closed card sort. These were then transferred into a Rainbow Spreadsheet to visualize usability patterns and track error frequency. I used Jakob Nielsen’s four-step rating scale to measure error severity and prioritize fixes.
To analyze the Usability Test results, I used Affinity Mapping from an evaluative research perspective. I noted observations and sorted them into four categories: Observations, Negative Quotes, Positive Quotes, and Errors, using a closed card sort. These were then transferred into a Rainbow Spreadsheet to visualize usability patterns and track error frequency. I used Jakob Nielsen’s four-step rating scale to measure error severity and prioritize fixes.
Refining further
Refining further
Refining further
After addressing the usability issues, I refined the design and created a high-fidelity prototype, which I shared with my UX/UI network for feedback.
One key issue emerged—users didn’t understand the app’s purpose during the onboarding process. I realized adding more information to the swipe-through screens wasn’t the solution, so I explored other onboarding options suited to the web app format.
I also made accessibility improvements by adding input field labels and increasing text size.
After addressing the usability issues, I refined the design and created a high-fidelity prototype, which I shared with my UX/UI network for feedback.
One key issue emerged—users didn’t understand the app’s purpose during the onboarding process. I realized adding more information to the swipe-through screens wasn’t the solution, so I explored other onboarding options suited to the web app format.
I also made accessibility improvements by adding input field labels and increasing text size.
After addressing the usability issues, I refined the design and created a high-fidelity prototype, which I shared with my UX/UI network for feedback.
One key issue emerged—users didn’t understand the app’s purpose during the onboarding process. I realized adding more information to the swipe-through screens wasn’t the solution, so I explored other onboarding options suited to the web app format.
I also made accessibility improvements by adding input field labels and increasing text size.
On-boarding before
Sign up before
The final solution
The final solution
The final solution
Changes made
Changes made
The homepage was updated to a responsive scroll format to provide more information and clarify the app's purpose.
CTA buttons were added to each stylist's intro card to guide users on how to book a stylist, solving usability issues.
The add icon was made more prominent, with a coach mark added to explain its function.
To improve visibility, the layout was changed from two posts per row to one post per row, similar to other social platforms.
The homepage was updated to a responsive scroll format to provide more information and clarify the app's purpose.
CTA buttons were added to each stylist's intro card to guide users on how to book a stylist, solving usability issues.
The add icon was made more prominent, with a coach mark added to explain its function.
To improve visibility, the layout was changed from two posts per row to one post per row, similar to other social platforms.
The homepage was updated to a responsive scroll format to provide more information and clarify the app's purpose.
CTA buttons were added to each stylist's intro card to guide users on how to book a stylist, solving usability issues.
The add icon was made more prominent, with a coach mark added to explain its function.
To improve visibility, the layout was changed from two posts per row to one post per row, similar to other social platforms.
Interact with the prototype here
Interact with the prototype here
Tasks can be completed in the following order:
Sign-up with on-boarding or Log-in
Book a Stylist
Add Item to Closet
Search for Style Inspiration
If you would like to interact with the prototype in an isolated tab, please click here.
Tasks can be completed in the following order:
Sign-up with on-boarding or Log-in
Book a Stylist
Add Item to Closet
Search for Style Inspiration
If you would like to interact with the prototype in an isolated tab, please click here.
Tasks can be completed in the following order:
Sign-up with on-boarding or Log-in
Book a Stylist
Add Item to Closet
Search for Style Inspiration
If you would like to interact with the prototype in an isolated tab, please click here.
Next steps
Next steps
Next steps
Through the process, there were various features I initially wanted to include in the first launch of the product. However, I quickly realized they were out of scope with the limited time and resources. Therefore, I focused on the core features my personas would initially benefit from.
To create added value for my users, the next feature that will be included in version 2 will be the community chat feature. Users will be able to chat amongst the MiStyle community to share ideas, ask questions and build connections. This will give users a purpose to use the app more frequently and hopefully increase the customer return rate.
Through the process, there were various features I initially wanted to include in the first launch of the product. However, I quickly realized they were out of scope with the limited time and resources. Therefore, I focused on the core features my personas would initially benefit from.
To create added value for my users, the next feature that will be included in version 2 will be the community chat feature. Users will be able to chat amongst the MiStyle community to share ideas, ask questions and build connections. This will give users a purpose to use the app more frequently and hopefully increase the customer return rate.
Through the process, there were various features I initially wanted to include in the first launch of the product. However, I quickly realized they were out of scope with the limited time and resources. Therefore, I focused on the core features my personas would initially benefit from.
To create added value for my users, the next feature that will be included in version 2 will be the community chat feature. Users will be able to chat amongst the MiStyle community to share ideas, ask questions and build connections. This will give users a purpose to use the app more frequently and hopefully increase the customer return rate.
Let's team up to bring great ideas to life!
Let's team up to bring great ideas to life!
Let's team up to bring great ideas to life!
Copy my email
Copied
Copy my email
Copied
Copy my email
Copied