garb hero image 6 screens
garb closet app hero image
App Design

Garb: A Clothing Management App

A DesignLab Concept Project
BRIEF

Design, prototype, and test a mobile app to address a real user problem discovered in user research.

The example brief described an app for tracking books, akin to Goodreads. I decided to create an app for managing clothes instead, because “I have a closet full of stuff and nothing to wear” is a source of stress and overwhelm for a lot of people.

SOLUTION OVERVIEW

I created a wardrobe management app that allows users to start tracking what they wear right away with a quick selfie, then tag their clothes in the selfies to get wear information later, as they import their wardrobe over time. The app is organized around groupings of clothes instead of individual outfits because that’s how people really think about their clothes.

LESSONS LEARNED
  • Trimming features is the key to shipping anything.
  • Most people are not my target audience. Talk to them anyway.
  • Don’t make the user work before they’re invested in the product.
USER INTERVIEWS

4

users

COMPETITION

4

apps reviewed

RESEARCH SUMMARY

9

takeaways

TARGET AUDIENCE

2

personas

PRODUCT DEFINITION

2

feature sets

MVP GOALS

3

user problems

STRETCH GOALS

6

user problems

TASK FLOWS

4

tasks

HI-FI PROTOTYPE

88

screens

USABILITY

4

tests

ITERATIONS

4

revisions

NEXT STEPS

6

improvements

01. INTRODUCTION

This was the final DesignLab student project. After building up my skills with the app feature project, I was ready for my first go at designing an entire app. I chose to create a closet management app because, while there is a glut of existing apps in the market, there is no clear winner among them in terms of solving core user problems.

Expected User Problems

Putting clothes on one’s body seems like it should be simple, but it comes with a number of problems that vex many people (especially female people), such as:

  1. Remembering everything in one’s closet, including its location, condition and size. 
  2. Figuring out which items get the least wear, and why. 
  3. The effort and time it takes to decide on what to wear each day. 
  4. Packing for travel, back when we did that sort of thing. 
  5. Deciding on new purchases.
  6. Keeping track of what needs to be cleaned, repaired, or replaced.
  7. Figuring out what goes with what, and then remembering it all. 
  8. Figuring out one’s personal style. 

Ideally an app would help users do a good portion of that without spending an ungodly amount of time and effort.

Project Limitations

This is a student project where I did All The Things by myself, with guidance and feedback from my mentor. Having the complete freedom to do whatever I wanted was great, but I quickly found the limitations of what I could accomplish by myself in a reasonable(ish) time frame. I scaled down by a lot from my initial grand plans. Even with that, I had to focus on the key task flows and leave the secondary features and task flows for the next iteration.  

02. RESEARCH

Competitive Research

The Goal

Find out how other apps solve user problems, and how users feel about those solutions.

The Process

  • Read review articles comparing different apps
  • Download the best rated apps to test out their functionality
  • Read app store reviews

The reviews were especially useful because they provided a glimpse into which bugs and/or features were important enough to inspire real users of competitors’ apps to leave a review. 

Based on the competitive research, the following aspects seemed the most important to their users:

1. Ease of Setup

Some of the apps make populating all the clothes somewhat less painful than others, and that makes a huge difference in how likely users are to try it in the first place, and then stick with it. 

garb competition reviews ease of setup
garb competition reviews ease of setup

2. Data Portability

Nobody wants to lose their data if they happened to lose their device, especially if it takes a lot of effort to create the data. 

Users also expect their data to update seamlessly across all their devices, and to be able to access it from anywhere. 

garb competition reviews lost data
This was understandably the most upsetting issue for a lot of reviewers
garb competition reviews lost data
This was understandably the most upsetting issue for a lot of reviewers

3. Flexible Organization

There is a wide range of lifestyles, and corresponding closets. Some people are ok with just a few basic categories, such as “tops” and “bottoms”. Other people would drown in a sea of tops, so they need a way to create custom subcategories in order to tame the chaos. 

garb competition reviews categories
garb competition reviews categories

4. Ongoing Maintainability

Importing the closet is just the first step. A lot of app reviews mention issues that sneak up on people after they’ve used the apps for a few months or even years. 

  • What happens when a user throws away an item? Does all of its data disappear too? Does the item vanish from all the user-created outfits, and have to be replaced manually? 
  • What happens when a user replaces an item with a similar one instead of simply chucking it? 
  • Is there a way to find all outfits with a particular item?  
  • How difficult is it to find a specific outfit? 
  • Is there a way to quickly tell which items might need replacing, and which are barely used? 
