Closet Curator

How optimizing organization disrupts the overconsumption in eCommerce

Problem
Application
Role
Duration
Tools

Finding a solution for people to create outfits and organize their closets with ease

Mobile

Lead Designer

4 months

Adobe XD, Figma, Procreate, Google Suite, Zoom 

press to zoom

press to zoom

press to zoom

press to zoom
1/15
804-8045468_iphone-x-frame-iphone-x-frame-png-hd.png

The volume of clothing Americans throw away each year has doubled in the last 20 years, from... 

7 to 14 million tons

In 2018, 17 million tons of textile waste ended up in landfills, according to data from the Environmental Protection Agency.

Employing technology in fashion

I conducted interviews with 6 fashion lovers who are looking for solutions to help them organize their closets. Afterward, I compiled the notes from the interviews and utilized affinity mapping, and was capable to narrow down the main features users wanted.

📸

Smart Camera

Would like the app to identify the items of clothes and pre-tag them

📱

Socials

Ability to connect with other social media accounts and share outfits they have made

👠

Visualizer

Generate outfits from the existing wardrobe and incorporating into schedule

👨‍💻

At Home Stylist

Contacting a stylist that can look into their closet to help them establish a sense of style

Meet Chloe and Imogen

After collecting the data from the affinity map I moved towards empathy mapping. I began to imagine who would be the ideal user for the app. Eventually, I came up with two distinct personas:

  • Chic Chole - A full-time professional and expert fashionista who is looking for a way to catalog their closet and create looks on the fly without needing to spend hours at home in their closet.

  • Ingenue Imogen - A fashion novice looking for help in finding their own personal sense of style and curating outfits to fit their new lifestyle.

Chic Chloe
Ingenue Imogen

Personas highlighting the optimal user

Comparing competitors' features

Utilizing everything in your closet

I conducted a competitive analysis with 4 of the top results for the closet organization app on the Apple App Store that allowed both users to get their needs met:

  • Multiple options to add items into the closet

  • Categorize items

  • Create an outfit collage

  • Ability to interact with others

  • Smart camera removing background

Narrowing it down

While creating a sitemap, I narrowed the features to 5 major sections:

  • Home/Social

  • Collage

  • Closet

  • Calendar

  • Stylist

 

Each of the functions has capabilities to interact with one another and have a natural flow with one another.

Sitemap showcasing how the features will navigate within the app

Ideating

Once I finalized the workflows for the 3 main features, I created rough sketches of how I wanted the app to be laid out and made a rough sketch prototype using both Procreate and Figma. 

Gaining inspiration through socials

Users can interact and gain inspiration from other users within the feed, and even share their own creations with others.

Everything in its place

Finding items within your wardrobe is intuitive by giving basic categories and finding an item within their custom tags.

Untitled 2_edited.png

More than one option

Giving options to users on how they want to add items into their closets, even cutting down the work by giving them a selection to look within the app.

Search through the closet

Users don't have to wade through the app looking for specific items by giving a search feature.

Untitled_edited.png

Customize your items

Items can be categorized to your specificity and even what can be considered a favorite.

Screenshot 2022-06-20 102133.png

Creating a brand from the inspiration

I wanted to convey the simple and abstract styling done on indie/cult magazines like Numero and i-D. This gives the sense of stylish allure that these magazine covers convey as well as encourages the user to create similar collages as done in these magazines. Take note of the neutral tones of the background but create interest with the font.

Pictures of indie fashion magazines courtesy of Pinterest

Using visuals to create a story

Creating the UI was my favorite part of this whole process. I enjoyed creating a story with the visuals and making a cohesive look. Each of the elements was chosen by the attributes of accessible, stylish, smart, & fitting. I looked for inspiration from other fashion-related apps. The color palette is meant to be neutral to not distract from the clothing and the text was a way to create interest and frame the app.

#272635

Raisin Black

#F5F5F5

Cultured

#475B63

Deep Space Sparkle

#CECECE

Light Grey

#6F6F6F

Dim Grey

Untitled_edited.jpg

Color palette and typography that will be used in the app

Untitled.png

Intuitive design makes for an enjoyable experience

After gathering all the elements together I combined the sketches with the branding and UI and created the low-fidelity prototype. I fleshed out user flows while ensuring that the user could access the main flows such as signing up, the closet and booking a stylist. I often would go back to my references and app inspirations like Instagram to compare alongside my designs.

Low-Fidelity screens showcasing different features

Ensuring accessibility for all users

When I was creating my high-fidelity prototype I had my mentor at Springboard and some of my peers in design overlook my work. Most of the critiques were to adjust my app for more accessibility:

Pic 1.png

Larger font and more spacing in buttons

I adjusted the smallest font to be 13 px, for better visibility. Buttons are also more spaced out for people with poor mobility.

Pic 4.png
Pic 3.png

Titles on top of the page

Every page has a title at the top so users would know exactly what part of the app they were on.

Pic 2.png

Simplified calendar

The calendar section for the Stylist allows for only one month to show at a time to not overwhelm the user and to make the design less busy and the text larger.

Pic 5.png

Less information required

The Registration page was all on the screen at once without scrolling to not overwhelm the user when creating an account.

Taking notes from Chloe and Imogen

Once I completed the adjustments for accessibility, I conducted the first round of testing with 5 different users who identified with Chloe and Imogen. These usability tests were conducted remotely, and the tests analyzed the app's usability, visual aesthetic, and the functionality of the 3 main flows. These are my findings:

Visual Design:

  • Enjoyed the color story and use of fonts

  • Would like a finished Stylist Flow

  • Want a welcome screen after creating an account

  • Make sure that anything that is actionable or can be tapped is properly color-coded

  • Fix the spelling errors

  • Needs to make the "Add to Closet" button more prominent.

Features:

  • I liked that there is access to a stylist that they can book from the app

  • Enjoyed seeing how the camera was able to take out the background and pre-identify the item

  • Needs more details on how the Stylist section works and what the user needs to do in order to book a session

  • Create a popup explaining what each icon represents 

  • I want access to a back button

Making styling and organization fun and accessible

After updating the final features that users suggested during my first round of user testing, I conducted another set of testing with the new features to see which new features either elevated the app or still required more work. This is what users said:

  • Enjoyed seeing a page dedicated to explaining the icons

  • Wanted more interactive features.

  • Loved the instructional pop-ups

  • Enjoyed seeing a page to book a stylist

  • Would like to see an example of the user's profile

  • Want an option to edit photos after adding to the closet

 

Overall it was a positive experience for most users! I took the critiques users wanted to see enhanced and edited what need to be adjusted and created the final iteration of the prototype.

Final.png
Final.png

Final screens for Closet Curator

Takeaways from the experience

After completing the process this is what I learned from the experience:

  • When designing utilize all the space that is given to account for less clutter in the UI

  • Creating bold elements to help navigate users to their next action in the flow

  • People want to feel control over what they wear

  • When you give users a choice it makes them have trust in the app and not feel pressured

  • Streamlining user flows makes it less tedious for users and finish

For the following steps, I would continue user testing and adding more elements to flesh out the app's design until I reached completion. Afterward, I would hand off the project to engineering to make the project come to life!

Test out the live Closet Curator prototype below