UI UX Design | Motion Design

Magic Wardrobe

A personal stylist on the phone for women.

The Problem
  • Before starting a conversation, people always gain the first impression of one another by their outfits. Especially in social situations, people increasingly pay attention to their clothing. With the complexity and diversity of women's wear and the vast amount of fashion information keeping updating, it is hard for a woman who is not a fashionista to grasp the gist within a short time.
The Solution
  • Magic Wardrobe is a mobile App that allows users to create a digital version of their closet. The App assists users with their clothes matching decisions by providing color scheme along with examples, smartly matching the pieces inside the digital wardrobe based on the fashion trends database. It also allows users to save their favorite matches into lists for the future use.
My Role
  • UI/UX Designer
  • Motion Designer
Tools
  • InVision
  • Illustrator
  • Photoshop
  • After Effects
Time
  • 2016

Interactive Prototype

image

Discovery

The Importance of Clothing

We are always told not to judge people by the way they dress, but we have to admit that our clothes make a huge difference to what people think about us. According to the survey that carried out by Joanna Williams, Head of Brother UK Marketing and Communications, shows over half of the women admitted that they judge their female colleagues based on what they wear to work, and over a third reported worrying about what people think if they wear the same clothes too often. Your clothes give people a first impression and that can go a long way. "The impression you create may affect future job opportunities, collaborations or other important matters," says James Uleman, Ph.D., a psychology professor at New York University and researcher on impression management. Most importantly, science says that the clothes we wear would even affect our behavior, attitudes, personality, mood, confidence, and even the way we interact with others. For example, wearing power clothing makes us feel more confident and even increases hormones needed for displaying dominance. This, in turn, helps us become better negotiators and abstract thinkers.

From what has been mentioned above, we may come to the conclusion that if we could develop an App that could help women improve their clothing styles and taste, they would:

Change people's judgement.
Build a good first Impression.
Shape their personality in a good way.
Difficulties Women Come Across When Managing Their Closet

I interviewed 10 female students on the difficulties they come across regarding managing, matching, and shopping for clothes to get an idea on how I can help them. The problems are as follows:

  • The vast amount of fast-updating fashion information is hard to manage.
  • Because of impulse shopping, most women's closets are overwhelmed.
  • Most women have unworn but actually really good pieces because they don't know how to match them and make them alive. Those unworn clothes become a burden as they are a waste of money and take valuable spaces of the closet.
  • They find it hard to make choices in a clothing store if they don't have the knowledge of clothes matching and a sense of current fashion trend. They would need a guide.
Competitor Research

I did some competitor research to see how other products were tackling this issue and picking out the things I didn't like and could be done better:

pic

Persona

Pic
Jessica

Jessica is a 4th-year college student who is preparing for her post-grad career. She is introverted and afraid of giving a speech in front of a group of people. She doesn't know much about clothing styles and always wears T-shirt and jeans. She always wants to change her outfits style, so she purchased a lot of different items she would like to try but end up without knowing how to match them appropriately. This results in a lot of unworn items in her closet.

Goals:
Build up confidence.
Become more socially active.
Take advantage of her unworn items.
Change her look to be more elegant and professional.

Solution

Based on the research found in the discovery section and the persona created, the mission, goals and needed features were already pretty clear.

Mission:

Give women immediate matching suggestions on the clothes they already have according to the fashion trends. Help them manage the closet and reuse the unworn items.

This will be achieved through these goals and features:

Learn the rules

Provide color scheme along with sample outfit pictures as examples to teach users the color matching rules.

Manage

Allow the user to archive their clothes in a digital wardrobe. Automatically categorize the clothes based on type, color, season.

Get shopping inspiration

Provide outfit examples for a single item (perhaps an unworn item) that the user chooses in her digital wardrobe.

Immediate suggestions

Smartly match the items for the user in her digital wardrobe.

Customize sets

Allow the user to match the items themselves.

Save for future use

Save favorite outfits into lists.

So, I started to create the App flow and wireframes.

Pic Pic

High Fidelity

Having planed out the App flow and wireframes, I moved on to Photoshop and After Effects to create the high fidelity mockups and the animation.

cover-to-menu
Home

The App aims to guide the user clothes matching in 3 ways:
Color Scheme
My Wardrobe
My Favorite




Color Scheme

The top bar is the navigation for the color theme. The colors are divided into 7 different themes to allow the user to quickly locate a color.

my-wardrobe



When the user picks a color in a theme, it will provide matchable colors. Since only looking at the color palette is too abstract, it will also provide sample pictures to help understand.




My Wardrobe

Most competitors' App display user's items with actual pictures. But I designed it to display them with clothes type icons so that the user can get the features at a glance. It would also teach them to identify the types of the clothes, help them figure out how many similar items they have. The user can 3D touch (ios device) the icon to view the image and details of the item.

my-wardrobe
match



Match

The 'MATCH' option allows the user to freely match two items in the wardrobe. The user would first pick two items and tap 'MATCH'. Then she can take a picture for this collection and save it to favorite.




Smart Match

The 'SMART MATCH' option will automatically generate a collection based on the attributes of the items and the fashion trends database. If the user doesn't like the first collection, she can tap the refresh button to get another one.

my-wardrobe
match



Example

If the user picks one item (perhaps an unworn item) in the wardrobe and then tap 'EXAMPLE', the app will give matching examples of a similar item. This will help the user reuse unworn items, explore new matching strategies, figure out the items she lacks and work out a shopping list.




Add Item

Users can add items to the wardrobe by entering the features and uploading the image of the clothes.

my-wardrobe
match

Summary

Constraints:
  • It is basically a tool that help people with their styling problem and closet management, it does not create profits for the app producer.
  • No social interactions.
  • The App does not apply to the minorities that has restrictions on clothing.Since the fashion trends is changing rapidly, the database will need to be updated frequently, which will increase the cost.

Future Directions:
  • Collaborate with some brand clothing stores, provide matching strategies of the clothes in the stores, or recommend the items in the stores that could perfectly match the one in the user's wardrobe.
  • Simplify the process of adding items by letting the user scan the barcode or QR code on the tag of the clothes, or by simply taking a picture using AI technology to identify the features and upload in a second.

Previous Project All Projects Next Project