garb competition reviews maintainability
Adding all the clothes to the app is just half the battle
garb competition reviews maintainability
Adding all the clothes to the app is just half the battle

5. Sweet, Sweet Data

People really want to learn about their own closets. What are they wearing? What’s languishing in the back of their closets? Do they have too much of something, and not enough of something else? Which items were definitely worth the money, and which were regrettable mistakes? 

garb competition reviews data
"Budget nerds" FTW!
garb competition reviews data
"Budget nerds" FTW!

Top Competitors

There are dozens of wardrobe management apps on the market, but most of them are glitchy and feature-poor. Stylebook and Cladwell are the leading competitors, both apps are paid. Smartcloset is the most robust of the free options. Finery is no longer available, but I’m including it because it offered a creative solution to the ease of setup pain point. 

garb top competitors
Competitors’ Solutions to Populating the Closet Problem

This is by far the biggest barrier to use for all wardrobe management apps, and I found several broad types of solutions. 

Stylebook asks the users to take a photo, then encourages them to edit out the background. They created a tool within the app to edit out the background in the photos, but frankly it is not very good. I found much better standalone apps for this process, and as a Stylebook user myself, I prefer to edit my photos outside of Stylebook. 

This method was the most common among all the free copycat apps. 

They also have a web clipper tool that asks the users to enter the item’s URL so the app can grab the photo from there. It’s much easier to just navigate to the item outside the app and take a screenshot. The clipper tool doesn’t grab any other information, such as material, color, brand, or price. Apparently the clipper tool used to have much better functionality, which the users preferred.

Cladwell built a huge collection of beautifully shot and edited photos and asks their users to select the most closely resembling ones to their items. I played around with this process and found it to be quite time consuming, especially for the more unique items. They also let the users upload their own photos if they can’t find a good match. This was frustrating, because then I had to spend the time to take, edit, and upload a photo on top of having already spent the time searching through their database.

Finery had an interesting solution. The app asked for permission to access the user’s email box, then searched through it to find online shopping receipts and added the items from those receipts. 

This approach felt a bit invasive to me – my whole life is in my email! – but it solved the problem of having to import things one by one. 

I can see how this would work for people who get most of their clothes via online shopping, but it would not work well for people who prefer to get their clothes in person or from nontraditional sources such as thrift shops, vintage stores, clothing swaps, custom-made, etc. 

User Research

The Goal

Discover how people think about clothing more generally, and what matters to them the most. Otherwise, I would risk creating a slightly modified clone of an existing product, and copying their blind spots and limitations. 

The Process

  • Four formal user interviews
  • 10-12 informal conversations
  • Secondary user research: a review of user-generated content, such as blogs and YouTube videos

The Interviews

  • 4 women
  • Age range: 26-44
  • All US-based
  • 1 student, 1 self-employed, 1 mid-career full time job, 1 senior full time job

In addition to formal user interviews, I tend to bring up my current obsession/project in every conversation, so I had about a dozen less structured conversations with friends and family about clothes, style, getting dressed, and managing one’s closet. 

2020 was a unique time to have done this project. Most people I spoke to were living in their sweatpants, yet the topic was still important enough to them to generate some spirited discussions.

Secondary User Research

There is an avalanche of user generated content out there on how to dress and tame one’s closets: blogs dedicated to the topic, YouTube videos by YouTube-famous influencers and regular people alike, and don’t even get me started on Instagram. People have opinions! And they are not shy about sharing them. Which is great, but I had to timebox this research and stick to it, or I would still be scrolling right now instead of writing this case study. 

The most prominent themes from this research fell into two broad groups that directly contradicted one another. 

On the one hand, there is a lot of content about things like

  • Minimalism
  • Sustainability
  • Mindful consumption
  • Environmental impact of clothing
  • Thrifting
  • Capsule wardrobes 

On the other, there is even more content about

  • Fashion trends
  • Clothing hauls
  • Cool/Expensive Things I Wore This Week 
  • Closet makeovers 

No wonder everyone I talked to was stressed out about clothes!

