Outfit Now

Objective

Come up with an app concept, research, wireframe, prototype, test, refine, and pitch the idea.

Responsibilities

UX design: market and audience research, surveys, synthesis, personas, card sorts, site maps, wire framing, prototyping, and usability testing.

So what exactly is Outfit Now?

The problem

It is challenging to dress stylishly and appropriately for various occasions when in a rush to leave the house. Recalling outfits that have worked well in the past can be difficult without a way to keep track of them. Trying on various combinations of clothing every day wastes time, creates a large mess, and may make you late. What if there was an easier and more efficient way to get dressed stylishly in the morning?

Initial concept

Make knowing what is in your closet more accessible for busy, trend-conscious people that want to pull together stylish and occasion-appropriate outfits quickly to save time getting dressed. We will create an app that will list and sort clothing items already in a person's closet, keep records of favorite outfit combinations and when they were last worn, and save these outfits in a log for future reference.

Research

Market Competitors

We researched the market for comparable apps and the ones we found were geared to a few specific users: 

1. fashion bloggers
2. fashionistas, those creating online lookbooks & wishlists 
3. fashion-forward brand conscious online shoppers
4. people seeking input on their outfits from other users/friends  

Cloth: Emphasis on personal style. Users take "selfies" to catalogue their outfits in existing wardrobe. Tracks local weather data and pulls weather appropriate outfit suggestions based on what users share. 

Stylebook: Sophisticated, versatile & comprehensive app. Pinterest integration.

WiShi: Catalogues outfits based on event/activity. Images are pulled from exisiting online stores. Purchase item link provided. Phone app allows users to photograph images from their own wardrobes.

Mod Man: Lookbook shopping app geared toward men. Emphasis on shopping for new items, rather than using existing wardrobe.

Survey

After doing some initial research and finding the market was pretty saturated with closet apps for fashionistas, we decided to conduct a survey to find out how people related to their closets and fashion. We wanted to see what we could provide them with that the closet app market was still lacking.

Survey Results

Survey takers wound up answering differently than we assumed they would. Though they cared about their appearance (for confidence, for professional environment, and for first impressions), they were not highly interested in the latest fashion trends. They cared about looking appropriate and being comfortable.

There were interested in:

• Saving time
• Getting organized
• Being cost-effective
• Getting more use out of items they already own

They were less interested in:

• Novel fashion trends
• Saving a record of outfits they had previously worn

They did these activities:

• Try on several outfits when getting dressed
• Borrow items from friends or wish they could
• Add new items to wardrobe once a month or once every few months
• Wear between 40-80% of their wardrobe

They did not do these activities:

• Plan outfits far in advance
• Wear 20-60% of their wardrobe

Revised Concept

Make optimizing your wardrobe easier for busy people moderately interested in fashion. We will create an app that will list and sort clothing items already in a person's closet, randomly aggregate and suggest clothing combinations, and save these outfits in a log for future reference.

This app is all about: 

• Convenience
• Organization
• Being economical

Primary User

Busy middle class professional who values their outer appearance but does not consider it the most important thing to be concerned with. They have a desire to dress well in order to look appropriate for work, to be comfortable, and to feel good about themselves.

They follow fashion trends for fun, and they like to be current, but actually buying every new trend is exhausting and expensive. Their wardrobe is mid-sized, made up of mostly low to mid-range brands, but 20-40% of their wardrobe hardly ever gets worn.

It is difficult to get dressed because of various inconveniences including: weather, clothes not fitting right, unsure of what to wear for the occasion, can’t find what they need/can’t see all their options, and feeling like their wardrobe is outdated/lacking in variety.

They generally don’t borrow clothing from family or friends, but wouldn’t mind it as an option. They mostly just want to find ways to see the full potential of their existing wardrobe, and get more use out of what they already own. It would be nice to know what items in their closet are getting neglected. It also would make their life more convenient if they could more easily find an appropriate outfit that makes them feel good about themselves when they are rushing out the door, so they can spend time and energy on other things.

Personas

These personas illustrate two examples of our primary user. Both are busy professionals that either don't know about trends or don't care to spend a lot of money or time following them. They have a desire to look good and utilize their wardrobes to the fullest potential. One seeks to be organized and efficient. The other seeks help and feedback when getting dressed.

Storyboarding

After we revised the main purpose of the app and had a better understanding of the type of user we’d be helping and what their needs were, we began to brainstorm potential features that our app would have.

Rapid storyboarding with pen and paper helped us visualize different high-level scenarios in which a user might need our app, which helped us understand user motivations, and what we needed to provide for them.

Features

We dreamed up quite an extensive list, ranging from the most basic features (like adding items to your closet) to more entertaining and engaging features like following friends, or being able to randomly generate outfit suggestions.

