Style Me App
Choose an outfit for all occasions based on what you have in your wardrobe
The Brief
We were tasked with choosing a problem space, and then researching and designing an app solution for it. Having been given the freedom of an open brief, I quickly came to an idea I often hear friends and people in passing commenting on.
“I have no idea what to wear”
The sheer amount of time and thought that goes into planning an outfit for a special occasion certainly warrants a fun solution that helps us along in our every day lives.
The Challenge
Finding a way to help young women choose an outfit for a chosen occasion based on what they have in the wardrobe.
Team: Individual Project
Design Sprint: 2 Week Sprint
Role: Researcher | UX | UI Designer
Tools Used
Sketch, Illustrator, InVision, Photoshop,
Discovery
User Interviews
I conducted user interviews to help me gain some insights in to how people decide on what to wear, what their pain points are and if anything differs from day to day. Some of the key take away points I discovered are that most people plan ahead for big occasions. When it comes to day to day dressing it depends on their mood or what they are doing so usually pick and choose as they please.
However, making the best first impression was very important for every person I spoke to. My target audience put a lot more effort into choosing their outfits when planning for special occasions like parties, dates, interviews or starting a new job.
Mimi
“First impressions are important but choosing an outfit can
be time consuming”
Alysia
“I don't want to waste my nice patterned top on a dark night club night out”
Hannah
“give me my own fashion stylist
any day, choosing what to wear
is such a waste of energy”
Key Quotes:
-
Choosing an outfit is very time consuming
-
Weather plays a key factor
-
Being able to share outfits with friends
-
Making the best first impression
-
Planning ahead for more important occasions
Affinity Mapping
After conducting my user interviews, I jotted down all the main points on to post it notes to create an Affinity Map. The patterns and themes became obvious and here are some of the key findings.
Competitive Research
Before I began sketching out the screens for my user flow, it was imperative to check out the competition and also to learn from any mistakes they may already be making based on the needs of my users.
I found quite a few style apps already on the market, but none of them really hit the spot based on the information I received in my interviews. There was a lack of sophistication and a need to simplify the features.
At this stage, it was key to keep a simple layout to test out the function of my prototype.
Define
Personas
Based on my interviews, I was then able to picture who would be my main target audience and create a persona to keep their goals at the fore front of my mind when creating my style solution.
Introducing Anastasia…..
Problem Statement
Anastasia needs a way to choose an outfit for a special date because making the best first impression is very important.
Hypothesis: I believe that by creating a style guide which helps women choose an outfit based on what they already own will save a lot of time and effort.
After collating all my findings so far, I started to visually play around with my user goal, focussing on the ‘happy path’.
Develop
Paper Prototype
I then Sketched out various ideas for my wire flow, trying to concentrate more on the process. The first few screens focus on uploading clothing items to the app before going on to choose an occasion and then selecting an outfit. I soon became overly focused on the finer details. I then reminded myself that the best way to find out if something is working is to step away from the pad and test it.
Goal: Anastasia adds a few items to her app before choosing an outfit for her special date.
Prototyping and Testing
I conducted four paper prototype tests, to see how the flow works and if the main features were intuitive use. Here is some of the feedback:
-
Add a bottom navigation bar so users could get to other features easily
-
The camera feature also needed to be simplified
-
So I implemented these into some extra sketches before moving on to low fidelity in sketch
Iteration
So I added a bottom Nav bar as you can see on the right
Low to Mid Fidelity
Below are some of the key changes I implemented from paper to mid fidelity based on feedback.
Low to Mid Fidelity
It became clear that a home page with an instant ‘add item’ button was also needed.
Branding
Before moving on to High fidelity prototyping and implementing the changes from the second round of testing, I completed a branding exercise to decide on the final image of how my app was going to look. I did some brainstorming on brand affinity and brand comparisons to really start building on the personality I wanted my app to take on based on my main target audience. I created a mood board which is alway a fun experiment and actually takes a lot of thought to get it spot on.
The naming of the app
With so many options how do you decide on the name? So I asked around to get a feel for what was catchy with my main persona in mind. What started out as My Style then became Dress Me App, which is a nice play on words. However, the name already exists. So I settled on Style Me App .
Style Me App
The best friend in your pocket
Feminine
Gentle
Trendsetting
Brand Personality
-
Stylish but not Vogue
-
Confident but not arrogant
-
Playful but not childish
Mid Fidelity
The next round of testing contradicted some of the findings from the first round. I implemented these changes below.
Key Quotes:
“Remove the bottom Navigation bar” Hannah
“The drop down menu on the occasions screen is confusing” Tori
Onboarding
Due to the nature of the app, I wanted to include progressive onboarding so that users could quickly learn how to upload their current items to the app.
Deliver
Interactive Prototype Link
You can view the final, high fidelity clickable prototype on InVision here. In the mock-up, Anastasia uploads a couple of new items to her app, she then choses an outfit for her special date based on the chosen looks in her app.
High Fidelity Screens
Next Steps
-
Look of the day in association with instagram
-
Develop the calendar to store pre planned outfits and send reminders
-
Push notifications to encourage users to upload new items as they buy them
-
Links to online stores to buy items from inspiration guide