User Research Summary

Both the interviews and the secondary user research yielded a lot of useful information, but I weighed the user interviews more heavily when prioritizing the gathered insights. I thought that the process of creating content would be more likely to distort how people talk about their clothes, and the one on one interviews would be more frank and reliable.

1. Key Items > Outfits

Women don’t think in outfits when getting dressed. They start with a key item they know they want to wear that day, then choose the rest of the items around it based on a variety of factors. The one exception to this rule is special occasions. 

2. Wearing Everything Takes Effort

Women feel they overuse their favorite items and underuse the rest, because putting together new combinations and then remembering them is a lot of work. This leads to feelings of boredom and guilt at the same time. 

3. Shopping Is Inefficient

Women rarely take stock of what they already own before they shop. Instead, they mostly base their purchases on what they like when they see it at the store or online, and tend to gravitate toward similar items as a result.

4. Clothing Is Stressful

Too many items increase the cognitive load, too much social pressure prevents downsizing, and constant evolution of trends is hard to keep up with. 

5. Clothing Is Social

People believe that clothing is an important tool for influencing other people’s perception of them, especially in professional or romantic settings. 

Many women use clothing as a bonding experience with other women, e.g: going shopping with friends, asking for input when creating outfits or deciding what to wear to a specific event, etc.

6. Clothing Is Fun

It can be a big source of pleasure, a tool for self-expression, and a boost to confidence and self-esteem.

7. Apps = Tedium

Many people are reluctant to try an app because they expect to have to do a lot of tedious work upfront before the app can be useful to them. 

8. Outsourcing The Work (?)

People with more disposable income and less free time say they want the app to be a gateway to services by others, such as organizers and stylists, but it’s not clear how much they would be willing to pay for those services. Further research with a targeted subset of potential users would be needed to find out. 

9. No Money Upfront

None of the users want to pay for the app itself, at least not before they have a chance to try it out and see if they will use it.

03. DEFINE

Ideal World Features

These are the user problems I would have ideally liked to address, and the solutions I wish I could have built and tested, if I had unlimited time and resources to create this app.

Outsource The Work

The app would let users hire someone to come in and photograph their wardrobe, edit the photos, then import everything into their account remotely.

In addition, the app would let users browse stylist profiles and hire them to create outfits out of the clothes they already have in the app, or make suggestions of items to add to their wardrobes in order to get more wear out of specific pieces the user is struggling to style.

The app would take a cut of the transactions, and that would be the business model without having to charge for the app.

Clothes Are Social

The app would allow users to connect to their friends’ accounts. People rely on friends whose taste (and honesty) they trust, for feedback on their style choices. “Should I wear that?” is a perennial question, and we all know we probably shouldn’t ask our partners.

The social aspect would be controlled and limited. Most people do not want to show their entire closet to the world.

Shop And Purge Assistant

The app would let users see at a glance which items they are not wearing, and (perhaps with the input of a stylist and/or friends) help them decide whether they aren’t wearing it because it doesn’t work for them, or because they don’t have the right shoes for it. This would reduce the stress of “a closet full of clothes and nothing to wear” and make shopping more purposeful and targeted.

MVP Features

My mentor helped me face reality: I was just one person, who was quite motivated to finish this project and graduate from this bootcamp. Hence, I had to scale back from world domination just a tad, and focus on addressing the most critical problems for the MVP version of this project.

Apps = Tedium

If people think they have to put a ton of work into the app upfront, they are simply not going to use it. The app has to be useful in some way on Day 1, before the user does any work.

Key Items > Outfits and Wearing Everything Takes Work

Most users’ approach to dressing looks something like this:

“I know I want to wear these jeans today, and I kind of know what they go with, but it’s going to be a process to figure it out every time, and I know I’m forgetting things.”

Ideally the app would help them remember that these jeans go with any of these eight tops, these three pairs of shoes, these three jackets, and these five accessories.

garb how people think about clothes
This is how most people think about their clothes

Apps like Stylebook sort of do this by asking the user to create individual outfits of all possible permutations, and then select out of those outfits to log what they wore on a particular day. This approach quickly becomes unmanageable. 

garb how apps think about clothes
Just a fraction of the possible outfits from the above items. I’ll spare you the 100’s of others.

