UPSTYLED
Taking the stress out of getting dressed
Did you know that the fast fashion industry contributes to least 10% of all global carbon dioxide emissions?
As Cher Horowitz would say, “Contribute to pollution? AS IF!” I designed an end to end styling app to make getting dressed easy while reducing the need to buy more clothes to look good. It makes it easy for fashion lovers to define and curate their personal styles. UPstyled makes getting dressed fun and effortless but most importantly sustainable!
Platform:
Mobile iOS
Project:
Student
Tools:
Figma, FigJam, Excel
Roles:
UX Designer,
Visual Designer
Duration:
5 months
How I did it!
Equip users with the ability to create and track outfits quicker, reducing the time it takes to decide on an outfit.
1
A more personalized user interface that is welcoming and brings joy to dressing up.
2
Promote slow fashion and sustainability by giving users an in-depth analysis of their wardrobe metrics.
3
DESIGN PROCESS
How might we help people improve their relationship with their clothes?
These were the 3 fundamental goals:
Reduce “wardrobe panic” - reduce the struggle
Dress well efficiently - look good with minimal effort
Improve confidence - feel good in what you wear
Let the design process begin!
DISCOVER
I conducted a survey on Instagram and discovered a lot of them said getting dressed was a struggle!
Through extensive research within the fashion industry and exploration of clothing subscription services, I identified a common challenge among users: the difficulty in effectively pairing and styling their existing wardrobe.
45%
of people have difficulty deciding what to wear when going out.
80%
of people want to retain their clothing as long as possible.
45%
of people feel pressure to dress “nice” or “look good.”
From the survey responses, I found their main styling frustrations.
I wanted to understand what were some of the main struggles and needs users had with their styling processes and closets.
Were they happy with their clothes?
What tools could they have to improve their styling processes?
Could they wear everything they owned?
would likely wear things they already own over again.
53%
could style half or less of clothing they owned.
62%
felt an organized closet would make getting dressed easier.
57%
forgot that they had a certain item of clothing.
38%
I interviewed 5 different women and the consensus was: with more clothing, comes more problems.
Whether it was dressing up for events or work, this user data provided valuable insights into the users’ clothing preferences, outfit creation struggles, and behaviors. This helps me formulate a user-centered approach to the app's development.
“My clothes are all on my dresser. It helps that they are laid out next to each like a real life grid and see if these colors look good.”
“I have a more different emotional response to them and not knowing how to pair them differently.”
“I don’t know how to put together an outfit, so I usually put together what is comfortable and what fits.”
“I try on everything in the closet and make a huge mess and still can’t decide what to wear.”
DEFINE
5 major categories emerged from the data gathered during user research and brainstorming sessions.
As someone who came from science, I just love analyzing data. By utilizing an affinity map helped me to rapidly collect and find relating patterns, insights, and connections between the users, their closets, and their clothes.
2. Style Aesthetics & Closet Curation
Users had varied style preferences, which impacted their shopping habits.
1. Closet Struggles & Unworn Clothing
Users often had to try everything on to see what worked together.
4. Closet Organization
All users felt having a clear visualization of their closet would make planning outfits better.
3. Styling Assistance
Users wanted help but often could not see them paying for pricy stylist services.
5. Outfit Decisions & Styling Processes
Users often struggled to put together outfits or create more outfit iterations with things they owned already.
DEFINE
So, how can I help them get dressed?
After learning that users were struggling with visualizing their outfits to accomplish their goals of getting dressed, I wanted to define multiple paths to creating an outfit for people with a variety of style preferences as well as implement an improved clothing cataloguing system to their closets, and making this app usable daily.
DEFINE
Traditional clothing styling apps lacked personality, visualization and organization that users all wanted to have more of.
The biggest competitor out on the market was Stylebook. During my SWOT analysis I discovered while it serves the functionality of creating outfits, it was clunky and difficult to navigate.
Insight 1: No visual hierarchy
There is not much visual hierarchy implemented in the overall organization.
Confusing layout, and difficult to understand call to actions.
UI closely resembled an iOS address book.
Insight 2: Difficult to navigate
I found myself really confused as to what all the elements and icons do.
Sometimes they are disabled and sometimes they work if “Select” is clicked.
DEVELOP
Sketching was the quickest way to construct a visual representation of important features.
Because clothing relied heavily on visuals rather than descriptions, it was vital to put more emphasis on images.
Multiple paths = more styling options = flexibility!
Using the user flow and sketches created, I put together a main wire flow in Auto Flow to capture the options a user can take to put together an outfit.
Create an outfit - this path allows users to freely pick any clothing from their closet to create an outfit. This pathway is for users who commonly identify as style maximalists or creators.
Rewear an outfit - this path gives users the ability to wear an already established outfit that they’ve worn before. This pathway is for users who are seeking comfort and familiarity in their personal style.
Surprise me! - this path gives any user the ability to let the system put together an outfit. It takes the work out of getting dressed, literally!
Initial user feedback resulted in a couple of major improvements!
Based on the preliminary guerilla usability testing, users provided me valuable feedback to help me make design iterations through wireframing. This allowed me to create screens to help users clearly understand their styling patterns and wear rates.
1. Better clothing breakdown
Included the ability to “archive” clothing.
Multiple users were a fan of seeing the statistical breakdown of their clothing.
Quickly see where a specific item of clothing has been worn, which increase the chance an previous outfit could be worn again.
2. Improved outfit overview
Many users did not think “Activities” was a statistic that was important to their outfit overview.
Users cited metrics as one of the most important factors in understanding their closet statistics.
Removal of sharing an outfit as most users wanted this application to serve as a closet database and tracker.
Users expressed a desire for calm and welcoming colors over beiges and grays.
Now that we can get the user dressed, it was time to think of a color palette that would make the user feel good when entering their closets, but also a space where they could let their creativity out to explore their aesthetic and be inspired by their clothes.
Primary #C68BF4 aka CONFIDENCE - I chose a color palette of purple to symbolize creativity, confidence, and positivity. I decided to move away from the pink motif to be more gender inclusive.
Secondary #2EC4B6 aka SUSTAINABLE - For the secondary color, I chose a turquoise shade to represent calm, tranquility and a nod to green for environmentally conscious (e.g. sustainability).
I wanted the design to be warm and friendly but also playful and creative (getting dressed shouldn’t be a chore). I wanted the closet to have a predominantly light colored UI, rounded corners (soft) and drop shadows for emphasis.
DELIVER
User input continued to inform final design iterations.
The goal of this app is to help user create and organize their outfits so they can easily figure out what they want to wear with minimal effort. The usability testing session helps to test application design and to allow me to understand if the elements are functional, easy and fun to use.
I selected users who were familiar with mobile applications and gave them a series of tasks such as onboarding, outfit creation, and whether they could navigate themselves around Upstyled.
1. Increase size of clothing items in the item selection screens.
Some users felt the images might be too small for them to distinguish.
Increased the font size and brighetned the background for better readability.
Applied headers to clothing categories for clearer organization.
2. Improve organization on clothing statistics screen
Users suggested to frame images in squares rather than circles to avoid cutting off clothing.
Users preferred to have a favorite icon over saved for clothing.
Archive clothing button moved to a more accessible location.
DEVELOP
Leave the styling work to us and go slay, queen!
Designed for anyone who wants to get dressed in mind, Upstyled is like having your closet in your pocket. Have access to all your clothes with a touch of a button. With its friendly UI and whimsical design, the user will never feel like the struggles of feeling like they have nothing to wear.
Simple and quick on-boarding
For new users, a short survey allows the app to be more personalized to each user’s style aesthetic and choices.
Onboarding is concise and straight to the point.
Personalized dashboard
See today’s weather and your current events.
Recent outfits are shown to your decisions easier.
Statistics are displayed for a quick overview of your closet.
Concise closet organization
Search your closet for what you want to wear.
Add new items to your closet easily.
See what your closet staple(s) are.
Your closet is organized; no need to physically sort through your clothes to find something.
Work smarter, not harder!
See all the outfits you’ve worn at the touch of your finger tips.
Get an outfit to wear to work, a party, or a brunch in a few seconds!
See your clothing statistics to understand clothing composition, wears and impressions.
Know your clothing!
Know how often you’ve worn something.
See the outfits you’ve worn an item with.
If you outgrew it, archive it.
Seamlessly add clothing to a new outfit.
FIGMA PROTOTYPE
Try it out!
REFLECTION
Final thoughts and future improvements
While this is only a concept design, I learned a lot about people’s relationships with their clothing and it was far from superficial. Clothing often evoked a strong emotional response specific to the person wearing it.
Our clothes do have an impact in our lives whether that emotion stems from confidence, a fond memory, or simple enjoyment. I hope that having an application like this brings people a newfound joy in dressing up, extends their wardrobe shelf-life, or even expands their style creativity.
Things I would like to have done more of:
Implement a wardrobe AI into helping users find clothes in their closet to craft a certain aesthetic they want to attain.
Expand “Archive clothing” - I would have liked to connect to second-hand reselling apps such as ThredUP or Poshmark so give users more options for their unworn clothing.
Improve the visual branding (e.g. colors) to be more inclusive of men and non-binary, as then more people can use the application than just women.