Organizing your wardrobe — A UX Design Case study

😎Why you should consider me?

This is the project I have done to enhance the recommendation UX to reduce the need for compulsive shopping. I can understand and empathize with the users to generate solutions that truly solve the problem at hand. Therefore, you should consider me. Read along to understand how I did it. ⬇️

Pile of screens representing the UI designs.
The project type and my role in it.

📍 Method of approach

◾ Problem Statement

◾ Solution

◾ Project Overview

◾ Understanding the Brand

◾ User Persona

◾ Need for an App

◾ User Research

◾ User Empathy Map

◾ Pain Points

◾ Design Process

◾ Sitemap

◾ Wireframes

◾ Branding

◾ Style Guide

◾ Visual Designs

◾ Target Audience

🤔 Problem Statement

How might we design a seamless and hassle-free experience for the users to organize their wardrobe and help them pick their style for the day efficiently?

💡 Solution

To build a seamless and hassle-free experience for the users to organize their wardrobe, I designed this mobile application with user needs and business goals in mind.

Scroll down to know more ⬇⬇⬇

🔌Project Overview

We, being surrounded by information, are overloaded with them. Excessive consumerism leads to trendier and trendier clothes in our wardrobes. We are overloaded and frustrated with our clothes. Besides, people don’t want to repeat the same outfit. A study with 18,000 heads of households in 20 countries, conducted by relocation and removals company Movinga, revealed that the majority of the consumers around the world are highly delusional about how much they own versus how much they wear. The study concludes that “People do not wear at least 50% of their wardrobes”. One of the reasons for that is that our wardrobes are poorly-organized. Disorganized closets negatively impact our life — they waste our time and cause stress.

👑 Understanding the Brand

The company’s Name and Logo

Pick me is an apparel/clothing startup that aims at helping users with organizing their wardrobe. The tagline, ‘Your style today,’ depicts that the focus is to help you decide what you can wear on special events or daily, based on what you wore before. Through this application, you can manage and tackle the clothes, shoes, accessories, and other things you have in your wardrobe.

Organize your wardrobe with Pick me and view all your clothes at a glance. The vision to facilitate making better use of available attire can also help in reducing compulsive shopping. Which in turn might lead to less new clothes consumption and CO2 emission reduction.

👩User Persona

User Persona; Depicting the ideal user.

📱 Need for an App

The secondary research that I conducted to understand the methodologies and features adopted by apps in this domain suggested that having an app in the initial stages has the following benefits -

  • Easily decide outfits for all the occasions.
  • The wardrobe is generally unarranged, and it is hard to keep track of what we have.
  • Not lose clothes & accessories anymore.
  • It is hard to identify which particular dress you wore last time.
  • Get more from your wardrobe by mixing and matching your clothes and accessories.

🧪 User Research

To understand the user needs, I had some informal discussions with my friends facing the same issue. I observed and interviewed them while they created their event looks, packing a suitcase for a business trip, purchasing a new wardrobe item. The main findings from this were:

◾ There are times when clothing becomes a symptom of poor mood and distress.

A search result from web.
Source: 5 Signs Your Wardrobe is a Symptom of Distress and What to Do About it — Trulery

◾ It’s essential to make closets and wardrobes smartly organized so that users can see all their clothing items at a glance.
◾ Users must have full advantage of the clothes they already own, mix and match thoroughly.
◾ Users be able to curate their styles, just as simple as curating their social media profiles.

🙌 User Empathy Map:

I created an empathy map to understand the specific needs of the users.

Empathy Mapping of an ideal user.

😠 Pain Points

After conducting the research and analyzing the information gained throughout the process, I enlisted the major pain points that the users are facing. The major pain points were:

◾ No work-life balance which ends up them feeling frustrated

◾ Lack of motivation to arrange their wardrobe

◾ Often feels overwhelmed

◾ Lack of time-management

◾ The people who are introvert often ends up being confused and delusional

◾ Lacking on social life

Design Process

I decided to use five stages of the Design Thinking process because I wanted to validate my design decisions by user research, empathy, and feedback. Being an iterative process this approach helps in understanding the user, their challenges, assumptions with an attempt to redefine the problems. In order to identify alternative strategies and solutions that might not be instantly apparent with our initial level of understanding.

Depiction of Design Thinking Process

⛓ Sitemap

Taking the features I ideated and insights gained from research into account, I built the sitemap for the app.

Site Map; user’s navigation in the app.

🔨 Wireframing

Wireframe of the app designs made.

I iterated on the wireframes for the app to come up with layouts that serve the essential features of those pages without hampering the user experience.

After making rough sketches, I moved to Figma where I iterated with several different layouts for the screens as well as screen components.

🤵🏻 Branding

I explored different logo symbols and wordmarks for the startup. After some explorations being perfection obsessed, I tried designing one that represented the idea of Pick Me — Your style today.

Logo iterations and app splash screen.

🎨 Style Guide