Thinking of clothes in terms of unique outfits is a highly inefficient way of managing the cognitive load, which is why most people don’t do it that way. 

Creating these outfits, maintaining them, and then sifting through them to try and find the right one is a lot of tedious work.

Personas

I created two personas: one for the “stretch” set of features that I would aim for if I had the time and resources, and one for the MVP set of features I will design in this project.

Having an idea at the beginning of where I would like to take this product and who its next set of users would be helped me set it up in a way that would allow me to incorporate the more ambitious functionality into the MVP product in the future without having to start over from scratch.

The Stretch Persona

garb persona stretch features

Amy is the user I would target for the ambitious version of this product’s functionality because she needs help in this area and is willing to spend a substantial amount of money on the right solution. 

  • Cares about her style
  • Has zero free time 
  • Has disposable income
  • Wants to outsource the hassle
  • Wants to shop more effectively
  • Wants to be more organized
  • Wants to reduce her environmental footprint

The MVP Persona

garb persona mvp features

Kayla is the target user for the MVP set of features. She has less disposable income, but more free time than Amy. She would find a freemium model appealing, and would not spend more than a few dollars on the app, at most. 

  • Likes to shop and often uses new clothes as a pick-me-up
  • Overwhelmed by too many clothes
  • Doesn’t fully know what’s in her closet
  • Has a sense she is not wearing her clothes enough 
  • Doesn’t know which items she is underusing
  • Thinks she needs to clean out her closet, but doesn’t know where to start

The overwhelm leads her to just wearing the same things over and over, making her feel bored. This keeps her stuck with her messy closet and trapped in a loop of buying new things to alleviate the boredom. 

Problems and Solutions

The MVP aims to solve two problems: the “don’t make me work before you are useful to me” problem and the “just tell me what goes with my favorite pants” problem. It will help the user begin to keep track of their clothing usage effortlessly on day one, and eventually carry the cognitive load of closet maintenance for them. 

Problem 1: Don’t Make Me Do Work (Upfront)

Solution: let users snap a selfie of whatever they’re wearing that day and put it on the app’s calendar. 

This way they can start using the app to track their clothing usage without doing any of the upfront work, and tackle the tedium of importing their closet a little bit at a time at their convenience. 

They would then connect the items to the selfies, which would let the app backtrack the item usage and provide useful data such as wear history and cost per wear as soon as the user uploads each item. 

Problems 2 and 3: Key Items > Outfits and Wearing Everything Takes Work

Solution: the user would create groupings of items that go with each piece of clothing. 

This way they would only have to figure out that “hey, this top looks great with those pants!” once, and then not have to carry that information around in their heads. 

The app would create some groupings for the user automatically based on the user’s tagging of items in the selfies as they add them to the app. 

The user would be able to create outfits from the groupings, which will be a much faster and easier way of creating them because they won’t have to browse their entire closet to find each item. If the outfit has already been created, the app can alert the user and pull up the previously created outfit for them, eliminating the need to search for the outfit. 

None of the apps currently on the market are offering anything like this solution.

App Map

My initial app map was quite ambitious. I ended up scaling way down from this grand vision, but it was still useful to know what would be included with more time. 

garb app map

Tasks and Task Flows

The Tasks

In the interest of time, I had to focus my work on the absolutely critical tasks of the app and leave the rest implied for now. I chose to focus on six main tasks. 

  1. Upload a selfie
  2. Add a selfie to calendar
  3. Upload and tag clothing items
  4. Create a grouping
  5. Create an outfit from grouping
  6. Schedule the outfit to calendar

Task Flow 1:  Adding Selfies and Items

Selfies

After a quick onboarding flow, the user is invited to upload a selfie. 

The user can tell the app which date they wore the outfit in the selfie, or skip that step. This would allow a user to save an outfit in the app for later, because people often try on a bunch of clothes in different combinations and want to remember the good finds for later use. 

If they don’t want to deal with the hassle of adding clothing items, they could continue to use the app with selfies only. This use case requires minimum effort from the user, but it can still be helpful for remembering what looks good together, when they wore what, and serve as a quick visual reference for what gets worn the most. 

The app implies a tagging feature, so the user could assign tags to their selfies if they wanted to, such as “work”, “casual”, “dressy”, “bloat day”, etc. That would allow them to quickly find the desired selfie later. The app would also assign an automatic tag of “no items” to any selfie until a user associates some items with it later. This will allow the user to filter the selfies to find just the untagged or incomplete ones. The user-tagging and filtering processes were not built out for this prototype. 

