My Role
Solo UX/UI Designer:
Created logo, Research, Ideation, Userflow Chart, Sitemap, Created Low Fidelity Wireframe, Created High Fidelity Wireframe, Prototyping, and Usability Testing.
Closet Haven
Project overview
I conceptualized and developed Closet Haven, an innovative app designed to alleviate the stress associated with getting dressed each day. According to a study conducted by Trunk Club, it's evident that many individuals experience "wardrobe panic," a common dilemma when choosing outfits. This daily struggle emphasizes the necessity for an organized closet and efficient outfit planning.
Project Details
Tools Used: Figma, Google Slides and Miro.
Who Are Our Users
The 61% of Americans that suffer from “wardrobe panic”.
The problem
A staggering 61% of Americans admit to regularly grappling with the frustrating dilemma of having a closet full of clothes but still struggling to find something to wear. This eye-opening revelation stems from a study conducted by Trunk Club, a renowned personal styling service, in collaboration with SWNSDIGITAL.COM .This ongoing struggle not only leads to impulsive shopping and repeatedly wearing the same outfits but also results in tardiness for work, dinner, or social events, adding unnecessary stress and anxiety to people's lives. I, too, found myself caught in this cycle, and that's why I embarked on the journey to create a solution – a closet organization app called Closet Haven!.
The Challenge
The challenge is to design an app to alleviate the 'wardrobe panic' that plagues so many of us, myself included. Closet Haven aims to empower individuals by simplifying their daily dressing routine and easing the process of getting ready for any occasion.
By using our app, users can bid farewell to wasted time, overspending, and the stress associated with choosing an outfit. Closet Haven is not just an app; it's a reliable companion that saves users time, money, and most importantly, the mental strain associated with the daily task of selecting the perfect outfit.
The Solution
Feature, after clicking on a clothing item, a drop down menu appears and users can choose its specific location, telling the user exactly where their clothes and or accessories are located. Mirroring real-world settings like the garage, dry cleaners, basement, attic, or even the left corner of their closet. This functionality ensures that users always know where their items are, eliminating the need for time-consuming closet searches. In designing the interface, we adhered to Nielsen Heuristics' principle of “match between the system and the real world.” This is evident in the intuitive layout of our categories and closet page, where each item has its designated category, and users can even create custom clothing categories. The visual representation of clothes, shoes, and accessories simplifies the browsing experience. Moreover, users can effortlessly share their fashion choices with friends and family. Planning for a trip is a breeze; users can assemble outfits from their personalized collection. The user experience is our priority. We've ensured our interface is straightforward and easy to navigate. Users can capture an item by taking a picture, assign it to a category (e.g., shirt, pants, jackets), and further categorize it by attributes such as color, size, style, season, and location. Our approach is all about simplicity and user-friendly design.
The Issues faced
A user inquired about the app's method for placing clothing items and accessories. Initially, items would automatically appear after a photo was taken. To address this, a new feature was introduced where captured images now display with a dropdown menu, allowing users to input specific item details before saving them to the category/closet page.
Additionally, I also had challenges with color selection for web accessibility standards. Initial choices didn't meet the standards, leading to two subsequent changes. To address this, the color palette was revisited to ensure compliance with web accessibility while aligning with the app's visual identity.
I wrestled with including the bottom navigation bar in the design or not. Initially included in sketches, its necessity was questioned during deliberations, especially by a user who questioned the relevance of keeping the bottom navigation bar inaccessible until sign up. After wrestling with the dilemma, the decision was made to omit it for two main reasons: firstly, in response to user feedback, and secondly, because the hamburger menu provided sufficient access to all necessary pages, making the bottom navigation redundant.
Throughout the process, I prioritized accessibility, conducting thorough checks to guarantee the app's usability for all users. I implemented A/B testing to compare the old and new designs, ensuring the new layout was superior. Before finalizing the prototype, I conducted a comprehensive usability test to validate the improvements made.
Research and Discovery: I conducted qualitative research to investigate the underlying reasons behind the phenomenon of 'wardrobe panic' experienced by the average person. To explore this, I administered a screener survey to ten participants and conducted in-depth interviews to gain comprehensive insights.
The interviews highlighted a common challenge among users:
Limited closet space leading to “wardrobe panic”.
Overcrowded closet.
Disorganised arrangements.
Unable to see all clothes.
Unable to see all the clothes.
Repetitive purchasing of the same or similiar clothing items.
Buying clothing, accessories and shoes in bulk.
Sketches
Wireflow
Mood Board
Imagery Inspiration
I chose these images to show that, when a user
thinks of Closet Haven, they think of balance and stability, like the
color green (light sea green).
Closet Haven as a brand is for everyone both young and
old. It’s all-inclusive.
The color blue stands for peace, calmness, order, safety, and trust.
The color green stands for stability, growth, nature, and balance.
White stands for spaciousness, freedom, simplicity and cleanliness. To have one’s closet organized is a happy, peaceful, reliable, calming, balance you bring to your daily routine of getting ready for the day.
Design Systems
Hi-Fidelity Design
Critical
The search page may not be placed in the right flow. It takes the user to the sign up/login page when the user clicks on the back arrow on the search page.
Recommendation
Try to put the search page somewhere else when the user clicks the back arrow, and see if that flow works or not.
User Stories
“I feel frustrated when I can’t find what to wear.”
Personas
User Flows For Red Routes
Red routes are the critical paths the user must follow in order for them to complete their tasks and for the app to be complete.
Buttons
Findings
Major
The pages seem to go by fast when clicked on.
Recommendation
Slow the pages down a bit.
PROTOTYPES OF RED ROUTES
IOS Version
“I see clothes that I like and just buy it. That’s why i do have clothes overlapping each other in my closet.”
Brand Attributes
All-inclusive, Reliable, Calm and Simple
Brand Personality
Closet Haven is dependable and
organized. It has everything a person is looking
for when it comes to organizing their closet.
UI Inspiration
The UI images are simple and they show a
purity to them because of the white background.
I was inspired by the look of order and balance, because of the
organization of the images.
The buttons and icons are similar to what I want to show
on my app.
A closet should have the feel and look of calmness, order, and balance.
Testing
For this usability test, I interviewed five participants that fit the demographic of a user of the app. I interviewed three in-person moderated tests and two remote moderated tests. I did this In order to test the usability of the app, to improve on the design and overall user experience.
Minor
Not all the buttons and icons worked.
Recommendation
It is a prototype, so all the buttons and icons do not have to work.
Android Version
Reflections
I discovered that design is an ongoing process, a continuous refinement rather than a final destination. I found myself revisiting pages, adding features, and tweaking icons, recognizing that design is perpetually evolving. My initial logo, which I initially thought was perfect, required adjustments after failing the contrast checker, I had quite a few issues with colors. This experience taught me the importance of being receptive to user feedback. Through active listening, I gained fresh insights, allowing me to see the app from new perspectives. One user's comment, comparing the app experience to virtual clothes shopping without the financial commitment, particularly resonated with me. It highlighted the immersive nature of the design, guiding my ongoing efforts to enhance user engagement. The user said and I quote “The app felt like she was shopping for clothes but without having to spend her money”!