Conscious Closet

An app to help people curb their overconsumption of clothing, by encouraging them to use clothes they already have.

Timeline: 4 months

Role: Design Lead, User Research, UX Design

Collaborators: Lottie Brown (Iconography and Plugin)

Initial Conception

We knew we wanted to help stop people from buying clothes they don’t need.

Overconsumption of clothing is becoming an increasing problem, especially among younger people. It leads to environmental waste, financial strain, and excessive resource use.

The Challenge

While many people want to spend less money on clothes, that is easier said than done. We want to empower our users to make do with what they have while staying fresh and new.

The Goal

To create an app that allows our users to see the clothes they own at a glance, generate completely new outfits based on their style preferences, and save their favorite looks for later.

Smartphone app interface for outfit generation displaying four screens: closet with various clothing icons, outfit details for a person named Kat, and saved outfits with clothing icons.

Research

Why do our users spend money on clothes they don’t strictly need?

To answer this question, we created a detailed survey. The responses provided insights into our users' needs, the reasons behind their buying habits, and what we could do to help.

View Survey Responses

Takeaways

  1. Emotional reasons, such as "retail therapy”

  2. Wanting to stay on top of trends

How might we?

Our how might we questions allowed us to better pinpoint our users’ needs, which helped us to better design the interaction.

  • Equip people with the ability to resist buying into the trends they see

  • Encourage the development of our users’ own style

  • Help our users use the clothes they already own

  • Decrease the amount of waste created by fast fashion

User Archetypes

After receiving feedback via the survey as well as creating our how-might-we statements, we were able to start putting together user archetypes. We came up with the two that you see here.

The Stress Shopper

Behavior:

  • Purchases clothing impulsively during stressful periods.

  • Accumulates a large number of unworn items in their closet.

  • Experiences regret or guilt after shopping but finds it difficult to break the cycle.

Needs:

  • Seeking healthy alternatives to manage stress and emotional triggers.

  • Tools or resources to help monitor and limit spending on non-essential items.

  • Solutions to better utilize existing clothing to feel satisfied with current wardrobe options.

Man walking with swagger.

The Conscious Buyer

Behavior:

  • Prioritizes using and restyling existing clothing to minimize waste.

  • Shops at thrift stores or sustainable brands when new items are needed.

  • Actively seeks inspiration and methods to revitalize and reinvent their current wardrobe.

Core Needs:

  • Resources and tips for maintaining a sustainable wardrobe and reducing fashion waste.

  • Ideas and tools for creating new outfits from existing clothes to keep their wardrobe feeling fresh.

Woman taking a fun selfie.

Execution

Low-Fidelity Mockups

We transitioned from research to low-fidelity design, opting for an app format for its frequent usage. Our focus was on immediate outfit creation without the need for bookmarking or loading times, prioritizing convenience and speed.

Mobile app screen showing a question about brands customers buy from, with options for Zara, H&M, Urban Outfitters, Forever 21, and Target, and a style taste slider at the top.
Mobile app screen with a placeholder image, a logo, and a blue button labeled 'Digital Closet'
Mobile app interface titled 'Tracy's Closet' with a blue 'Generate Outfit' button and clothing category options labeled 'Cold,' 'Fancy,' 'Warm,' 'Casual,' 'All,' and 'Tops.'

Takeaways

  1. The card style of the onboarding quiz proved unnecessarily confusing.

  2. Eliminating the separate home screen and guiding the user directly into the closet proved more effective.

  3. To enhance navigation within the closet, creating icons is necessary; during testing, users found it tedious to photograph each piece of clothing.

UI & Visual Design

For the transition to high-fidelity, we focused on a cohesive visual design with a color palette of creams, pinks, and pastel reds. We selected the sans-serif Manrope for its readability on smaller screens, while incorporating playful icons, buttons, and illustrations with soft, rounded edges.

Text on a white background: 'Bold. Here is the outfit we generated for you.'
Close-up of text on a white background instructing to use filters and tags to add a piece manually.
Text on a screen about choosing a style, starting with 'Medium,' and asking to tell a little about your style.
The word 'Manrope' written in black text on a white background.
Fashion app interface showing options to generate today's outfit by selecting clothing items such as t-shirt, tank top, crop top, long sleeve, vest, blouse, bodysuit, button-up shirt, and corset; filter buttons for clothing categories; and a navigation bar with icons for home, favorites, and profile.
The image features the words 'Quiz Graphics' with two illustrations of people.
Three vertical colored stripes in red, light pink, and grey.
A drawing of a closet button interface with a boot icon. Two boot icons are shown, one with a plus sign for adding and one with an arrow for deleting.

High-Fidelity Testing

The interactive design of the application mimics the experience of looking into your closet to pick out an outfit. Instead of a physical closet, all your clothes are displayed digitally, allowing you to select a brand-new outfit every day.

Onboarding

This is the onboarding quiz, which helps the app understand the user's style to provide personalized outfit recommendations. Users can update their preferences at any time in the profile tab.

Outfit Generation

This feature allows users to generate outfits from their digital closet. The app assembles and presents potential outfits, and users can either lock a specific piece to regenerate new options or save the current outfit for future use.

Adding a piece: Automatic

This feature allows users to add items to their closet by scanning the clothing tag, which automatically adds descriptors. Users can then verify the information and add the item to their closet.

Adding a piece: Manual

Users can manually add items to their closet by selecting the type, style, size, and color. These details are stored, allowing users to search for specific tags later.

Saved & Profile Tab

The "Saved" and "Profile" tabs allow users to view, edit, and add to their saved outfits, ensuring they don't forget favorites. The profile tab also displays various stats and allows users to edit their taste preferences.

Reflection

Final Takeaways

Conscious Closet effectively addresses the issue of clothing overconsumption by helping users utilize their existing wardrobes. The app’s intuitive design simplifies outfit creation and encourages sustainable fashion practices, making it easier for users to enjoy new outfits without the need to constantly buy new clothes.

Future Improvements

  1. Enhance clothing representation for better outfit visualization.

  2. Improve the flow for manually adding pieces.

  3. Expand the functionality with a plug-in to help when online shopping.