To unlock the app’s full potential, the users would have to add the individual clothing items eventually. They could upload one item at a time, or batch upload a bunch of photos at once. 

Items

Uploading the items consists of three steps: 

  1. Assign items to categories (mandatory)
  2. Tag items in selfies (optional)
  3. Name items (optional)

The app’s functionality implies that the user would add additional information to each item, such as the item’s cost and value. This would enable the app to calculate cost per wear, overall value of the closet, and overall amount of money the user has saved on their clothes if they did not purchase some items at full price. However, for the sake of time, I did not build out this feature in this prototype. 

Task Flow 2: Create Groupings and Outfits

Once the user adds some items and connects them to the selfies, the app uses that information to start calculating some data and stats, such as how many times each item has been worn, and what other items it has been worn with. For testing purposes, I had the users add a skirt that has not been worn in any of the selfies and built out the process of assigning some tops and accessories that it could be worn with. 

Once a grouping is created, the user can quickly combine the items in the grouping to create an outfit, then schedule it for a day when it would be worn. The app would save the outfit and the user would be able to go back and find it to wear again, duplicate and edit to create a slightly different version, etc, although I did not build that out in this iteration. 

In a future iteration, I would add an outfit filtering feature so that as a user adds items to an outfit, all existing outfits with those items would be presented to the user. This would help with the “browsing the sea of outfits” problem. 

To AI or Not to AI

A lot of these tasks are quite tedious and repetitive, and I had to decide whether I would ask the user to do them, or go the AI route instead.

At first I assumed that AI was expensive and not accessible for a product like this, but then I did some research and learned about Microsoft Azure Custom Vision Service . It allows you to upload a set of images and train your own pet AI to recognize whatever you want it to recognize. This was a really exciting find and I will definitely play with it. However, for this MVP I decided to go the old school route for several reasons. 

 

  1. I can’t know that the AI would work for this use case without trying it out first with a sufficiently varied set of testing images. The range of items that technically count as a “shirt” in women’s clothing is rather wide and occasionally surprising even to humans. 
  2. I wish I was working on a real team on this and had a developer whose brains I could pick to help me understand the possibilities, the limitations, and the functionality of this technology. If you are reading this case study closely enough to see this part, hire me and make it happen! Right now I know I don’t understand AI enough to design a real interface for it, and using it without sufficient understanding would be a copout. 
  3. AI could always be added in another iteration and be a really cool paid feature. That way the cheapskate users can choose the more labor intensive path, and the impatient users can throw some money at it and let the AI do the work for them. 

04. KEY SCREENS

Once I had some idea of how the app would work and what the main screens should do, I sketched some layout and functionality ideas, then iterated until I arrived at the final version.

The Home Screen

Users really like the calendar features, so I knew I wanted a  large, scrollable calendar row on the home screen. It would have to be flexible enough to show just a selfie, a selfie and some items, some items, an outfit, or an outfit and some items. 

The home screen would have to let users quickly import selfies or items, and search for anything in the app.  

Because users dress by picking a key item first, I decided to add a row of Most Worn items underneath. This would put the items most likely to be their key items at their fingertips. 

Users also cared about the usage stats, so I decided to add an abbreviated version of what the Stats screen would eventually show. The screen shows the option to Edit this card, because different people cared about different stats, but I did not build out that functionality for this prototype. 

Home Screen: Sketches

garb key screens home sketches
garb key screens home sketches
garb key screens home sketches 02

Home Screen: Final

garb key screens home final with footer
The home screen final layout with the footer shown.
garb key screens home final full stats card
The home screen final layout with the full stats card shown.

The Closet Screen

The Closet screen had to fulfill a few requirements: 

Flexible Organization

The app had to accommodate users with a wide range of closet management needs. People with relatively minimal closets would be overwhelmed by a complicated structure with layers of subcategories. On the other hand, people with large wardrobes with different clothes for different aspects of their lives would have to create subcategories to handle all their stuff. 

It also had to be usable immediately without asking the user to do any work. 

I settled on starting out with a basic high-level starter organization, and implying the ability to edit it if needed. I did not build out this functionality for the prototype. 

