Fitfolio: Your Digital Wardrobe
Context
The average American discards nearly 82 pounds of clothing every year--horrifying, isn't it? Consequently, only 1% of recycled clothing is actually made into new garments. This insight motivated me to come up with an innovative solution to help users utilize more of their clothing.
Time frame: 14 weeks
Role: UX Designer
Type: Solo academic project for SI 582: Introduction to Interaction Design
Overview
The Solution
In order to address this problem, I designed a mobile app that helps users minimize outfit-related stress and maximize utilization of their clothing.
THE PRODUCT
Home page
Home page showcases users' weekly planned outfits and recently added items.
Outfit creation
Users select items from their wardrobe to create outfits.
Outfit Archive
Outfits created are saved.
Digital wardrobe
Wardrobe page displays items the user has added.
Discovery
Let me set the scene:
How many times can you recall standing in front of your closet, struggling to piece together the perfect outfit or feeling as though you have nothing to wear? You gloss through maybes and not todays. The irony is, you've got a ton of clothes but nothing to wear. Does this sound like you? I totally understand, same here. 😔
Please tell me I'm not alone:
I went out and interviewed 2 individuals, both in their 20s. One is a graduate student and the other is a recent college graduate working in the medical field. I wanted to explore my earlier hypothesis and understand what pain points they encounter when creating an outfit. My interviews disclosed an unlikely duality: although users enjoy experimenting with different outfits, the process itself is accompanied by feelings of uncertainty.
Research
After conducting the interviews, this is what I discovered.
Users struggle with styling uncertainty
The hardest part for me is taking different aspects of my clothing and meshing them together cause I feel like I have a lot of different pieces of clothing but I don’t think that I know how to style it properly."
The hardest thing is seeing if an outfit looks good together. An outfit requires a lot of elements, and it takes time to create something that looks cohesive and aesthetically pleasing."
Users enjoy experimenting with outfits
The process of putting together an outfit is fun because I think it’s nice to just really go through everything you have on the occasion. And sometimes you can just discover something you hadn’t touched in a long time and you didn’t even know you still had [...] that can also be a new way to discover new combinations cause you’re like, ‘oh wait I have this and I got these pants recently so maybe that can go together'."
It’s really nice to get creative and try a new look or a new style that you never thought you could embrace but you try it and it looks really good."
Clothing choice depends on occasion, weather, and comfort
I don’t like to be cold so I tend to guess that it will probably be colder where I’m going so sometimes I just wear something long sleeve but if not I always bring a sweater because [...] I just want to be comfortable."
I just tried on a couple of things [...] I vibed with. I checked the weather because I wanted to see if it was going to be too cold or too hot."
How can I help individuals who struggle with outfit selection feel more confident while experimenting with different fashion combinations?
Ideation
Based on the research, here are some goals I am helping users achieve.
Design Goals
1. Address outfit selection uncertainty by including a feature to schedule outfits in advance, supporting effective planning and reducing uncertainty
2. Incorporating real-time weather data within the app to address the influence of weather on outfit selection.
3. Incorporating a visual wardrobe makes it easier for users to see and plan outfit combinations, promoting experimentation and boosting confidence.
User Flow
I started with thinking about the user flow. This helps me visualize the steps they would take to accomplish the tasks. Later on, this would help me with constructing the site map. (click here for a larger image)
Site Map
After mapping out the user flow, I created the site map. Creating the site map gives me an idea of the project scope. (click here for a large image).
Testing
& Iterations
Before creating the high fidelity prototype, I conducted a heuristic evaluation and 4 usability tests on my low fidelity prototype. Here is what I uncovered.
In the initial design, users do not have the option to remove/delete an item from the outfit. This violates the heuristic of error prevention. I added an “X” button on the upper right corner of the item so users can delete it from the outfit.
Items were missing labels. This violates the heuristic of recognition rather than recall. I added item labels (i.e., item name and brand) to help users easily identify the clothing items.
There was no confirmation message that lets users know their action is successful after they add a new item, create a new outfit, or schedule an outfit. This violates the heuristic of visibility of system status. I added a confirmation message to let users know that their action is successful.
3 users wanted a more seamless form experience, particularly noting difficulty with the small season buttons. In response, I removed the buttons and adopted a mobile-friendly single column layout. This redesign adheres to Fitts's Law, mitigating frustration associated with complex multi-column mobile designs for an improved user experience.
2 users wanted an easier option to switch between different clothing categories. Prior to the redesign, users would have to select the back button and choose the clothing category they wanted. The redesign incorporates a horizontal navigation bar, providing effortless category changes and reducing cognitive load by eliminating the need of a back button.
I had questions regarding the temperature unit and if users were able to switch between fahrenheit and celsius. This did not occur to me while I was designing. In order to enhance user control and personalization, I added a page for users to select their preferred temperature unit.
Cultivate your digital wardrobe:
Easily upload a photo of any clothing item, add its details, and incorporate it into your digital wardrobe.
Create outfits:
Create outfits using items from your digital wardrobe.
Schedule outfits:
Select a date and an outfit. Users can browse through their outfit archive or create a new outfit.
Reflection
I am satisfied with how Fitfolio turned out. Since this is my second UX design project, I felt more confident using Figma and managing UX deliverables. Some new topics I learned from taking this course is the importance of consistent iconography and incorporating animated micro-interactions (such as an animated hamburger icon) in the design.
A change I would like to implement for my future design projects is to conduct more user research. Due to time constraints, I could only conduct 2 interviews. This is not nearly enough. I would like to allocate more time towards user research and try different research methods in the future.
