Designing Kloset: A Clothing Exchange App for Parents

Kloset started in a class, but I continued the project beyond the course to iterate on usability tests, create hi-fi prototypes, & put it in Framer. In 3 parts, I will cover how Kloset started, how it changed, & what we’re doing now.

What is Kloset?

Kloset is a clothing exchange app for parents. Young children grow quickly and Kloset helps parents exchange their children’s outgrown clothes with other parents. All exchanges are free and parents only pay for shipping, if necessary.

Context

April 2017. Advanced UX Studio class. My goal with taking this class was to work on a project with a more thorough dive into user testing and iterating. Sure, I’d worked on plenty of apps as class projects before, but they were just that—class projects. I went in this time intending to be more feedback-driven.

My Role: I led a small team of designers in developing this product.

1: It started as a textile recycling and clothing mending idea

April 2017

Problem: Excessive clothing waste. Most clothes that aren’t in wearable condition are sold to textile recyclers, sent overseas to developing countries, or end up in landfills.

The original product pitch I gave was an app that connected people to promote more fabric recycling and offer mending services. You have a hole in your otherwise perfect sweater but don’t know how to mend it? You could use this app to find someone who could mend it for you.

The goal was to delay entry into a donation cycle while helping the local community.

Customer Journey Map

I teamed up with a few designers and right away we started exploring requirements, starting with a customer journey map.

Whiteboarding the customer journey.

Feedback: It’s too niche

After some informal user interviews, however, we realized that this concept was targeted for such a niche audience that it might not be feasible. So we split up to brainstorm separately, and, after conducting competitive research on a number of options, we decided to explore children’s clothing. Children grow quickly and not all parents can afford to buy new clothes frequently. So we pivoted.

2: Designing for parents

April — June 2017

Problem: Many young children grow quickly and parents find themselves with a batch of otherwise fine clothes that their children simply outgrew. How could we help parents get rid of all of these clothes quickly, easily, and maybe even receive a whole new set of clothes in return?

We created a new customer journey map for the onboarding stages since the rest of the process was essentially the same as before.

At first, we intended to “force” users to donate a box of clothes before being able to even use the app. We had good intentions, but that idea didn’t survive.

Research

At this point, we had an idea and reasonable assumptions about how it would solve a problem for a group of users, but while our personas guided us in the right direction, we needed to validate these assumptions. So we eagerly moved into user research.

To verify our assumptions and understand our audience better, we conducted a customer survey and stakeholder interviews. After surveying 68 parents and interviewing 6, we had a few key findings:

  • Giving away clothing: 65% give away clothes to other people they know and 63% donate. 22% had neither given clothes away nor donated them, but all of them kept these clothes instead.
  • Receiving clothing: 85% of parents have received clothes from friends, 30% from neighbors. 61% have shopped at thrift stores before. 8% had not received or bought second-hand clothing at all.
“My wife usually goes to 3 or more different places to try to sell everything or get store credit for new clothes, and then she donates the rest of it. It’s very time-consuming and a lot of effort.”
“It doesn’t really matter who I get clothes from, as long as it’s clean.“

This data confirmed that getting rid of and getting new clothing easily and at a great price was a problem. It also showed that parents were already involved in a similar clothing exchange economy. The main issue would be to make this exchange easier and less costly.

Prototypes

Excited to start sketching ideas and conduct informal user tests, we immediately jumped into paper prototypes. A few competitors I drew inspiration from include OfferUp and letgo because they both focus on quick, easy, local exchanges.

A few of our paper prototypes.

Each post on Kloset would be a “box” of clothes. It’d ideally include various articles of clothing, and parents could put an entire season’s worth of clothes in one post. This was to easily get rid of clothes in bulk, which is why many parents simply donate.

Much of the feedback we got at this point from a number of parents we interviewed was very positive for the concept so we moved forward with some changes.

Main wireframes

Some highlights for this stage include: in-app currency called “Koins”, a tagging system to make searches easier, and a built-in messaging system.

These are a few of the main designs at this point.

Usability Tests

After many iterations, we created an interactive prototype in Marvel and used UserTesting to get remote tests done by 15 anonymous parents. Here, we learned that Kloset was not very intuitive at all for parents, for several main reasons:

  • We relied heavily on explaining how the app works in an onboarding tutorial, which parents usually didn’t read.
  • The language used in the app was confusing.
  • A lot of the app looked exactly the same as every other screen in the app.
  • Some features of the app were hidden in a sidebar menu, which was not apparent to parents.
  • The user flow was restrictive. Parents often went through the steps trying to figure out what we wanted them to do next instead of being able to do what they wanted.

At this point, the class was over and we graduated, but after receiving such important feedback, we couldn’t stop there. We agreed to continue the project, but with the team spread out around the world and a lot of unstable internet connection, we put Kloset on hold until I was back in Seattle. During this time, I also recruited the help of another friend and UX writer, Christy.


3: Iterating and Moving Forward

Aug 2017 — Present

We came back together and started redesigning to address issues raised in user testing.

Getting rid of the tutorial

The onboarding tutorial was something that we had previously received warning about how it likely wasn’t a reliable way to provide any help information. But we had left it in to test if it really wasn’t. It really isn’t. None of the users read it and the few who did read it out loud later couldn’t recall the information because it wasn’t provided at a meaningful time.

How could we make our app more intuitive so that less instruction is needed?

I looked at where in the app users started to get confused and identified key issues in language and visual cues. Many iterations later, with some help from Christy, we reached a design that didn’t require a tutorial at all.

Sidebar

I also realized that all of the options in the sidebar were again present in the profile screens, creating a double navigation. Parents in our user tests had all struggled with this so I got rid of the sidebar entirely on the Browse screen and replaced it with a direct link to the user’s profile.

Sidebar to profile

As an example of our language comprehension issue, in the sidebar we used “Give” and “Get” to separate shipments by whether the user was sending the box or receiving one. This was based off “Buy” and “Sell” models in marketplace apps like eBay. But just those two words didn’t explain enough and caused confusion.

Freedom for the user

One other issue was how restrictive the app was, especially with the Koins system. After re-evaluating why we had included it in the first place, we realized it didn’t serve its original purpose well and, since it created an extra layer of unnecessary complexity, we decided to remove the feature until we figure out a better way to incorporate it.

Visual design

I then focused on creating a style guide to unify our screens. I researched a variety of children’s apps and apps targeted at parents and realized quickly that bright, pastel colors were generally the color of choice for similar apps. For text hierarchy and content layout, I looked more toward e-commerce apps because they’re closer in functionality.

As for visual layout, we wanted to move toward was making Kloset more Android-friendly. I explored making our screens much closer to Material guidelines, but I realized apps have their own brand. So I went back to some older ideas to make sure the app still felt like Kloset and not like a default Google application.

Tried a FAB, Roboto, and a pretty intense gradient.

Final Designs

These are a few of our main screens I designed. Find more here!

Final Prototype

You can try out the most updated Kloset prototype here.

What I’ve learned so far

This was a great experience designing for a group of users I’m not a part of, which, when you actually go in and test things, makes you realize can actually have a large difference with your expectations.

I also realized users want a lot of different things, but you need to prioritize it and not everything they want is important (right now). At the same time, it’s important to listen to everything!

When you name projects a variation on a real word (like “Kloset”) you start to think the actual spelling is incorrect—I frequently misspell “closet” now.

What’s going on now

Currently, we’re designing micro-interactions in Framer. We’re inching along but the end is probably near. Its been a journey but I’m glad we were able to pursue the project up to this point.


Thanks for reading! Feel free to check out the rest of my work here.