Item Accessibility

Making the user click through layers of organization just so they can get to their pants seemed rude. The items should be immediately accessible from the main Closet screen with maybe a quick scroll through the right row. 

Visual Hierarchy

Nobody wants an overwhelming mess in their digital closet. People get enough of that in their actual closets, thanks. The Closet screen had to give the user an immediate sense of where the item they are looking for might be. 

Closet Screen: Sketches

garb key screens closet sketches
garb key screens closet sketches 01
garb key screens closet sketches 02

I settled on a nested, modular layout with all the items located directly on the Closet screen, accessible via horizontal scroll. This gave the best combination of organized, yet quickly accessible.

Closet Screen: Closet States

To quickly manage the closet layout, I created a series of nesting components. This allowed me to control all aspects of the layout on all the Closet screens (and there were many) from a single location. Figma components give me life. 

I created a variety of states to make sure the layout wouldn’t break no matter how many/few items a user had in it. There would be some limits, of course – too many items would be cumbersome to navigate with a scroll. However, I expect most users would create subcategories to keep each row manageable, since so many users left reviews for the competitors’ apps, clamoring for subcategories.

garb key screens closet component empty
The closet component in empty state.
garb key screens closet component few items
The component with some items, and some empty default categories
garb key screens closet component full
The component with enough items in some categories to make use of horizontal scroll.
garb key screens closet component extra full
The component with enough items to need subcategories.

Closet Screen: Final Layout

Besides the closet component, the closet screen has a filter feature to let users find all clothes in a particular color, or with a specific tag, etc. It also has an Edit option.

Neither of those features have been built out for this prototype.

garb key screens closet final empty
The empty state with a few default categories.
garb key screens closet final extra full
There is no such thing as too many sweaters.

The Item and Grouping Screens

I had to think about these two as a unit, because they are two states of the same thing, and the Item screen had to transform into the Grouping screen in a way that still made sense. This took some figuring out, because the amount of content and the functionality would be quite different between the two. 

Item Screen Sketches

An individual item had to allow the user to do several things:

  1. Assign other items it could be worn with (i.e. convert it into a Grouping)
  2. Assign it to the calendar by itself
  3. Edit the item
  4. See any selfies it’s tagged in, and tag in new ones
  5. See the item’s stats
garb key screens item sketches 01
garb key screens item sketches 02
garb key screens item sketches

Grouping Screen Sketches

Once an item has some pieces associated with it, the layout has to change to show all of the clothes that go with this item. This was challenging, because the layout would have to work whether there’s just one other item, or hundreds.

The layout would also have to allow the user to easily do a number of jobs:

  1. Edit the item itself, or the grouping
  2. Add the item to the calendar by itself
  3. See all the looks and selfies associated with this item
  4. See the item’s stats
  5. Create a new outfit from the grouping
garb key screens grouping sketches 01
A few layout ideas for the Grouping screen, which did not end up looking like any of these
garb key screens grouping sketches 01
garb key screens grouping sketches
A few layout ideas for the Grouping screen, which did not end up looking like any of these

Item and Grouping Final Screens

In the end, I went with an overlay screen for both Item and Grouping, which allowed me to put all the functionality icons into a screen-specific footer.

The Grouping screen keeps the main item at the top, so there is room to add unlimited categories below it, and also a place to show items being added into an outfit.

The Outfit screen has its own screen-specific footer for all the actions a user could do with that outfit.

The app would be able to tell if a user created an already existing outfit and show it to the user instead of creating a duplicate. This would allow the app to use the outfit building flow as a filtering feature for all the outfits associated with the items a user has added.

garb key screens item final
The Item screen
garb key screens grouping final
The Grouping screen
garb key screens grouping final outfit progress
The outfit in progress screen
garb key screens grouping final outfit finished
The Outfit screen

05. VISUAL DESIGN

Typography

I wanted a headings font with an elegant and distinct personality. I picked Playfair Display, and mostly used its italic because it’s just so pretty. 

I paired it with Droid Sans because it’s clean, neutral, and reads well at small sizes. 

I also used one instance of Didot for the large numerals on the onboarding screens. 

garb key screens grouping sketches
A few layout ideas for the Grouping screen, which did not end up looking like any of these

Color