From the wireframes, I chose a few crucial screens and experimented with different color combinations and typeface combinations.

  • Since it is a self-help app and users will spend more time staring at the screen, I decided on keeping the UI in such a way that there are no eye strains and users can use the app for a longer time.
Color palette used in the final UI.
  • I iterated in different font combinations before settling for ‘Handlee’ as the heading font and ‘Poppins’ as the body font. Handlee was chosen as it gave a charismatic and friendly vibe and Poppins was used due to its clean and modern ligatures.
Typography and its hierarchy used in the final UI.
  • I planned on using consistent icons with smooth corners so that they match with the personality of the product.
Various icons used in the app design.
https://feathericons.com/
  • After making rough sketches, I moved to Adobe Illustrator where I iterated with several different illustrations for the app with the screen components that can be depicted to be more user friendly.
Illustrations and its various functionalities.

✨ Visual Design

I iterated different layouts and used the component library to fasten the process. Then I designed different screens (taking into consideration the edge cases as well) for the app. I iterated and improved upon the visual designs based on the numerous feedbacks that I received.

▪Sign Up/Login using Mobile Number

  • OTP based sign up and login using a mobile number as it is a common sign up flow in the Indian context. This 3-step reduces time and allows for smooth signup/login.
  • Sign up and login through email for users who are more tech-oriented and familiar with emails. This process is short and fast to maximize user retention.
Sign Up/Log In navigation in the app.
‘Need help’, named bottom sheet design.

This Bottom-Sheet will be available on the Sign-Up screen. It will later be present on the profile screen to help the users with various issues that they might have.

▪App Walkthrough

Simple and minimal walkthrough showing the essential features of the app to the users. As I want to serve their needs with minimum clicks.

• Home Screen

High fidelity design of the Home Screen

Users can view their saved screenshots, recent pictures, and captures once they allow ‘Pick me’ to access their camera and gallery.

Through this approach, I have tried to solve the problem for users who have a tough time searching for that dress they saved once they wore it or saw someone else wearing it.

• Clothes Screen

High fidelity design of the screen named, Clothes

This screen introduces users to two new options, firstly ‘the camera’ and secondly ‘the Pick me instead’ button.

The screen keeps date-wise track of all the clothes captured by the user through the camera option given on the app.

• Camera Screen

This screen asks the users whether they want to take a picture from the camera or choose from the gallery.

Once the user selects an option and clicks a picture or chooses from the gallery, then it prompts another two options select box asking the user about ‘What is this?’, a ‘clothe’ or an ‘accessory’ to segregate that picture either to the ‘clothes screen’ or the ‘accessories screen’.

UI design for camera and gallery options.

• Pick me instead Screen

UI design for the screen named, Pick me Instead.

As the name suggests, the screen contains all the images saved by the user from the gallery. It may sound like an additional screen because clothe and accessories screens are doing it already but, my vision behind keeping the ‘Pick-me instead’ option was to have a separate section where the users can save the images of the look (i.e., including both the dress and the accessories), once they had represented on any occasion and wants to repeat the same.

• Accessories Screen

UI design for the screen named, Accessories.

Like the Clothes screen, this screen also introduces users to two new options, firstly ‘the camera’ and secondly ‘the Pick me instead’ button.

The screen keeps date-wise track of all the accessories captured by the user through the camera option given on the app.

• Profile Screen

UI design for the screen named, Profile.

The app walkthrough might be confusing and can take time for a user to have a grasp of it, therefore Watch demo, FAQs, Contact us, and Complaints options are available here.

Similar to the one available on the Sign-Up Screen in the form of a bottom screen.

🎯 Target Audience

The startup is focusing on Indian people based in urban areas who are mostly students, working professionals, or homemakers from age groups between 14 years and 40 years, having a decent income and a decent way of living.

Illustrations depicting the ideal Target Audience.
Illustrations made using Sub-continental (from Obvious)

That’s a wrap I hope you found it insightful. If you have any questions, feel free to reach out to me on LinkedIn, Instagram or website.

Thank you for reading till the end! Did you know? You can hold that clap button for a few seconds to give a maximum of 50 claps. I would really appreciate it. See ya!

--

--

--

I design user experience that boosts business conversation • Imagine | Create | Die

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

YoungInnovations Weekly #225

Converse branded Minigame for the SNIPES App to increase Brand Awareness — developed by Demodern.

Saavn: UX Case Study

Top 10 MOBILE APP ANALYTICS Tools Today

My Thoughts on WCAG 2.1

The 3rd anniversary of my design studio and things I’ve learned so far

3 ballons

Customer Discovery as a Team Sports

Types of Eyeliner and How To Use Them

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store

Nikita

I design user experience that boosts business conversation • Imagine | Create | Die

More from Medium

Case Study: Designing a Landing Page for an Architectural Journalism Event

Case Study: NOSH — A mobile app to help people fight snack cravings

UX Case Study Mixcloud App

YouYiSi: UX Case Study

Cover image