VÉRA
A smart mirror that can know your style
How can we help users select the most suitable outfit to boost confidence and alleviate stress in choosing an outfit for events by considering unexpected factors such as weather, time, event type, mood, fashion trends, and the clothes they already own?
Company
Northeastern University (Acedemic Project)
Timeline
10/2024-12/2024
Role
UIUX Designer
As the UI/UX Designer for VÉRA, an AI-based digital mirror for personalized outfit styling, I guided the product’s design direction from research to iteration. I carried out user interviews and rapid prototyping to uncover styling behaviors and streamline interaction flows. Through A/B testing on different interface versions, I derived insights that directly informed design refinements, resulting in a clearer and more intuitive user experience.
Team
2 UIUX Designer
1 Devoloper
Beginning: Get to know our target users
Who are they and what do they expect?
Possible User Circumstances & Unexpected Situations
Survey
31 Responses
84% Female
10% male
74%
want AI recommendation for daily outfits
61%
Want automatically record the clothes in th closet
39%
want reminder of washing/dry cloth
26%
want sharing outfits to friends/ let friends choose
Next, get to the ideation
1
Smart Mirror
When people stand in front of the “digital mirror”, it will automatically capture their current outfit and store the clothes. Then, the mirror will AI generate outfit suggestions based on the clothes it captured, the body size you put in, the style that you like, what event you attending, and weather of the day.
2
Rotating Rack
A closet where it will “give” people the clothes. Before opening the closet door, there is a screen on the closet that lets people see what clothes are inside by scanning the closet. People can pick the clothes they want to wear from the screen. They can select the clothes that they want from the app. When they open the door, the clothes will automatically turn to the ones they need, and they can grab them without needing to dig into their closet.
(Just an idea with the help of AI video generation)
Rough Ideation Sketches
Smart Mirror
Key Features:
Camera to learn about what style the user like to wear and let users know what clothes are in their closet
-
Users’ daily outfit
-
Outfit style
-
Body size
-
Height
Weather and location are auto-detected, but users have the option to change the location
Clock and date
It will have three AI suggestions each time
Virtual Try on:
The user can change the background to see if the chosen outfit matches the vibe of the occasion
Smart Hand Gesture in the air to navigate the interface. No need to touch the mirror to navigate
Voice Assistant:
Tell the mirror to do what you want
HD Imaging Glass
Camera scanning
The camera on top of the mirror helps record users' outfits whenever they stand in front of it. Using AI, it scans and tracks body changes over time, allowing users to understand themselves better and find the right clothing sizes more efficiently when shopping.
-
Will automatically give user their body measurement
-
Automatically recorded their clothes and styles into the system
Voice Assistant:
-
Say 'Scan my outfit' or any phrase using the word 'scan' to activate the camera and record the clothes
Three different choices
Like & Dislike
Help AI learn your style
In the design, to help the AI better understand the user's usual style, data is collected not only through the mirror's camera but also by learning from the user's outfit selections while using the mirror.
How to navigate
Click to go back
Click to like
(keep the outfit)
Click to generate 3 new sets again
Options for occasional outfits (can be hidden)
Swipe the card to view more
Every time AI will generated 3 sets of outfits
Click to dislike - will automatically generate a new set
Click the card to change either tops/bottoms individually
Vacation is selected for outfit style
Swipe left & right to switch part of the outfits (need to move hand little upper to help recognition when switching tops & move hand lower to switch bottoms)
Click to select this outfit to let the “rack” know what outfit you picked
Virtully Try-on
As background change, location and weather also change
User can choose their own background by saying the place name
AI suggestions/prompt
Have the options to try outfit on virtually
-
AI will randomly give users three different backgrounds
-
User swipes left & right to change backgrounds
Click “Confirm” to let the “rack” know what outfit you want
User Test
Paper Prototype
Set Up
To set up an environment for testing the Smart Mirror project, key features are selected and printed in a 1:1 ratio to ensure accurate evaluation.
Prepare:
Key elements cut-off
Scissor
Tape
Mirror
In Process
Part 1
By manually arranging and pasting the necessary components onto the mirror, new layouts can be quickly created for further assessment. This approach allows testers to observe real-time changes on each page, encouraging them to verbalize their thoughts while making decisions.
Part 2
Engaging testers with the Figma interface allows for a deeper understanding of the entire process. They will navigate the full interactive experience, exploring key functionalities and providing feedback on usability, design, and user experience. These high-fidelity interfaces offer enhanced details, realistic interactions, and additional features.
Findings
Positive
Love AI powered outfit selection feature, which helps reduce time spent on coordinating outfits and avoids unnecessary repeat purchases.
Also appreciate the 'Change Background' feature, as it creates an immersive experience that helps them visualize how the selected outfit would look in different settings.
Pain Points
There are some uncertainties regarding interface details, as users sometimes struggle with what to do next and require guidance. For example, the purpose of the back button is not always clear.
One tester suggested enabling the ability to switch between tops and bottoms without having to click into the card, reducing an extra step for a more convenient experience.
How to Become More Accessible?
Layout for Different Height
Another function of the camera is to intelligently adjust the mirror’s interface layout based on the user's height, ensuring it is positioned at an optimal level for ease of use. This enhances accessibility and provides a more user-friendly experience.