Basic

• Add items to your closet
• Categorize items in your closet
• Browse the contents of your closet
• Put items together to create outfits
• Create packing lists for trips

Performance

• Daily push notifications
  • Outfit suggestions according to the weather
  • Outfit suggestions according to your event calendar
  • Personal stylist suggestions
• Collaborative/Social
  • Follow friends
  • Get advice/approval from friends
  • Give advice to friends
• Gamification/Levels of completion
  • Daily questions/prompts
    • What’s your favorite outfit?
  • Add what you are wearing today to your closet.
• Monetizing
  • Affiliate marketing model
  • If you link to store you bought item from, you earn commission/discounts
  • Clothing swap
    • Borrow/trade clothing with friends
    • Sell clothing you don’t want

Delight

• Customize the appearance of your closet (making it look like a real-life closet, etc.)

Card Sorting

We ran two simultaneous card sorts -- one featuring items of clothing with an intent to learn how people categorized various items of clothing that ranged in style and color. The other card sort was used both to learn what people thought of potential features for our app, but also to discover if the language we used to describe each feature made sense, and how users thought about the flow of information.

The card sorts proved useful in many aspects of the project -- for example, we found that people categorized clothing in many different ways. Some people sorted clothing by color. Others by gender. One lumped all of the "bottoms" -- pants, shorts, skirts and even dresses -- into one category and "tops" -- shirts, jackets, and purses (because they hung from the shoulder).

Because of this, we decided for the app, it would be best to guide people through the categorization and organization of their closet by creating prompts and questions. Giving users choices of what to tag their clothing items as was easier than having them come up with their own, though certainly if they wanted to create their own categories, they could.

Site Map

The card sorts we ran also gave us many insights on how information and navigation should be structured, so we used the results to create a final site map. This site map was very extensive, and we needed to create a smaller one with just the most essential features which would be used to build our wireframes and prototypes for user testing.

MVP Heat Map

This minimum viable product analysis heat map, illustrates the decisions we made when deciding what features to focus on.

The green portion represents the basic, “must haves” -- the features that make up the essence of the app -- the elements that serve our main users desire for organization and convenience.

The orange portion are the performance features, or those things that would set us apart from the competition.

The blue portion of the map contains our delight features, or the things that would make the app stand out, be much more enjoyable and enhance the overall experience, but are not part of the app’s essential function.

For the sake of our prototyping and usability tests, we focused on the features in the green and yellow areas.

Wireframes

We created wireframes in Balsamiq. These wireframes would serve as the basis for our prototypes that we would make for usability testing. 

Interactions

Log in: A button that expands/sides down into a form field

Browsing closet items: Flicking through images like going through clothes on hangers

Breadcrumbs for adding item to closet: Each step slides sideways to show progress/steps in a process (part of previous and next step will always be on each side of the screen)

Outfit generator: Item you like fixed on the left side of page with items you are browsing to match scroll along the right side

Prototyping

We created clickable prototypes in Balsamiq for our primary features:

1. Adding an item to you virtual closet
2. Creating an outfit out of multiple items

Usability Testing

Test Summary

The usability test conducted was a quick low-cost hallway test. Test subjects included members of 1871 and members of the Starter League unfamiliar with Outfit Now.

Test Instructions

1. Think out loud: tell me what you are looking at, what you are trying to do, and what you are thinking.
2. Before making any selections on the screen please tell me what you are going to select/click.
3. If you read anything on the screen please read it out loud.

The Tasks

1. Add a pair of jeans to your closet.
2. Create an outfit (pink shirt, jeans, and blue shoes) and save it to your closet.
3. Generate an outfit to wear.

The Results

We found three primary usability issues in our testing: 

1. Button hierarchy/user leading
2. Word confusion/button branding
3. Cancel reassurance/exist pathways

Visual Design and Brand Attributes

After refining our prototype based on the issues encountered during usability testing, it was time to consider the visual design of our app.

What were Outfit Now's brand attributes?

What tone did we want to set for those using the app?

We decided on four attributes:

• Clean
• Fresh
• Fun
• Organize

We wanted to convey organization, simplicity and ease by keeping the design simple. The wood paneling element gave the sense of a closet, without seeming too closet-like.

Future Planning

This entire process helped us envision the future for this app. While this app has a very utilitarian focus, it has the potential to be built out in order to appeal to fashionistas as well without alienating our average users.

Implementation Phases

Utlitarian Features

• Adding/browsing items in closet
• Creating outfits and packing lists
• Daily push notifications
• Personal stylist
• Tracking laundry

Social Aspect

• Interacting with friends
• Gamification

Monetizing Aspect

• Affiliate marketing
• Clothing swap