FitCheck

1. Research

Due to our one-month timeline, we had to keep our research small while getting as much out of it as possible. As such, we conducted four semi-structured interviews with a stratified sample, ranging from people who only dress for the occasion to people who decide what to wear every single day. Since fashion is inherently a form of creative expression, we needed qualitative data, which is why we chose interviews so that we could directly ask people about their fashion habits. We went in with a list of questions, but some were only asked when they applied, such as follow-up questions about thrifting only being asked if the interviewee actually thrifted.

From there, we clustered our findings into an affinity diagram and created two personas designed to be polar opposites: Alex, who doesn’t care too much about fashion and only wants to be styled for relevant occasions, and Sam, who wants to make a career out of fashion. This let our personas cover our entire primary user base while also dipping into the secondary ones. Our personas then helped us figure out how the app should flow, which we mapped out in a user journey map for Alex.

2. Design system

I created the design system for the whole app, built around a calm, photo-first interface that keeps the focus on the user’s clothes.

• Accessible color. Every color is documented with its WCAG contrast ratio, such as navy text at 18.3:1 and the accent blue at 5.74:1. We kept the palette to a few key colors so the clothes wouldn’t be overshadowed by a busy visual design. Blue and white are both neutral colors in fashion, so they don’t clash with anything. Pretty much everyone owns something blue, like a pair of jeans, and white really lets the clothing shine. Red is reserved for destructive actions like deleting, to stay consistent with other apps.
• Three tiers of tokens. Primitives feed into semantic tokens, which then feed into components. This means a rebrand only needs to be edited in one place.
• Glass vs. crisp. Translucent, blurred “glass” is reserved for navigation and controls, while content like cards and forms stays solid. This gives the interface a lighter feel and a clearer sense of depth, and since it mirrors iOS’s Liquid Glass, the app feels native to the platform.
• One type family. We used Manrope in six sizes. Its geometric, slightly rounded style feels approachable rather than corporate, and its wide range of weights gives us a full type hierarchy from a single font family.

3. Designing the Virtual Wardrobe

Each design decision was based on what our interviewees told us.

• Fast cataloging. “I would not spend hours photographing and entering every item I own.” To make adding an item as quick as possible, an AI camera scan fills in its category, brand, size, and condition in seconds. Entering details manually uses the exact same form, so typing it in yourself is always an option.
• Deciding what to wear. “I mainly wear the same few clothes because they are easier to find.” Users can mark their favorite pieces so they show up first in the wardrobe, and they can virtually try on any item straight from the grid rather than digging through their closet.
• Surfacing forgotten items. “I sometimes forget that I already own a similar item.” A one-tap “Mark as Worn” button builds a wear history, and item cards flag pieces that haven’t been worn in a while so they don’t get lost in the grid.

4. Prototyping and testing

We built FitCheck into an interactive, testable prototype in Figma. Try the prototype (opens in new tab).

Before the final iteration, we ran a lightweight heuristic review alongside an unmoderated usability study in Maze. Due to our one-month timeline, the study was less about large-scale research and more about getting familiar with usability testing and catching real problems. Participants completed four realistic tasks, such as adding an item to their wardrobe, without being shown the intended path, and then freely explored the app so we could see what naturally caught their attention.