DRESSCODE
Building a digital wardrobe app for closet organization and outfit ideation.
overview
Context.
For my Human-Centered Design class, I worked on a semester long project to develop my own product that solves an issue using industry standard tools. I designed a digital closet app where I owned the research, synthesis, ideation, and visual design processes.
ROLE
Product Designer
TIMELINE
Sep 2024 - Dec 2024
SKILLS
User Research, Human-Centered Design, 0-1 Prototyping, Mobile Design
TEAM
1 Designer
Defining the problem space.
Initially, I wanted to focus on a lifestyle app targeted towards Gen-Z audiences. I found that within my personal life, I often struggled to pick out an outfit for the day or a special occasion. As a college student, I would get lazy to plan out my outfits simply because I had bigger priorities, such as academics. I wanted to explore if other people my age struggled with the same issues as I did.
With this in mind, I put forth a simple question:
How might we make it easier for people to choose their daily outfits?
research process
Desktop research.
To assess the viability and relevancy of my problem scope, I performed secondary research where I discovered that many young users turn towards digital methods for outfit inspiration and documentation. According to a Vogue Business article published in 2024, “Gen-Z has looked for ways to log, organize, and style outfits from their wardrobes”.
Notes App as a Digital Wardrobe Organizer
Photo: Courtesy of Amelia Hahne-Keindl
Photo: Courtesy of Camille Helie
User research goals.
Before diving into the user research, I set goals for myself in order to understand the process that users take when planning and creating their outfits.
📍
Organization Factors
Understand how users decide to organize their closet, be it through physical or digital factors.
📍
Planning Methods
What methods users use to plan their outfits, whether it be physically, digitally, mentally, etc.
📍
Pain Points
Identify user struggles with wardrobe planning and organizing.
User surveys.
I sent out a survey to users of age 16-24, collecting over 60 responses in total. In this survey, I gauged how users organize their closets, come up with outfits to wear, and where they source their outfit inspiration from. I found that:
💡
Organized Media as a Source of Inspiration
Platforms with scrollable feeds and retrievable content that can be saved are more likely to be used a source of inspiration for outfits. Think Instagram, Pinterest, or TikTok.
💡
Lack of Outfit Generation or Planning Systems
Users often plan and create their outfits the day of and spontaneously. There are no main methods for organization or planning.
💡
Repetition of Outfits
Students often repeat outfits and don’t have good wardrobe organization because they have limited spending money and are restricted by budget.
User interviews.
I conducted 5 user interviews where I had students walk me through their typical process in choosing an outfit, given different scenarios. For example, I asked students how they would choose an outfit before going to classes. Do they plan their outfits the night before? Do they throw on whatever is closest to them the morning of? I found that:
💡
Time Constraints Impact Outfit Choices
Since Gen-Z users are still in school, they usually have a short amount of time to pick out their outfit before they have to head out for the day.
💡
Mental Model of Outfits
A lot of students come up with outfits from memory. They have a lack of inspiration in the moment, so they create something that they know will work or had been worn before.
💡
Practicality Over Self-Expression
The main factor that users organize their closet by is “temperature”. Moreover, they prioritize comfortability with their outfits, particularly adhering to the current weather conditions of that day.
I noticed that students don’t put as much effort in having a well-thought out outfit. Thus, I reformed my approach on how I could incentivize them to:
How might we make outfit planning an organizational and intentional process for students?
User personas.
I synthesized my research to create potential user personas for my digital wardrobing app.
Jack
20 years old, Computer Science Major
Personality:
Disorganized, messy
Pain Points:
Struggles to find clothes
Often repeats outfits
Washes his clothes every 2 weeks
Goal:
Improved closet organization
22 years old, Humanities Major
Personality:
Curator, niche micro influencer on Pinterest
Pain Points:
Repetitive styling choices
Struggles to dress according to her mood
Goal:
More ideas with using her existing pieces to create outfits for social media content
Molly
19 years old, Business Major
Personality:
Easy-going, often going out, very professional
Pain Points:
Lack of variety in outfits
Struggles to dress uniquely at parties
Goal:
Have a bigger variety of professional outfits; becoming more stylish
Kevin
Journey map.
Using Jack’s persona, I developed a journey map to illustrate the use case for my app and how the issue of outfit organization may come about given a scenario.
Jack
20 years old, Computer Science Major
stage 5
Ending the day with his disorganized closet
“I don’t have enough time to do this. Might as well do this tomorrow and get some sleep now.”
STage
Pain POints
stage 1
Looking for clothes (disorganized closet)
“I don’t know what’s clean or what matches with my outfit. I never know where I put my clothes...”
stage 2
Choosing an outfit
“I don’t know what to wear. I wish I had someone who could give me advice every morning.”
stage 3
Wearing the outfit during the day
“Oh no...I should have done my laundry yesterday...I am embarrassed.”
stage 4
Trying to organize his closet
“I don’t know if I should organize them by colors or types. I need help!”
design process
Ideation.
Using divergent thinking, I came up with solutions for digital, physical, and time-based ideas to address wardrobe organization and planning. Then, I combined the best ideas from my brainstorming through convergent thinking, where I outlined a user flow for a digital wardrobing application.
Divergent Thinking
Closet organization
Upload
Hangers
Bookmarks
App
Daily
Outfit Generator
Calendar
Weather
Categories
Wardrobe Organization & Outfit Creation
Digital Solutions
A student-focused wardrobe planning app that categorizes clothes by occasion, weather, and dress codes
Visual closet inventory with mix-and-match suggestions
A calendar integration that suggests outfits based on scheduled activities
Weekly outfit planning board with weather forecasts
Physical Organization
Weekly outfit hanging system (5-7 hangers labeled with days)
Color-coding system for different types of activities
Closet dividers by category (casual, formal, sports, etc.)
"Prep station" area with accessories and completed outfits
Time Management
Evening routine checklist including outfit planning
Sunday planning session for the whole week
10-minute morning buffer for last-minute adjustments
Monthly wardrobe review and organization session
Convergent Thinking
A mobile app for digital organization and inspiration.
Wireframes.
Based on my desk and user research, I created two separate app versions. One version is a digital wardrobe to log clothing items and create outfits, because users lacked organization systems and used digital methods such as the notes app to organize their outfits. The other version is an outfit generator based on weather forecasting of the user’s location, because users mainly organize their closets by temperature and dress according to the weather.
Onboarding
Title
Organize your closet and generate outfits
Sign Up
Log In
Start organizing!
Title
Organize your closet and generate outfits
Sign up with us!
Mobile Number or Email*
Full Name*
Username*
Password*
Sign Up
Have an account already? Log in.
Title
Organize your closet and generate outfits
Welcome back!
Username*
Password*
Log In
Don’t have an account? Sign up.
Home Feed + Profile
Title
Username Outfit #1
Username
Posted 11 minutes ago
Username
Posted 1 hour ago
Outfit #1
Outfit #2
Outfit #3
Outfit #4
Title
Username
Edit Profile
Create Outfit
Title
Top
Jacket
Bottom
Hat
Shoes
Accessory
Bookmark
Post
Outfit #1
Notes
0/1000 Characters
Add to Wardrobe
Title
Add To Wardrobe
31 Total Items
All Clothes
Title
Tops
Bottoms
Shoes
Add To Wardrobe
Clothing Type
Title
Add To Wardrobe
Outfit #1
Outfit #2
Outfit #3
Outfit #4
Sort by
Title
Scan Your Clothing
Upload Image
Center your item from birds-eye view in the camera!
Title
Clothing Type
Material Type
Pattern
Color
Clothing Item #1
Save to Closet
Notes
0/1000 Characters
Generate Outfit
Title
Generate Outfit
31 Total Items
All Clothes
Title
Tops
Bottoms
Shoes
Generate Outfit
Clothing Type
Title
Outfit #1
Outfit #2
Save
Save
Berkeley
76°
Sunny
Based on the weather, here are some fit ideas:
Sunny conditions will continue all day.
Now
76°
10AM
77°
11AM
77°
12PM
78°
1PM
79°
2PM
77°
Generated Outfits
Title
Generate Outfit
Outfit #1
Outfit #2
Outfit #3
Outfit #4
Sort by
Mid-fi designs.
I decided to combine both my app ideas to pursue a student-focused wardrobe planning app that categorizes clothes by occasion, weather, and clothing type. I went down this route because my user research revealed that both app functionalities are important for users and that there are strong preferences for both apps.
Onboarding
Added name of the app.
Home Feed + Profile
Added search bar, feed with uploaded outfit, and profile metrics.
Create Outfit
Created detailed outfit creation flow, with additional screens for choosing/uploading clothing items and pop-up messages.
Profile + Settings
Added hamburger style menu button for settings, as well as additional profile page with an uploaded outfit.
Closet
Combined ‘add to wardrobe’ and ‘generate outfit’ functionalities, with additional loading screen and pop-up message,
User testing.
I conducted 2 usability tests, where users freely navigated my mid-fi prototypes. My overall goals were to evaluate navigation intuitiveness, assess closet organization effectiveness, understand motivation for regular app usage, and gauge reaction to social/community features. A few key insights that I found:
📍
Weather
An outfit generator based on weather is practical and useful.
📍
Social Media
Social media component is a good source of outfit inspiration.
📍
Design System
Ensure better consistency throughout the design system.
Closet organization.
To imitate the physical closet space, it was important that users can organize their digital wardrobe by the same categories. Some filters that users can organize their closets by are: clothing type, material, color, and pattern.
Primary CTA for users to add to their wardrobe in the ‘Closet’ section of the app
Organize closet by filtering through clothing categories
Closet organized by ‘clothing type’ which users can navigate through specific types
Users scan an image of their clothing
Edit clothing item name
Re-scan the clothing
Fill in clothing type and description
Social media.
Within our user surveys and interviews, people who create outfits most often look towards social media platforms such as Instagram, Pinterest, or TikTok for inspiration. Users also indicated that they would like to upload their outfits for other people to see. Thus, it was important to include a social media component that not only fosters a sense of community, but incentivizes users to plan their outfits methodically via inspiration from other users.
Profile metrics displayed on each profile
Another user’s profile with their feed of posted outfits
User’s feed that allows for vertical scrolling; imitates existing social media platforms for sense of familiarity
Like button that saves to the user’s profile
Outfit details that users can click into to look at specific pieces & descriptions
Search bar for users to easily search other users
‘Feed’ section which shows all outfits posted by the user
‘Likes’ section which shows a user’s personal likes on outfits posted by other users; this section is private
Weather.
Our user survey results indicated that weather was the primary factor that influenced how they choose their outfits for the day. Thus, it made sense to address this by dedicating a feature that specifically generated outfits according to the weather, using what’s given in the user’s closet.
Outfits generated based on the user’s current location, cutting out the step for them to check the weather on another app
Save button to allow for users to save outfit to their closet for easy reference
Primary CTA in the closet section of the app for users to generate an outfit based on the current weather conditions
‘Saved outfits’ section for users to have easy access
final prototype
Onboarding flow.
Users begin with the options to sign up or log in. To organize the display of inputs and highlight the app title, I put in bottom sheets that slide up. Since users are often overwhelmed when approaching their physical closet spaces, it was important to design an onboarding interface, and the overall app, to have minimal designs supported by graphic visuals and legible fonts.
Discovery flow.
Upon landing on the homepage, users get to see the outfits posted by the users they follow. Each post can be expanded to reveal outfit details, such as outfit description and specific clothing pieces, and the user’s profile who posted the outfit. In my user research, Pinterest and Instagram were the top platforms where people got their outfit inspirations from, and my usability test revealed that social media was a main avenue for finding specific clothing pieces. Thus, I prioritized emulating a social media component that directly cut out the in-between steps of searching for outfit details and directly display that information for users.
Closet organization + outfit generation flow.
Users have digital closets that display all of their clothing items they’ve uploaded. The top factors that users organize their physical closets by are: clothing type, material, pattern, and color. Thus, I gave users the options to organize their digital wardrobes by these factors and tailor their closets to their preferences. Users can also save outfits they’ve created or through their feeds for future outfit ideas or inspiration. Within their digital closet, users have the options to add a new clothing item to their wardrobe or generate an outfit. Since weather is the main factor that influences a person’s outfit decisions, I implemented a outfit generation feature that creates outfits from a user’s closet based on the weather conditions of their current location.
Outfit creation flow.
When creating an outfit, the user uploads individual clothing pieces from their digital closet or by scanning a clothing item with their camera. After creating an outfit, users can either save their outfit to their closet or post it to their feed. I implemented these features to give users the freedom and autonomy to decide what they want to do with their outfits. Dressing up is as much of an act for the self as it is a presentation for other people.
Personal profile + settings flow.
Finally, users can keep track of their profile metrics, posts, and ‘Liked’ outfits of other users. The ‘Settings’ feature can be accessed in the right hand corner where users can customize their app settings, including their current location for accurate outfit generation. Having a personal profile for this app was important, because my usability testing revealed that having a sense of community within the app makes users feel comfortable to explore styles and share outfits. Since the posts are faceless, the focus is purely on the outfits and the intentions behind it, if detailed by the user.
Try the prototype!
reflection
Design decisions are justified by user research.
I learned to approach designing interfaces with having primary goals in mind of specific UI features and UX processes. By conducting user research and user tests, I can synthesize my findings and make design decisions that directly implement designs that cater to the target user group I am creating the application for.
Utilizing common mobile design patterns + practices.
Since this was my first time designing for a mobile application, I learned to utilize common design patterns for phone screens, such as including a tab bar, grid view, and splash screen. Given the smaller space real estate, I learned to prioritize which pieces of information to display first and how to create minimal interfaces that provide the necessary functionalities for the app.