Case Study -HighKey App

HighKey app helps users to mix and match outfits while they can check their wearing habits.

View the prototype

My role

UX/UI and Research

Industry

Fashion, Tech

Tools used

Figma, Google slides,
Google Docs,
Photoshop, Illustrator

Designed for

iOs mobile

Duration

May 2024 - July 2024

Project Overview

As part of my capstone project for the UX program at BrainStation, I focused on addressing clothing waste by researching fashion consumption patterns. My initial step involved identifying the target audience with the most significant impact on fashion consumption.

Through both primary and secondary research, I concentrated on young adults aged 18 to 25. I conducted interviews with individuals who shop for themselves and discovered that they often struggle to optimize their wardrobes. My goal is to help them in making better use of their existing wardrobe, reducing habits of underutilization.

Design Process

I used a human-centered approach in a double diamond process to places real people at the center of the solution.

Empathize

Define

Ideate

Prototype

Test

Why to focus on Gen Z (Young Adults)

Based on existing research on consumer behaviour + environmental mindset:

Gen Z are2.6 times more likely tobuy clothing every week than other generations (Oliver Wyman)
75% of purchases made by Gen Z are in fashion (UKPOS)
51% of Gen Z students interviewed say they want to quit fast fashion and shop less.(ThredUp)
A FirstInsight report reveals that 62% of Gen Z shoppersprefer to buy from sustainable brands, and a staggering 73% arewilling to pay more for sustainable products.

Gen Z demonstrates an environmentally friendly mindset. However...

7 to 10

The number of times a garment is worn before being tossed.

36%

The number of times a garment is worn has declined in 15 years.

500 M

Kilograms of fabric items are toss away in Canada per year.

Sources: Earth.org, EcoCart, GlobalNews

After reviewing the available data, I decided to gain a deeper understanding of how young Canadian adults approach purchasing and donating clothes before proposing any solutions. In order to identify potential issues, I conducted one-on-one interviews with participants to explore their experiences on these topics.

Interview Script

Some of the questions that I used during the interviews:

What apps do you typically use?
What is your main goal when buying a clothing piece?
Tell me about the last time you tried to give away your clothes. What was the biggest challenge to it?
How many times you would say you wear a clothing piece, before giving away your clothes?

View the full user interview here.

I then organized and synthesized the findings into those four themes.

Themes

After user interviews, I identified four key themes, with one standing out: the struggle to declutter wardrobes. All five participants mentioned feeling overwhelmed by their clothing, due to emotional attachment, lack of time to organize, or simply having too much. This shared challenge became the focus for the next steps in the design process.

Inspirational and Aspirational Shopping

Seeking specific styles, Using social media for quick fashion inspiration and planning outfits, The thrill of thrifting and finding unique pieces.

Ethical and Quality Concerns

Ethical issues with certain brands affecting purchasing decisions. Disappointment with the quality of expensive items from well-known brands.

Fit and Sizing Challenges

Difficulty finding jeans that fit well for petite heights. Inconsistent sizing leading to items being too tight, loose, long, or short. Online purchases not fitting well or matching expectations.

Utilization & Wear Frequency

Individuals feel overwhelmed by the amount of clothing they have. The clutter leads to them forgetting about the clothes inside their wardrobe.

How Might We

help Gen Z Canadians with their outfit planning to reduce underusing habits and make better use of their existing wardrobe?

Who I am designing for

Experience Mapping

By mapping what users are doing, feeling, and thinking while managing their wardrobes and purchasing clothes, I identified design opportunities that allow for a more holistic evaluation of potential tools and features.

I decided to focus on when the user is most stressed and disappointed, which is when they are checking their wardrobe. Once users check their wardrobe, feelings of ‘nothing to wear’ or ‘clothing pieces that don’t match’ are constant.

Ideation

Keeping the persona in mind, I brainstormed several ideas and prioritized them based on their impact relative to the effort required. Given the user's difficulty managing their closet, the chosen idea was to create avirtual closet. This would help themvisualize their clothing items more effectively andkeep track of how often they use each piece.

During the Ideation phase, I brainstormed over 20 ideas and refined them down to three final concepts. I then developed task flows and created initial sketches to provide a visual overview of the key user experience inside the app.

As a practical individual

I want to

identify rarely worn items
mix and match my clothing piece
receive reminders to wear certain items

so that

I can declutter my closet
I can create new looks without buying more
I can make full use of my wardrobe

View the full User Stories here.

Task Flow

Through talking with my target user, I obtained some valuable insights about how they wanted to view data. If implemented in the app, it should be done in a fun way.

The choice was to create a user flow where the userfirst creates an outfit and then canview how many times they have created an outfit with that clothing piece. This shows the data visualization in non-intrusive way.

Add an item into the app

Image recognition allows user to separated image from background.
Also automatically recommend clothing labels.

Create an outfit

When you match items into an outfit, those individual items starts counting as “worn”.
If the user did not create an outfit with that individual item in the last 30 days, one message pops up recommending creating an outfit with that item.
The outfits stay inside cards where you can check clothes individually.

Clothing usage visualization

The user can check how many times they create an outfit with that item, per day, month and year.
The app provide a sort by based on most worn, least worn.

View the full Flows here.

Bringing Ideas to reality...

UI Inspiration & Branding Creation

I drew inspiration from UI elements of both direct competitors (virtual closet apps) and indirect ones (social media platforms like Instagram and Pinterest) to craft the app's unique identity.

For the Nav bar the idea was to focus on critical pages such as the Home page, Closet/Wardrobe and the possibility of editing.

Wordmark

I tried to create the wordmark through some sketches, but it was not the path I wanted to follow.

I initially envisioned the wordmark to be clean, minimal, and geometric, but my sketches leaned towards a more organic style. So, I went back to the laptop and started testing using guiding lines.

For the brand wordmark and overall typography, I selected the Jost font, a geometric sans-serif typeface inspired by Futura, specifically designed for optimal screen readability.

View the full UI Library and Design System here.

Bringing Ideas to reality

First Round

The main purpose was to create ideas and structure the main flow.

Wireframing

After gathering inspiration and doing some scribbling, it is time to translate it to a prototype ready for testing.

After the testing was found a lot of room for improvements:

Ensure that the onboarding screen provides an app summary for users.

Consider the real-life concepts of “outfits” and “closets” to improve the flow and user understanding.

I have changed the name of the page from “All Items” to “Your Closet” because, in real-life situations, users have their clothing pieces in their closets.

Additionally, I ended up changing the Trendy Outfits card to provide users with better filtering options for their clothes, a search bar for faster finding, chips, and a sort-by feature for less-used clothing pieces.

Use consistent text to describe the same actions or items within the app.

The page changes on those screens three times, when in reality the full flow would be happening on your closet page.

The final result is easier and smoother for the user to navigate.

Critique & Feedback

I presented the project during user testing sessions and at a tech event, and received excellent feedback. Some key takeaways include:

Most participants expressed a strong interest in using the app, indicating it is a desirable product.
Although my focus was on a specific target demographic, the solution appeals to a broader audience who also struggle with wardrobe organization.
Insights from user interviews were echoed in people's desires, such as organizing outfits by "events" and "seasons".

Where do we go from here

Conducting more usability testings.
Expanding on the data visualization features
Refining UI visuals.

Although the app currently lacks social features, future updates may introduce them. Consider potential misuse scenarios, such as harassment, abusive messaging, and tracking user habits without consent.

To address these risks, the app should implement robust reporting and moderation systems and maintain transparent privacy policies.