TIMELINE: 3 Months, Winter 2019
Product Design, UX/UI Design
TOOLS USED: Figma, Photoshop, Illustrator
BACKGROUND
is rampant among consumers. Reasons behind shopper's remorse are: fear that choosing an alternative might have worked out better, a change in how important or useful an item seems, a feeling they didn't put enough thought into their purchase decision, and a suspicion they spent too much time or effort buying somthing that later doesn't seem worth the time or effort. The average adult aged 25-34 spends $161 per month on clothing. Adults aged 35-44 spend $209 per month. It’s estimated that only 20% of the things we own are actually used.
This leads to over-filled closets, with clothes that haven't been worn in over a year. Yikes!
PROBLEM
The need for an all-in-one fashion app is real.
OPPORTUNITY
It was created as a way for users to keep inventory of the items in their closet, gain insights about their shopping habits, plan outfits in advance, and discover their unique style. CLST believes that the more aware you are of how many clothes you have, the smarter the buyer you become.
CLST needs to be captivating and intuitive enough to be used in a user's daily life, where checking it becomes a part of their morning routine. The experience of adding clothes to one's inventory must be effortless so that a user's closet in CLST is accurate to their real like closet. A user should be able to view the contents of their closet easily to decrease the amount of time it takes to plan an outfit or get ready and see their overspending habits and attempt to fix them. As a bonus, they should be able to observe their individual style and make more practical spending decisions in the future!
IDENTIFYING THE TARGET AUDIENCE
Everyone is a victim of over-shopping and stockpiling clothes in their closet. And studies have shown that women and men have fairly the same percentages when it comes to buying apparel. Thus, I turned to age when figuring out what the target user base should be and it turns out that Millenials and Gen-Zers are at the top when it comes to apparel purchases. For example, Millenials make twice as many fashion purchases than Boomers and social media platforms that advertise apparel make it easy to appeal to younger generations.
Business Insider states that about Gen Z'ers: "Since they frequently document their life on social media, they feel a pressure to always have new clothes." They also add: "They want to flip their wardrobe, but they want to do that without doing damage to the environment."
ASKING QUESTIONS
I asked some peers about what people struggle with the most in their closets. Some of the questions asked were:
Some insights (from a demographic that were mainly college students and women) were:
I created some profiles to reflect the responses above:
CONTENT ARCHITECTURE
Based on the feedback I received, users problems can be summed in into two points:
After analyzing user's pain points, I created a content architecture chart to organize what features to implement that solved the issues mentioned above. Compared to other clothing apps on the market, I strived to limit the features in order to not overwhelm users and streamline the process.
The main features are as follows:
USER JOURNEY
I also created a user journey that provides some testing wireframes and simulates what the user might do when opening CLST.
Soooo, I got too overzealous and excited and just started designing with no visual design planning or more thought toward the features of the app. Here's where I messed up (based on my own realizations and from the feedback of my classmates):
I chose a safe, readable, and modern font (Apple Gothic) as a primary font, while Arial Black was chosen as a secondary font. Its loud and boldness reminded me of contemporary design, with its brashness and energetic-ness that would appeal to young users, like how Depop's font accomplishes the same effect.
The color palette was chosen as an ode to dark mode with bright colors to contrast and emphasize certain features. It also gives the app a mature and contemporary vibe.
Thus, I created a more responsible iteration that was more easy to navigate and had more intuitive designs. Here's how it works:
CLOSET FEATURE
The tab on the top right corner is fixed on all pages of CLST and leads the user to their virtual closet. Its constant presence makes it easy to access and it's design is reminiscient of a tag.
A user's closet can be filtered by color and clothing type. A user can also search up an article of clothing in their closet or add a new article. Thumbnail views show users' recently added clothes.
The closet function also has the ability to create collection, so that users can further organize their clothes according to trends.
The "plus" icon allows used to add a new item or a new collection.
PREVIOUS ITERATION
Previously, I designed the closet feature to have tabs, but scratched the idea after realizing that there are more than 4 types of clothing articles haha...
INSIGHTS FEATURE
Insights in the bottom nav allow a user to see how often they wear a specific article of clothing, what is the most dominant color in their wardrobe, etc. The 'clock' icon allows a user to change the time frame of the data. If they click on one of the bars of the bar graph, it will show which item it represents.
ADD ITEM FEATURE: BARCODE PATH
User can choose to input article of clothing through barcode or by manual entry. If they choose barcode...
They can take a picture of the item's barcode...
Where it will be entered for them!
ADD ITEM FEATURE: MANUAL ENTRY
If they choose manual entry, they take a photo of the article of clothing...
Add information about the item...
And the item is successfully inputted!
CALENDAR PLANNING FEATURE
Here, the user can plan outfits days, weeks, or even months in advance. RED signals what day it is. BEIGE signals which days have planned outfits. WHITE signals no outfits planned.
Today's outfit can be viewed by dragging or tapping the bottom red area. There, a user can add an article of clothing, edit their planned outfit, or randomize what they should wear that day, as signaled by the icons on the right side. Randomization allows for full utilization of their closet. Weather is also provided for that day for convenience.
Here's the final product! Feel free to navigate through CLST!
Thanks for following through one of my first product design projects! This project taught me about the importance of making an app entirely for the user. I wanted to create a personal and intimate experience, especially since the subject was clothes, items that dictate our individuality and uniqueness. Despite the product appearing somewhat finished, there's still more work to be done! Although this project has given me a lot of experience on UX design, I realize that there are a lot of improvements to be made.
What's next?