COSMO Mobile App Design
Reimagine human interaction with fashion and lifestyles
Overview
This capstone project was completed during my study at BrainStation UX Design BootCamp. The Cosmo App aims to help individuals keep track of their wardrobe items and generate customized styling suggestions.
Context
BrainStation Capstone Project
Team
This is an individual project
Role
UX Design, Interface Design, User Research, User Testing, Prototyping
Duration
10 weeks, JULY - SEP 2023
Initial Idea
It all begins with my sales experience at a retail clothing brand. During my shifts, I resolved numerous warranty complaints about garment damages. I asked myself: “How can I deliver aftercare communications so that customers can maximize garment use?”
Problem Space
The problem space I want to explore is textile waste problems within the fashion industry. Based on my secondary research, poor laundry practices lead to negative environmental impacts. A lack of aftercare communication between the fashion industry and the aftercare industry is one of the contributing factors. About 30% of a garment’s total carbon footprint is generated by clothing care involving the washing and drying process.
-
The garment production industry has insufficient communication with the aftercare industry which leads to consumers preferring their own expertise over the recommended instructions.
-
Study shows that millennials in general have less expertise in basic sewing, hemming, button repair, and general laundry knowledge compared to boomers. Carelessness is also a potential contributor to 14.3 million tons of textile waste in America every year.
-
“Clothing sales doubled from 100 to 200 billion units a year, while the average number of times an item was worn decreased by 36% overall.” (Earth.org)
How might we…
“support young adults to adopt sustainable clothing care practices so that their garments last longer, creating a positive environmental impact.”
2. Assumptions
Young adults don’t have consistent laundry practices due to their busy schedules.
1
Young adults care about sustainability and environmental impact.
2
Young adults don’t understand product care procedures or the general meaning of care labels.
3
Hypothesis: Young adults have limited access to sustainable garment-care knowledge and have trouble adjusting to a correct method.
Testing: I will know I’m right when I see the average lifespan of one’s wardrobe items increased from 2 years to over 4 years.
3. Primary Researches
In order to investigate young adults’ garment care practices, I found three working adults aged between 20 and 30. They all have different familiarities with housekeeping and laundry basics.
Interview Findings:
Care instructions are neglected
Some people rely on their own judgements (e.g. guess the material) when it comes to garment care
Procrastination and complaints about laundry tasks because they are “repetitive” and “boring”.
According to interview results, young adults occasionally damage their garments, but they easily resolve the issue by buying other clothes.
The Conflict
The user pain point about garment damage isn’t significant enough for people to demand digital solutions.
Pivoting point
To help people maximize garment use, let’s go back to the user story at the beginning of the garment journey: when they buy new outfits.
4. Empathize and Pivot
User Story: Stephanie’s Journey
1
Stephanie purchased a new blouse today.
2
After she got home, Stephanie examined the new item and checked her receipts.
3
She found some styling inspirations and share the pictures with her friends.
4
She had no problem with the item so she cut the tag off.
5
Stephanie placed the new item in her closet.
Guerrilla Interview Findings
Users with strong management and organization habits express clear ideas about their fashion choices whereas those with overconsumption issues are more prone to following trends that don’t fit their lifestyles.
Many people express symptoms related to body dysmorphia which leads to a lack of interest in wardrobe management. Potential reasons include social media influences, financial well-being and self-confidence.
Interviewee A
“Sometimes I look at my wardrobe and feel like there’s literally nothing to wear.”
Interviewee B
“There’re piles of old clothes I rarely wore underneath my wardrobe, my approach? basically out of sight, out of mind.”
How might we…
“communicate garment information in a clear and concise format so that users can style and wear their garments more often?”
5. Solutions
1). Persona Creation
Meet Stephanie, the trend collector who has trouble organizing her garments and making good purchase decisions. There are many young adults like Stephanie who are prone to various advertisements and feel unsure about how to manage a closet that reflects their lifestyles.
2). Task Flow Design
According to my task flow diagram, there are four main pages: my closet page, bar code adding page, add successful page and community page. I started by researching UI elements and divided them into different functions. Then I transfer my research into solution sketches. The below section outlines each of the steps.
Design Decisions
-
![]()
1. User Epics
From my two rounds of interviews with five young working adults, I listed 30 user stories and grouped them into four epics.
-
![]()
2. Task Flow Diagram
I use Figjam to create a task flow diagram that helps user load a new item into their virtual closet and be presented with more product information.
-
![]()
3. UI Inspiration
I gathered UI elements from e-commerce applications and utilized those with minimalistic interface elements.
-
![]()
4. Sketches
My solution sketches explore different possibilities to present garment thumbnails in a clear and concise way.
7. Brand Design
The idea of the brand is to help people manage their garment inventory and review product knowledge before/after a typical shopping experience. Hence, they can make better decisions and prolong their garment life cycles.
We use Zen Dots for display text and Rubik for headlines, body paragraphs and caption
For headlines, SemiBold / Medium / Regular weights are applied to emphasize text importance.
The body paragraphs use medium and regular weights interchangeably.
The initial inspiration for the brand color is based on Buzz Lightyear, a character from Toy Stories. In order to make the color palette more harmonious, we use a soft beige to neutralize the strong green and purple blend.
UI Library
8. Final Prototype
Virtual Closet - home page
1
The Cosmo app keeps track of your fashion inventory and provides basic product and care information. Users can add garments or track purchase history via the top functional bar. The clothes category view and picture previews allow them to access their wardrobe information anytime.
Product Finder - scanner page
2
Users can add new products to their virtual closets via a barcode scanner. When a matching result is found, they will be able to confirm all the essential information and organize products by brands.
Product Knowledge - add page
3
Ever wonder how to wash your outfits? Cosmo presents all the essential product info you need when adding a new product.
4
Fashion Community - discover page
Feel free to discover styling suggestions based on the garments you own and share your outfits within Cosmo. Users can view recommendations that best fit their closets.