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
Employing Tech with Fashion
In this case study, we will explore how I used design and research to create a technology-based prototype that aims to help individuals streamline their closets 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.
To understand what fashion enthusiasts want in a closet organization solution, I interviewed 6 fashion lovers and used affinity mapping to identify common themes and prioritize desired features. This helped me determine 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
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.
Personas highlighting the optimal user
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
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
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.
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.
Items can be categorized by type, color, and occasion as well as creating custom tags.
Storytelling with Visuals
To create a visually appealing design for the app, I took inspiration from the simple and abstract styling of indie/cult magazines like Numero and i-D. The goal was to convey the trendy appeal of these magazine covers through the design of the app.
Pictures of indie fashion magazines courtesy of Pinterest
I found the user interface design to be the most enjoyable part of the project, as it allowed for the creation of a cohesive and visually appealing look and feel for the app. Inspiration was drawn from other fashion-related apps and a neutral color palette was chosen to avoid distracting from the clothing. I used text to create interest and frame the app, with the goal of creating a story with the visuals that conveyed the desired attributes.
#475B63
Deep Space Sparkle
#272635
Raisin Black
#F5F5F5
Cultured
#CECECE
Light Grey
#6F6F6F
Dim Grey
Color palette and typography that will be used in the app
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.
Low-Fidelity screens showcasing different features
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.
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.
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.
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.
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 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"
"I wish there was an onboarding section or a pop up that informs me about the features of the app"
"I want access to a back button"
"The 'Add to Closet' button should be more prominent"
"I like how the app can identify the item and generate tags for me"
"I want to experience the entirety of the stylist flow"
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 screens for Closet Curator
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.