Stash: From Hanger to Planner in a Snap

Here’s the Problem…

When In Doubt…Internet!

I researched wardrobe organization habits and discovered the average American only wears 18% of their clothing. People often don't realize what they have until purging their closets, resulting in overspending on duplicates and contributing to textile waste. I also took into account the pressure to have a variety in one’s wardrobe and the lack of space in small apartments. All these factors inspired me to create Stash.

Let’s Dig a Little Deeper…

In order to solve these problems, I researched further into how people organize their wardrobe. I began by conducting an online survey. I received 40 responses and 47.5% of them were from people between the ages of 19-30.

Survey Results

I conducted individual interviews with five of the survey participants in order to gain more insight. I asked them questions like:

• Their relationship with technology

• How they organized their wardrobe

• Their habits when it came to wearing and disposing of clothing

I I learned from the participants that they all currently share wardrobe space with another person. Three of the participants take 10-15 minutes to put an outfit together and the other two take about 5 minutes. They all use closets and dressers and some use luggage and underbed storage to store their clothing.

 In order to find patterns and synthesize my research, I created an affinity board using Miro.

The Solution

The Target

After I established the problems I wanted to solve, it was time to think of a solution. I started thinking about what kind of person would benefit the most from using a product like Stash. I decided to target young, tech-savvy women under the age of 40 looking to better organize their wardrobe.

Meet Heather:

Heather is a 29 year-old digital marketing specialist based in San Francisco, CA. She lives in a one bedroom apartment that she shares with her boyfriend. She is not a tidy person and her messiness is causing tension in the relationship.

Maybe if she had Stash in her arsenal, she could learn to be more organized?

After  concocting Heather as my target user, I began thinking about how Stash would flow. I created three main red routes: Stash It, Match It, and Wear It. These are the three main components of Stash.

• In Stash It, users can inventory their clothing. They can start by taking a photo or using a photo from “Our Stash” and then proceed to tag each item.

• In Match It, users create outfits with the items they added to their closet in Stash It. They can add as many items as they like and then name their outfit.

• In Wear It, the user can choose an outfit and schedule when they would like to wear it.

It was important to me to use user-friendly language. I wanted the text to read as if Stash was a friend helping you to organize your wardrobe.

I used phrases like “Woohoo” and “You'll rock this outfit.”

I wanted Stash to be fun, light, and exciting to use. I chose to use the word “it” for each component because I thought it sounded more friendly than “stash,” “match,” and “wear.”

The Design

Sketches and Guerilla Testing

I had my red routes and I was ready to go. Time to start designing!

I started sketching and conducted my guerilla testing. I asked the users to complete two tasks: add an item to their closet and schedule to wear an outfit.

From user feedback, I discovered that the icons in the bottom navigation needed text labels. No one could easily figure out how to navigate Stash It, Match It, and Wear It.

The Flow

I took this into consideration as I created my wireframes. I made the screens for the main red routes and started making my wireflow.

Time to Make It Pretty

Now it was time to make my style guide and create my logo. I wanted Stash to be an exciting, fun, and youthful brand. When I created the logo, I wanted it to jump off the screen in a colorful explosion. I added a star to the design to give it a playful feel. As I did with all of my screens, I confirmed that my design satisfied ADA contrasts guidelines by using the contrast plugin on Figma.

When I first started creating my high fidelity mockups, I realized I would need more screens than I had originally planned.

I added tag categories to the Stash It route so the user could flow through the screens better.

I also created an empty screen for Stash It, Match It, and Wear It. The design is similar across all of them in that they each feature a cartoon character looking through a magnifying glass and displaying “Oh no!” at the top.

I wanted the “Oh no!” to be front and center so the user could see they were on the empty screen.

This screen evolved over time. My first idea was to have a cartoon character that was embarrassed because they couldn’t find their clothes. I could not find an appropriate image, so I used the cartoon of the person with the magnifying glass.

Here is how my empty screen evolved:

From my learning experience from the guerilla testing, I added text to the icons in the bottom navigation menu. With each version of the screen, I made the menu and icons smaller and the text bigger. I originally started by using the Stash logo at the top of each screen. I removed it in my final mockups so that there would be more room for content.

I wanted the Stash app to look as realistic as possible. One screen in particular was very important to make this happen: the screen where the user takes a photo of their item. I wanted the user to feel like they were really using an actual app when they were in my prototype.

I put together a screen requesting access to the camera and another one where the user would take the photo. While conducting my second round of user testing for my prototype, a participant explained that when an app requests access to the phone’s camera, the screen in back of it is black. I hadn’t thought about that when designing my screens. This is something I would change if my project was to move forward.

Another design feature I had difficulty deciding was how to approach the tag screens in the Stash It route. I wasn’t sure if I should use cards, boxes, borders, or all three. In the end, I chose to display one tag per page, in individual boxes, and show the photo of the item that the user photographed.

See the evolution below:

Time to Test!

Round One

I now had my first high fidelity mockups ready for prototyping. I chose to use a dissolve animation that would change screens when a user tapped certain buttons. I rounded up my friends and family for the first Stash usability test. I tested 5 people, ages ranging from 20s to 70s. I wanted to get a feel for what the Stash experience would be like for a variety of ages.

I gave the participants 4 tasks:

Most participants flowed through the app easily. There were a couple of really great suggestions that I implemented when I went back to iterate and redesign Stash.

One participant suggested that when the user goes to the “My Outfits” tab on the “Match It” route, the outfits would have a scroll feature so the user can see every item in their outfit. In my previous design, only the first three items would show on the screen.

Another good suggestion a participant had was to change the screen where the user names the outfit they just created. In my first version, the user had to click on the box at the top of the screen in order to type in the name. This caused a lot of confusion as most users went to click the “Wear It” button instead. In the final design I eliminated this first screen and the user would go straight to typing the name of their outfit after they chose their desired items.

Round Two

I made the changes and went on to the second round of usability testing. I tested my parents and their friend, who are all in their 60s and two Springboard students in their 20s and 30s.

During the second round of usability testing, I found a problem in the fourth task where users couldn't easily access their closet after creating an outfit. Participants of different ages were confused as there was no clear button linking them from the previous task to the Match It module where their closet is located.

Both of the Springboard students who participated in the testing found tagging the item tedious. I asked them if they had any solutions to this problem. One of them suggested having  a dropdown menu of every category and the other suggested having the picture at the top of the screen and the categories below it. I liked both of these ideas but to me, it wasn’t realistic to be able to fit the photo of the item and every category on one screen.

My Experience

I’ve learned a lot from creating Stash for my first capstone project. I had very little design experience when I started. I identified a real-life problem and invented a solution. I learned through research and user testing what was needed for Stash to succeed in the real world. I identified issues along the way and came up with solutions for most of them.

The design process was surprisingly difficult for me when I started making my high fidelity mockups. I have always had an artistic flair and I thought I could dive into Figma and produce a masterpiece with ease. It took a lot of trial and error to make the design for Stash. For example, I didn’t realize until I got to the prototype phase that each screen needed to be in its own frame. Looking back, it was an easy fix but it was a mistake I’m mildly embarrassed to admit. I also didn’t realize that when I created my prototype, I had multiple flows when it would have made more sense to just have one. Had I continued the development of Stash, I would make more tweaks and changes for the user to have a smoother experience.

Check out my prototype!