CLST

An app dedicated to fashion, organization, and data.

TIMELINE: 3 Months, Winter 2019
Product Design, UX/UI Design
TOOLS USED: Figma, Photoshop, Illustrator

BACKGROUND

SHOPPER'S REMORSE

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

HOW CAN WE MANAGE OUR CLOSET, DISCOVER TRENDS ABOUT OUR STYLE, PLAN OUTFITS, WHILE MONITOR OUR PURCHASING HABITS?

The need for an all-in-one fashion app is real.

OPPORTUNITY

CLST is a multipurpose app that is dedicated to fashion, organization, and data.

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.

CHALLENGES

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!

USER RESEARCH

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:




USER PROFILES

I created some profiles to reflect the responses above:



RESEARCH SYNTHESIS

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.

FIRST (FAILED) ITERATION

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):

  • VISUAL DESIGN: Too clunky and the user can't focus on where to look since everything is so...big. Color choices are questionable and overall design is not intuitive.
  • EXPLORE FEATURE: By adding this feature on a whim, the app no longer becomes personal to the user, but instead becomes like any other photo sharing app. I wanted CLST to be more intimate with the user, where they can be honest about their spending habits without worrying about others.
  • LAYOUT: Having the inventory tab right in the middle might block top UI build into phones, like time, battery percentage, etc. Overall unappealing. Weather feature is not efficient.
  • And the list goes on...

ESTABLISHING A STYLE GUIDE

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.

FINALIZING FEATURES AND DESIGNS

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.

INTERACTIVE PROTOTYPE

Here's the final product! Feel free to navigate through CLST!

TAKE-AWAYS AND CONCLUSIONS

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?