That Really is Top-Drawer!

A Helpful Fashion App To Assist Finding An Outfit

Nathan Davey
4 min readDec 8, 2020

Project Overview

A concept mobile app created during a one-week project as a General Assembly student.

We’ve all had panic moments when desperately searching for clothes you know were in your room. Now you can’t find them, the clock is ticking, important events await, the first sign of perspiration appears.

Top-Drawer is an organisational fashion/outfit mobile app, which assists users in quickly finding desired clothes and outfits.

Below, using the double diamond process, you can see the stages I went through as the sole UX designer.

Stage 1: Discover

Learning about Flo’s pain points.

I was lucky enough to be introduced to my project partner, Florence (Flo), who was awesome!

To summarise her key pain points, she wanted an app that could help in:

  • quickly selecting an outfit suitable for any event I attend, whether that’s going to work or meeting friends, without having to dig through masses of clothes”.
  • Finding an appropriate outfit when there are time constraints.
  • Knowing what clothes are available at any one time.

User Insights

Two interviews helped gain an in-depth understanding of Flo’s motivations, behaviours and pain points. I would focus on the following:

  • An app that isSimple and easy to use”.
  • Being able to see what clothes she has available at any one time.
  • Help reduce overall clutter.

Creating an Experience Map

Flo talked me through a recent experience she suffered when meeting some friends. She was urgently trying to locate a shirt that hadn’t been worn in a while but eventually had to settle for her second choice after no success, disaster!

An Experience Map highlighted Flo’s emotional state during this scenario:

Experience map to pinpoint the main paint points for Flo

From here I was able to produce the following problem statement:

Flo needs a way to easily select an outfit appropriate for an event, because she has an overwhelming amount of clothes to choose from.

Stage 2: Define

Creating 6 ideas and producing an outcome statement.

Ideations

I produced 6 ideas, challenging myself to think of ways to help Flo and prevent frustration:

I created 6 different ideas

Ultimately, I combined idea 1 (Clothes Scanner) and idea 2 (Clothes Picker).

Why, you may ask? Speaking to numerous people, I concluded that idea 1 and 2 combined would give Flo the best value when finding clothes, being able to scan items onto the app and later using the app to locate them. I also came up with the name of Top-Drawer for the app.

Outcome Statement

Sketching a storyboard and an accompanying outcome statement helped illustrate Flo’s pain points and showed how the app would solve this:

Phase 3: Develop

Creating a user flow, and producing a paper prototype to gain feedback.

User Flow

A user flow enabled me to map out a path users would take, using the app:

What path would a user take whilst on the app?

Prototype time

I was excited to begin!

Sketched prototypes enabled quick testing on users, allowing me to observe behaviours, gain feedback and get a feel for the overall functionality of the app.

Below you can see initial, rough sketches. I then used the prototyping app ‘Marvel’, to produce an interactive version.

Happy paths showing the journey a user would take using the Top-Drawer app

Putting Top-Drawer to The Test

Testing on two users revealed the following:

  • Users wanted to see a bottom navigation “for quicker and easier navigation.”
  • Prompts to confirm that an item has been added to a drawer.
  • Pictures and/or descriptions of items, once scanned on, to confirm it is the correct one would be useful.

Insights on board, I made changes. I incorporated a navigation bar at the bottom and added a confirmation page for scanned items.

Phase 4: Deliver

Creating a final concept piece.

Taking on the feedback and keeping myself in Flo’s shoes (not literally), I produced the final prototype:

Conclusion

Overall, an amazing project. Meeting Flo, understanding her pain points and learning new techniques such as experience maps, user flows and storyboards really was top-drawer!

Key Learnings

  • The UX process — As a complete novice at the start of the project, it was amazing to see my skills and knowledge grow in such a short space of time. Learning about the double diamond process was key to a successful project.
  • Interviews — I’ve always had a fascination with people and getting to know them on a deeper level. Being able to transfer this into the world of UX was something I thoroughly enjoyed, being able to really hone into user’s pain points and gaining insights from user testing.

LinkedIn

Please feel free to message or connect with me on LinkedIn!

--

--