Wardrobe: Dress Confidently and Comfortably for any Occasion

A smartphone displaying a weather app with the temperature at 74 degrees, cloudy, wind at 10 km/h, humidity at 54%, and a forecast for the next few days, along with a section showing clothing items for a night out.

Introduction & Problem Statement

Two women shopping for clothes in a boutique, browsing racks of various garments.

Introductory Statement: Wardrobe is the outfit planning app meant to help develop the confidence and comfort of your closet. Log clothes that you own, get new suggestions that fit your taste and aesthetic, and plan your next outing without the hassle of stressing to find the right outfit.

Problem Statement: People may have trouble picking out what outfits to wear for the day or a special event. This can be especially troublesome for people who shop actively. People can even go to the extent of refusing to go out because of the emotions they feel when organizing an outfit. Imagine an app or tool that helps you choose your outfits on occasion, primes suggestions for how you’re feeling that day, or helps you shop for clothes you feel comfortable and confident wearing.

Scope & Constraints

Time Constraints: 6 Months (January 2022 - June 2022) to ideate, conceptualize, develop, and launch an app.

Scope: Develop a solution to address peoples’ anxiety choosing what to wear for events.

Tools I used: Figma, Google Forms, Miro,

Flowchart illustrating steps of a process from Research and Define to Launch, including Design, Validate, Prototype, Build, and QA test.

My Design Process

Users and Audience

Initially, a screener survey was made and sent out that collected information on people’s behaviors regarding their shopping and picking out clothes habits.

Out of 47 responses, I found that:
- More than half the responses prefer online retail as their preferred way of shopping for clothes.
- 45.4% of these users typically spend a few times a year updating their wardrobe
- 48.9% of users take less than 15 minutes to decide what to wear.
  - These users also indicated that they experience feelings of anxiety or worry in this amount of time.

Research Introduction

Photo showing two piles of clothes. The left pile is a messy collection of clothes on a wooden dresser and floor, with some items spilling over. The right pile is neatly piled clothes on a white background, with a hand holding a hanger and clothes hanging from it.

Picking what to wear can get difficult for people especially when people have too many choices. Whether you’re younger or older, picking the right outfit for an occasion may cause anxiety. This phenomenon can be due to the fact that we live with the expectations of meeting deadlines, simply fitting in with others, or a combination of both or more reasons. In this study, I will attempt to address this issue by connecting the idea that time spent thinking about choosing what to wear is caused by anxiety and the discouragement of going out.

A wall with a large white board filled with yellow sticky notes and printed papers, used for organizing ideas and discussions about problems and solutions, with some notes containing handwritten text.

My preliminary questions started with me wondering if anyone else felt anxiety choosing clothes for events. I took to employing several research methods to better understand the subject matter:

Secondary Research
Participant User Interviews
Card Sorting & Affinity Diagramming
Developing User Personas
Jobs-to-be-done Framing
How-might-we Statements

Secondary Research

A woman with long brown hair standing in front of a closet of colorful clothes, holding her hair with both hands.

The studies reviewed focused on understanding the motivations, behaviors, and attitudes of people who feel anxious about choosing what to wear for their plans.

A literature review revealed:

One in four admitted that they’ve skipped out going to an outing because they couldn’t find the right outfit.
Three in ten of the people surveyed are guilty of not liking any of their clothing options currently in their closets
“we gravitate towards things that make us feel secure and safe…” which is a correlation claim that connects our identity and perception to how we feel.

User Interviews

A man and a woman having a conversation in a modern office or therapy setting, seated in armchairs facing each other.

5 participant users were recruited to conduct a set of interview discussions to further explore their motivations, pain points, and overall thought process on dressing up, shopping, and managing their wardrobe.

Card Sorting & Affinity Diagramming

Their recorded responses were codified, mapped, and categorized into a diagram that will help organize their ideas into ideas to build off of.

User Personas

Jobs-to-be-done

I further outlined our user data into a jobs-to-be-done format to help focus on the criteria that I needed in order to develop my solution to address issues users had with choosing and shopping for outfits.

Youths with active social lives
Disabled
Retired Elderly
Pick clothes to wear for an outfit
Shop for clothing
Making the clothes last
Reducing the amount of time taken to choose clothing for an event or outing
Matching a theme or setting
Being able to express self with clothes that embody my values
Update wardrobe and change style of clothing
Attending an event with a theme
Birthday parties
Weddings
Attending a setting with a dress code
Work
School
Restaurants

How Might We (HMW) Statements

HMW #1

How might we relieve stress and anxiety that people feel when picking an outfit for an occasion?
People feel stressed and anxious about matching an outfit to an occasion.

HMW #2

How might we address people’s need to shop for comfortable, durable, longer-lasting clothing?
People feel the need to shop for comfortable, durable, longer-lasting clothing.

HMW #3

How might we help people shop for clothes that fit their sizes?
People feel the need to buy clothing adjusted to their fitting size.

Creating Solutions for Wardrobe

Using our How-might-we statements, these solutions were created to address the tension and anxiety people felt about choosing what to wear for planned occasions.

Idea 1:

Generate minimum 3 suggestions for outfit combinations based off of event categories and existing clean clothing in inventory in the form of visual cards.

Gives users options and answers if they don’t have immediate choices for their clothing
Suggestions based off of category
Leads users to generate an idea to at least start off with in picking articles of clothing for an outfit

Idea 2:

Make suggestion AI generated outfits based off of tagged categories or events logged by user.

Planning tool that helps user generate progress towards an idea to wear towards an event
Makes their decisions as users pertinent towards answering an issue or the need for an outfit