I chose a vibrant green for the main brand color, and used it sparingly throughout the app. 

The blue is a system color, but I included it here because it shows up in the screens where the app interacts with the OS, so it had to play nice with the colors I chose. 

I kept the rest of the palette deliberately neutral because I wanted the user’s content to stand out. 

garb visual design color

Icons

I kept the icons minimal to fit with the clean aesthetic of the overall app.

garb visual design icons

Components

Everything that could be a component, had to be a component. I made so many small tweaks to all the different aspects of the app throughout the design process, it would have been a nightmare to make the changes manually on every. single. screen. 

I was especially thankful to Past Me for this decision when I was making changes after user testing to the finished prototype.

garb visual design components mobile
garb visual design components

06. TEST

After figuring out the main screens, building out a small army of intermediary process screens, and stitching them together into something usable, I recruited a few brave souls so I could watch real people interact with my creation, and show me if it did what it was supposed to do.

Testing Prototype

Goals

The main goal of the test was to see how intuitive the app was, and whether any aspects of it confused people. I tried to give as little verbal instruction during the tests as possible so I could see how well the app communicated its functionality to the user. 

Testers

  • 4 women
  • Ages 26-40
  • 3 from DesignLab, 1 from personal network
  • 1 has tracked clothing usage before (using Stylebook first, and then a spreadsheet).
  • 1 was very much not in the target audience for this product. She did not care about tracking her clothing usage, and did not see the point of the product. She hated every task and resented having to do any of it, saying “why can’t you just have AI do this for me?” That test was rough, but also helped me see which aspects caused the most irritation.
  • 2 have never tracked their clothing usage before, but were interested in fashion, sustainability, and developing their personal style.

Tasks

Onboarding

Prompt: “You’ve just downloaded this app and are now clicking around to see if it would work for you. What do you do?”

Upload First Selfie

I did not tell the testers to do this because I wanted to see if the on-screen prompts would be enough.

Upload Items

For the sake of the test, I created a “six days later…” screen to avoid having to send them a second prototype because that was really confusing for users in the testing for the savings game feature project I just completed before this one.  

Prompt: “It is now a few days later. You’ve been uploading and scheduling your selfies every day for about a week, and now you are ready to start adding some of your actual clothes to the app. How would you do that?”

Create Grouping

After the user completed the Upload Items task flow, I asked them to navigate to the Closet screen. I wanted the users to see the difference between a grouping and an ungrouped item, and whether the app was clear about how the groupings happened from the selfie tagging process. 

“Click on the dark navy skirt. See those items under it? How do you think they ended up there?” 

“Now click on the tan skirt. Why do you think there are no items shown under it?”

“Let’s say you want to have the app remember all the tops and accessories this skirt goes with for future use. How would you go about doing that?”

Create and Schedule Outfit

Once the user created a grouping with the tan skirt, the final task was to create an outfit. 

“Let’s make an outfit with the crewneck sweater, the bag, and the shoes. Now, let’s schedule this outfit for tomorrow.”

Once they completed the task, I asked them to navigate back to the Today screen to see if they noticed the outfit shown in the day row there as well. 

Outcome Summary

  • All testers successfully completed all tasks. 
  • All testers read the Onboarding screens, but 2 thought they were instructional and not informational.
  • 2 testers asked why the app couldn’t use AI to do some of the more repetitive tasks. 
  • All testers said they cared about the time investment required upfront in order to start using an app like this. 
  • All testers found uploading and scheduling of selfies very easy. 
  • None of the testers liked the item naming flow because they didn’t feel it would be important to them later while using the app. 
  • ¾ of the testers did not mind the categorization flow, although ½ of them asked why the app couldn’t  attempt to categorize the items automatically. 
  • ¾ of the testers did not mind the tagging of items in selfies flow but…
  • …½ of the testers felt surprised the app would not recognize the item in the selfies automatically, and…
  • …1 tester was confused about what the app was asking her to do and why. 
  • ½  of the testers really liked creating a grouping. The tester who has used Stylebook before especially appreciated this feature. 1 tester was confused about what this task was for, and what she was supposed to do with it. Still clicked on the green Create Grouping button because she felt it was inviting her to do it, but did not understand the task until after she completed it.
  • All testers found creating and scheduling an outfit intuitive and easy. 

