top of page

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
Problem

Employing Tech with Fashion

Effective organization and resource management are crucial in today's fast-paced world. In this case study, we will explore how I used design and research to create a technology-based prototype that aims to help individuals and organizations streamline their operations and reduce waste. Through careful planning and innovative solutions, this prototype aims to not only improve efficiency but also reduce environmental impact and save money.

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.

To gather insights about what fashion enthusiasts look for in a closet organization solution, I conducted interviews with 6 participants. After the interviews, I compiled the notes and used affinity mapping to identify common themes and prioritize the desired features. This helped me narrow down the most important features for users.

📸

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

Personas

Meet Chloe and Imogen

After using affinity mapping to analyze the data from my interviews, I moved on to empathy mapping to better understand the needs and goals of my target users. This process helped me develop two personas:

  • Chic Chole- a busy professional fashion enthusiast seeking an efficient way to catalog their closet and create looks quickly

  • Ingenue Imogen- a fashion novice looking for guidance in finding their personal style and curating outfits for their lifestyle.

Chic Chloe
Ingenue Imogen

Personas highlighting the optimal user

Competitive Analysis

Competitive Analysis

I conducted a competitive analysis of 4 top-ranked closet organization apps on the Apple App Store, focusing on features that met the needs of both Chole and Imogen. These features included the ability to add items to the closet in multiple ways, categorize items, create outfit collages, interact with others, and use a smart camera to remove backgrounds.

Comparing competitors' features

Sitemap

Mapping it Out

During the sitemap creation process, I narrowed the features down to 5 main sections:

  • Home/Social

  • Collage

  • Closet

  • Calendar

  • Stylist

These sections were designed to work seamlessly and interact with one another to provide a natural user experience.

Sitemap showcasing how the features will navigate within the app

Ideating

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. 

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

Finding items within your wardrobe by organizing your closet into categories and finding an item by their custom tags.

Untitled 2_edited.png

Giving options to users on how they want to add items into their closets, allowing them to search for items for less work

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

Untitled_edited.png

Items can be categorized by type, color, and occasion as well as creating custom tags.

UI Design

Storytelling with Visuals

Screenshot 2022-06-20 102133.png

I drew inspiration from the simple, abstract styling of indie/cult magazines such as Numero and i-D for the app's design. This gives the app a sense of stylish allure and encourages users to create collages similar to those found in these magazines. To achieve this, I focused on using neutral tones for the background and added interest with the font. The goal was to convey the stylish appeal of these magazine covers.

Pictures of indie fashion magazines courtesy of Pinterest

Designing the user interface was my favorite part of the project. I enjoyed crafting a cohesive look and feel for the app, using elements that were accessible, stylish, smart, and fitting. To do this, I looked for inspiration from other fashion-related apps and chose a neutral color palette to avoid distracting from the clothing. I also used text as a way to create interest and frame the app. Overall, my goal was to create a story with the visuals that conveyed the desired attributes.

#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

Low-Fi Design

Low-Fidelity Design

After collecting all the necessary elements, I created a low-fidelity prototype by combining the sketches, branding, and UI. As I developed the prototype, I focused on fleshing out the user flows and ensuring that users could easily access key features such as signing up, accessing their closet, and booking a stylist. To ensure that my designs were on track, I frequently referred back to my references and app inspirations, such as Instagram, for comparison.

Untitled.png

Low-Fidelity screens showcasing different features

Accessibility

Accessibility Overview

As I created my high-fidelity prototype, I received feedback from my mentor at Springboard and some of my design peers. Most of the critiques were related to improving the app's accessibility. Specifically, I was advised to:

Pic 1.png

Larger font and more spacing in buttons

I adjusted the smallest font size to 13px for better visibility and spaced out buttons to accommodate users with poor mobility.

Pic 2.png

Simplified calendar

In the Stylist's calendar section, I only show one month at a time to avoid overwhelming the user and to keep the design uncluttered, as well as, used larger text to make it easier to read.

Pic 4.png
Pic 3.png

Titles on top of the page

To improve navigation and clarity, I included a title at the top of every page to clearly indicate to users which part of the app they are in.

Pic 5.png

Less information required

To make the process of creating an account as smooth as possible, I designed the registration page to fit on one screen without requiring scrolling. This helps avoid overwhelming users.

Feedback

Feedback from Users

After making adjustments to improve the app's accessibility, I conducted the first round of usability testing with 5 users who identified with the Chloe and Imogen personas. The tests were conducted remotely and focused on evaluating the app's usability, visual aesthetic, and the functionality of the 3 main flows. These were my findings:

  • "I love the color story and use of fonts making me feel I'm using a luxury app like the clothes"

  • "I want to experience the entirety of the stylist flow"

  • "I wish there was a screen to let me know more about the app"

  • "The 'Add to Closet' button should be more prominent"

  • "I like how the app can pre-input tags for me"

  • "I want access to a back button"

Final Screens

Final Screens

After incorporating the new features suggested by users during the first round of testing, I conducted a second round of usability tests to see which ones enhanced the app and which ones still needed improvement. Here's a summary of the feedback:

  • "I enjoyed having a page dedicated to explaining each page"

  • "Wish there were more interactive features within the app"

  • "Loved the instructional pop-ups"

  • "I love that I can contact a stylist through the app remotely for better convenience"

  • "I wish I could've seen more of the social aspect of the app"

  • "Would like to have the option to edit photos and tags of the items I have in my closet"

Based on this feedback, I made further adjustments and created the final iteration of the prototype. Overall, the testing experience was positive for most users.

Final.png
Final.png

Final screens for Closet Curator

Takeaway

Final Takeaways

During this project, I learned several lessons about design:

  • Importance of using all available space to minimize clutter in the user interface,

  • Using bold elements to guide users through the flow,

  • Giving users control over their choices to foster trust in the app. 

  • Streamlining user flows can make the experience less tedious for users.

In the future, I plan to continue user testing and adding more elements to the design to fully flesh out the app. Once the design is complete, I will hand it off to engineering to bring the project to life.

Prototype

Prototype

bottom of page