Idea 3:

When shopping for clothes in the future, there should be a tab or section of this app where search results will generate product visual cards that curate products from different online stores that are similar to the clothes you have in your inventory that you can purchase or look towards purchasing.

Boosts user confidence by reinforcing the style of clothing that they wear
Promotes online retail shopping and business to smaller online stores

Creating the Sitemap

Flowchart of a fashion app with categories: Home, Account Settings, Wardrobe, Pick an Outfit, and Explore, listing subcategories like Tops, Bottoms, Shoes, Accessories, Categories, Plan, Occasion, Theme, Dress Code, New Inspirations, Stores, Clothes, Style, and Saved.

The Home page will feature their suggested outfits for the day following what setting they have adjusted for their outfits.
The navigation bar will lead users to the 3 main sections of this app:
- Wardrobe
- Plan
- Explore
Account settings and the home page will also feature a swipe pull menu that users may access or press on the home page.

Sketching and Preliminary Wireframing

Guerrilla Usability Testing

Flowchart illustrating a mobile app interface for managing wardrobe items. It shows the process of adding clothing articles, including selecting category, entering details like maker, fit, material, and size, and submitting the form. Visual elements include screens, buttons, dropdowns, and dialog boxes labeled with actions and options.

After completing my low-fidelity wireframes, 5 participant users were recruited for guerilla usability testing to examine the functionality of Wardrobe.

Screenshots of a mobile app interface displaying sections titled Wardrobe, Clothing Stats, About You, Wardrobe Stats, and Most Used Color, showing data on clothing categories, personal info, and wardrobe statistics.

After analyzing my data and making changes to my existing wireframe kit, adopting a new solution of including an area where users could understand their shopping and clothing habits to give Wardrobe’s users a better understanding of their own behaviors.

In doing so, Wardrobe would bring confidence to users while shopping for and wearing new clothes that they would feel comfortable in.

Creating a Design System for Wardrobe

Brand Personality Moodboard

Wardrobe’s personality is about dressing for an event that incorporates someone’s style to make sure that they feel comfortable and be their best self.
My rationale for choosing these images is that I wanted to retain the modern, but clean and fresh feeling.
I wanted the images to convey a sense of comfort so when they use this app, they can trust that what outfit they choose expresses themselves fully.
UI Inspiration Moodboard

The interface inspiration for this app should feel memorable and clean. Users, while dealing with items that express themselves, are still products.
I chose this imagery because they represent clean interfaces for product centered apps.
The interface for Wardrobe should remain visually simple and clean to give photos of the clothing a nice space so users are able fully grasp how these clothes would look on them.

Color Palette & Accessibility

Three color swatches labeled with hex codes: D9BABA, D9948, and 260401, representing dominant, primary, and secondary colors.

This contrast chart shows what color combinations pass WCAG 2.0 standards for readability.

For these comparisons are why I chose:

Silver Pink - Dominant
Middle Red - Primary
Dark Sienna - Secondary

A color contrast table displaying various background and text color combinations with their hex codes, accessibility pass/fail scores, and pass levels, used for WCAG 2.0 contrast testing.

I chose the dominant color of a silver pink as my dominant color as it’s softer to look at and easy color to apply as our background.

The primary color is a middle red as I wanted the personality of Wardrobe to maintain a sense of comfort.
I chose a Dark Sienna as Wardrobe’s Secondary Color to express boldness

Creating High-Fidelity Mockups for Wardrobe

After settling on colors, imagery, typography, and UI design looks, Wardrobe’s high-fidelity mockup was ready.

At this stage of the design process, the functionality and behavior of Wardrobe needed to be tested and validated through more usability testing.

Prototyping & More Usability Testing

Smartphone screen displaying a wardrobe app with weather forecast, upcoming weather, recent outfit, and outfit items such as top, bottom, and shoes.

After finishing the high-fidelity prototype, 5 more participants were recruited and their feedback was collected for a final round of iteration.

Link to the prototype here!

Re-testing and checking for Accessibility

After recording responses from the participants, these design changes were made to better reflect the behavior and personality of Wardrobe:

Swap the “Recent Outfits” section of the Home Page with the weather section. The weather section takes quite a bit of space and is visually awkward without a banner.
The color palette needs to be more neutral, but to people with colorblind it’s a nice and soft color.
Incorporating different visual grid and list views for the user is helpful for the Wardrobe/Your Closet tab
Improvements to the language of the Explore headers could identify and further improve the difference between each tab

Screenshot of a clothing wardrobe app displaying various shirts, including a blue T-shirt, a gray T-shirt, a red flannel shirt, a purple button-up shirt, a color block T-shirt, and a patterned shirt, with navigation icons at the bottom.

Reflection

Working on Wardrobe and conducting further usability testing has shown importance to improvements in the development process can always be made. What I’ve learned from doing this project is that usability testing can be incorporated at every stage of development especially when designing for accessibility guidelines. Being able to test and incorporate feedback from users is always at the front of a good design and experience.

I’ll be taking what I learned from doing this project and applying it in my future works in UX. While Wardrobe might not be built in the near future, I do think that the reducing anxiety people feel by having to choose what to wear for events and planned occasions is addressed by people understanding more about their personality, style choices, and shopping habits.

Roles & Responsibilities

I worked on this project as part of Springboard’s Capstone 1 project in their curriculum.

I performed the roles of UX Researcher and Designer under the supervision of mentors John Maier, Senior Director of Product Experience of Optum Healthcare and Matthew Weprin, Senior Manager of UX Design at Workday.