“If I tag the clothes to the selfies now, will I be able to see all the selfies with each item later?”
“Yes”
“Ooooh. Can you make this for real, please? Not five years from now, but like, next year?”

07. ITERATE

The testing revealed several adjustments in the “quick wins” category that would make the product immediately better, as well as some bigger structural changes and feature enhancements to be tackled in a later iteration. This section will focus on the former. 

  1. Tweak the onboarding flow
  2. Adjust the Add Items/Selfies flow
  3. Make the horizontal scrolling more obvious
  4. Limit use of brand color to interactive elements and adjust visual hierarchy

1. Onboarding

  • Clarify the copy to be more explanatory and less instructional
  • Hide the footer
  • Allow users to skip adding a selfie and go directly to empty state of the app
garb priority revisions onboarding v1
The original onboarding flow was too instructional and confusing to the testers.
garb priority revisions onboarding v2
The revised onboarding with tweaked copy, no footer, and an option to skip ahead to the interface before uploading anything.

2. Adding Items and Selfies Flow

  • Remove the intermediary Import Clothing CTA
  • Change the main Add button to let users choose whether they are adding an item or a selfie, since the task flow is different for the two actions
garb priority revisions secondary cta v1
The original home screen featured a big button to encourage item uploads.
garb priority revisions secondary cta v2
The big button was confusing and unnecessary, so I removed it.
garb priority revisions add items v1
The original Add icon only allowed users to upload items.
garb priority revisions add items and selfies v2
The new task flow lets user choose to upload an item or another selfie.

3. Horizontal Scroll

All elements that scroll sideways need to make that more obvious to show the user right away they can do that, especially if there is content to the left of the screen. 

garb priority revisions scroll v1
Version 1: users didn't know they could see past days in the scrolling calendar row.
garb priority revisions scroll v2
Version 2: a subtle shift to show a bit of card on either side should solve the problem.

4. Limit Use of Brand Color

Green is used in the app as a CTA color, so it should only be used for CTA elements. 

All non-clickable elements that were green were changed to a non-active color throughout the app, and the visual hierarchy of elements was adjusted to compensate where needed. 

08. NEXT VERSION

The next version would begin with building out the implied features that performed well in the testing, such as tagging, filtering, and closet and item data input and collection.  

In addition, there are several features that I would add to the short list for future iterations, either based on the user testing, or the comments of competitors’ users on their functionality. 

Of course, until the app is operational and starts generating actual user data and feedback, this list is an educated guess, to be revised or scrapped altogether as the real world usage data and user feedback dictate.

1. Web-Accessible Accounts

The app should prompt the user to create an account to avoid losing their data with their device. 

This would also allow users to log into their account remotely, which would allow the holy grail feature of letting people hire someone else to photograph their clothes, clean up the images, and upload them to their account for them – i.e. outsource the most tedious part of the process.

2. Add Web Clipper

The app needs to be able to clip items and their information from the web as an easier and cleaner way of importing items. Several competitors offer this feature, many of their users mention it in their reviews, and half of the testers mentioned that as something they would look for.

3. Suggest Items

The app should suggest items to wear on the home screen as it learns more about the user’s wear patterns. Many of the competitors’ apps offer this feature and many users look for it. 

4. Add Weather

The app should pull weather information into the app. People dress based on the weather, and opening another app to check the weather is an extra step the app can save the users.

In addition, having the weather data in the app would allow the app to make recommendations in the future based on the current weather and what items the user has worn on days with similar weather.

5. Allow Customization of Item Adding Flow

Different people care about different functions – some might want to name their clothes, some would want to add in the cost information, season, or sizing, while some would rather skip all the extra stuff and just do the minimum in the shortest time possible. 

6. Context-Specific Data

The items shown in a grouping should show how many times each item was worn with the anchor item, rather than globally. That would be more helpful to the user when deciding which top to wear with their favorite skirt today. 

09. CONCLUSION

This project was a learning experience, as every project is. This project’s main takeaways, for me, were:

  • Designing an app from scratch is quite gratifying. 
  • Making an app from scratch is even more work than I thought it would be. 
  • Letting go of the idea that every feature has to be built out before the product is “finished” is the key to shipping anything. 
  • Most people are not the target audience for any product. 
  • I really like bullet points. 
  • And, as always – other people’s input is essential for making decently functional products.