Back

Designing a clothing inventory app

👔👕👖👗👚👞👟👠👡👢

“Picking out your outfit in the morning takes time. Create an app that streamlines the process of planning what to wear and transforms what used to be a chore into something more enjoyable.” — Prompt from the Yelp Design Challenge

The Solution

This design challenge consists of three parts

The tools I used to complete this challenge were Figma, Whimsical, Photoshop and Sketch.

Competitive Analysis

One of the first things I did was to check to see what kind of apps were already on the market. I’ve never heard of anyone using a closet organizing or outfit planning app but there was a surprising amount of existing applications. This means that my new application needs to provide more value while addressing the pain points of existing applications.

Existing market of outfit planning applications

Existing applications:

User Research

In an effort to narrow down the priorities and goals for this application, through internet research and polling of my friends, I came up with 3 personas of users who would use an application like this:

Sam — The Busy Bee

Background: As a college student, Sam needs to juggle 6 courses, job interviews, exams, networking sessions, extracurriculars, sports and, social activities.

Motivations: Looking for something that saves them time.

Needs: Easy way to schedule in, view and plan outfits.

Wants: Discovery of new fashion trends, connecting/sharing with friends.

Dakota — The Influencer/Fashionista

Background: As a young influencer in a major urban city, Dakota is the definition of aesthetic. Dakota has garnered a large following on social media platforms. Various clothing companies have approached Dakota about a product placement promotion.

Motivations: Plan outfits that are on-point to grow Instagram following.

Needs: Sharing, and discovery of new outfits and trends.

Wants: E-commerce integration, easy and flexible way to add all outfits.

Blake — The Organizer

Background: A young white-collared professional, Blake has always been described by friends as a “neat-freak”. Blake essentially has two wardrobes, a “business-casual” wardrobe for work and a “personal” wardrobe.

Needs: Useful tools for classification of items.

Wants: Discovery of new outfits.

Ideation and Brainstorming

Factoring in our user personas, the three most important goals for this application will be:

  1. Saves time
  2. Promotes discovery of new outfits and styles
  3. Simple and easy to use for classification of existing outfits

Features

Based on these goals, and the earlier competitive analysis, I did some brainstorming on useful features and how they align with each of the goals:

Saves time

  • Weather-based outfit suggestions
  • Packing/Moving feature (pick out outfits for a trip)
  • Bulk add clothing items (to quickly add multiple clothing items)
  • Wash/Dry clean reminders

Promotes discovery of new outfits and styles

  • Ability to tag outfits as “worn in an Instagram post”, to encourage new outfits being worn on social media
  • Save pictures/clippings from the internet as “inspiration”
  • Social media feed
  • Baked-in sharing features
  • Hire a stylist/style consultation from others (professionals or others view closet and pick out outfits/suggest clothing items to purchase)
  • Shows outfits that are rarely worn and suggest donation/selling
  • E-commerce marketplace for clothing items (tells you about sales in your area that matches with your existing clothes)

Simple and easy to use for classification of existing outfits

  • Auto identification of key clothing item information (color, materials, type, make, model, etc.)
  • Powerful filtering (both auto and manual identification)
  • Crowdsource information about clothing items (think Yelp or MyFitnessPal but for outfits)
  • After taking a picture of the care label (with those labels that no one understands), auto add care instructions
  • Spring cleaning/closet categorization features
  • Accessibility: Assist people with visual impairments in choosing outfits that match
  • Export/Import: Adding in all your clothing items is a lot of work, allow users to import existing data or take data elsewhere

App Structure

Structuring based on 5 major categories

  • Explore: Outfit suggestions, social media feed, and discovery. This will act as the home page.
  • Calendar: Explore previous outfits and plan for future outfits.
  • New Outfit:Top level category to encourage the creation and scheduling of outfits, which is the primary purpose of this app.
  • Dresser: View, filter, and sort existing clothing items and add new clothing items.
  • Profile: Learn about personal statistics and trends, view your friends and postings.

Design Process

Branding

I decided to call this app Dresser. ****This is because the word Dresser can refer to a person who dresses well or a storage location for clothes. This simple word was also perceived as gender-neutral in my research.

Wordmark

App Icon

For the wordmark, I used Playfair Display a sophisticated, serif font which exudes class and style. I usually shy away from serif fonts due to lack of readability in small sizes, but the connection that serif fonts have with the fashion industry and the fact that this wordmark/font will only be used in large sizes (e.g. as a headline) made this a good choice for this project. The body font is Roboto which I chose to compliment the serif headline font and because it is mobile optimized.

The app icon is a simple clothes hanger, rendered in black on a white background. This is an internationally recognizable for clothing items/storage and made a good choice as an icon.

My brand values for this application are monochromatic, modern and simple. I decided to go with a monochromatic color scheme because outfits and clothing should be the focus in this app, not any of Dresser’s branding elements. This ensures that outfits and clothing is always front and center to the user. Another reason for this branding is an effort to keep the brand gender-neutral. Current applications have a strong focus on the female market, while I believe that the goals and features of the app are beneficial to everyone — regardless of gender.

User Flow Diagram

I started off by creating a user flow diagram to brainstorm all the possible paths and screens within my application and the interaction between them. I started with the main navigational screens at the top in yellow with other screens in white boxes. Items in clouds are functionality that hasn’t been fully fleshed out due to time constraints.

User Flow Diagram. [Click to view in Whimsical](https://whimsical.co/7cmnzpubjvcM345F4w1BWu).

Initial Sketches

Next, I sketched out some rough wireframes and designs in order to determine how to lay out the app. These sketches have been omitted in this case study due to the roughness of the sketches and my lack of access to a scanner.

UI Design

One of the first roadblocks I encountered was “what is the best way to display an outfit?” This is because an “outfit” is just an arbitrary combination of clothing item of different shapes and sizes. I want to display this information to the user in a way that is visually appealing but also logical.

For the first iteration, I picked a linear display style due to ease and flexibility (as seen in the first iteration). After some user research and feedback, I realized that a mannequin style view of an outfit is better. This is because, in the first iteration, a suggested outfit is de-emphasized and displayed next to other cards, which makes it hard to tell what is important to the user. A mannequin style view brings more prominence to outfit selection, which is the main function of the app.

Home/Explore screen evolution. [Click to view a link to the first iteration prototype.](https://www.figma.com/proto/3yRUBisMqUJqp4su0gBrJM/Dresser?node-id=516%3A14880&scaling=scale-down)

In the final iteration, outfit selection is the main focus of the home screen, making it easy to and encouraging users to pick and explore outfits. The screen was also made less information dense and rounded corners and harsh drop shadows were toned down. The cards now peek in from as secondary information instead of having the same level of visual importance as the suggested outfit.

Final iteration of the Home/Explore screen

Other Screens

Learnings

Challenges

  • Jumping to high-fidelity designs too quickly (this can cause designers to get too attached to their designs)
  • Ideally, every single screen has wireframes and is spec’d out before moving to high-fidelity mockups
  • Finding product photos were difficult
  • Time constraints

What’s Next?

  • Re-design calendar screen — Personally I think it’s too cluttered and a vertical image list of clothing items is not the best way to display this
  • Mockup and create all the other screens
  • Business case analysis of the product
  • Feedback cycle with other designers
  • User testing

Credits

Thank you to the Yelp Intern Program for this challenge and all my friends who provided input.

Images