MOOD

End-to-end Personal Project:
Fashion Discovery Site.

MY ROLE

CONCEPT / USER RESEARCH / DESIGN / USER TESTING

MOOD DELIVERABLES

Problem

Take a look at any fashion forum and you'll notice that the same question comes up over and over, 'what should I wear'? Feelings of self-worth, fears of not fitting in, and other core questions of identity lie only slightly below this seemingly simple question.

While different people have different needs, the common thread is that for many people, getting dressed can be a much more challenging task than simply putting on clothes.

Hypothesis

By offering a style service that can help users select what outfits to wear based on different variables, MOOD seeks to help every day people decide how to present themselves to the world, one outfit at a time.

Process

'I'm going to party where I don't know anyone... what should I wear?' is ultimately a question around 'what do other people think about me,' 'how do I view myself,' and 'how much do I really care?'

Someone who is using a style service may often have many underlying emotions that need to be met with practical solutions.

In order to find out how MOOD could deliver results on both a practical and emotional level I had to discover who my users were and what was important to them. So I dove in head first to my UX Design Proces involving:

User Surveys

I started first by casting a wide net with an approachable 12 question survey to understand users’ preferences and frustrations with their fashion discovery process as well as their online shopping habits.

Completed by 73 users of all ages, predominantly female, sourced from Reddit, Social Media and Personal Contacts, the survey resulted in a wealth of fascinating feedback.

Survey Results

* 43%: Percentage of respondents who are "Millenial Women" ages 25-34.

* 63%: Percentage of Millenial Women who shop for clothes online.

* Top 3 qualities of choosing new clothes: Fit (39%), Price (24%), and Comfort (14%).

* Favorite 3 aspects of shopping online: Best Prices (33%), Save Items for Later (17%), and Convenience (14%).

* Biggest frustrations of shopping online: Can't Try On Clothes (70%), Inability To Determine Fabric Quality (18%), and Returning Items (10%).

* In choosing what to wear, 45% of respondents tend to "open their closet and see what's there," while 29% of respondents will first "think about what other people will be wearing".

* 71% of respondents had problems deciding what to wear in the morning.

Target User

Based on these overall responses, it became clear that "Millenial Women", ages 25-34, are the most likely group to shop for clothes online and thus the best target user to start with.


Overall Results

It was also clear that, regardless of different specific needs, most respondents need some help with deciding what to wear. The biggest factors included price, fit, and quality, with several other important variables informing their decision.

User Personas

My survey results helped clarify my direction with MOOD but also brought some new ideas to the table. What motivation was behind those respondents who complained about their clothes being messy or disoraganized?

For the users who mentioned feeling overwhelmed when shopping online, what were some of the ways that pain point could be aleviated? It was time to get to know my users with some in-depth interviews:

Persona - Angelique
persona - rachel
View Personas

After these concrete conversations I was able to keep my interviewees in mind when designing MOOD. I had found that there were several ways to address users' peace of mind when considering what to wear.

It was all about striking the perfect balance between giving options, allowing users to feel "in control," as well as establishing parameters to keep users from feeling overwlemed.

User Stories, Flow & Journeys

Now that I had figured out my users’ needs, motivations and potential pain points I could start designing what solutions MOOD could offer offer.

I first needed to create user stories to prioritize which features would be important must-haves and which features might be added on later, perhaps as part of a paid subscription.

I drew out how each of these features of MOOD would work in a step-by-step process of user flows and then put that data back into a human context by creating a User Journey Map, both of which you can see below:

Market Research & Competitive Analysis

The next step was to see what other fashion websites were offering, and explore how they position themselves in the marketplace.

Competing Brands

Refinery29

Fashion & Culture Blog

Poshmark

Clothing Marketplace

MM LaFleur

Bento Box Stylist

Rag&Bone

High End Brand

Taking a look across many different kinds of companies, I was able to examine several aspects of what is already being offered online and then find the sweet spot where MOOD could exist.

I conducted a highly focused competitive analysis to find out: what each company offered, whom they offered it to, their branding angle their strengths, and their weaknesses.

As a result, I explored how I could most strongly position MOOD in terms of functionality, audience and, of course, branding.

Branding: Creating a Visual Identity

As a result of my competitive analysis, I found that there are generally 2 types of fashion website aethetics: Bold & Classy. Typically, blogs and more avante-garde brands can afford to push the aesthetic boundaries on their site.

Whereas, if a fashion site is selling something directly to the user, they have to err on the side of classy. This breaks down a little something like this:

Blog Aesthetic

Blogs & Avante-Garde

  • Big Borders
  • Bright Colors
  • Awkward Spacing
  • Hard Angles
MM Lefleur

E-commerce

  • Full Bleed Images
  • Hard Angles
  • Gentle Colors
  • Use of Purposeful Italics
Rent the runway

Combination

  • Full Bleed Images
  • Gentle Theme Colors
  • Use of Brighter Images
  • Some Blocky Layout

All of the sites tended to use black, blocky fonts for titles and most sites used a black & white theme to denote seriousness and hipness.

Since MOOD seeks to appeal to a variety of users with different needs it was important to strike a balance aesthetically. MOOD needed to promise "cool" as well as "classy" and of course, since it is essentially an e-commerce site, "security."

So I borrowed a little bit from each of the two aesthetics starting with a Black & White color scheme with some nice accent colors.

Color Scheme

Theme 1
#000000

Theme 2
#FFFFFF

BG 1
#FFFAFA

BG 2
#FBC2b5

Action 1
#C2948A

Accent 1
#332724

Name

I knew from the get-go that I wanted to call this website MOOD. First off all, this is a website that takes users moods into account when suggesting outfit options. Secondly I based it off of a popular hashtag on Instagram.

#mood Definitions

Logo

Drawing inspiration from the other fashion sites from my comparative analysis I put an emphasis on big black block letters as a part of the logo itself and utilized an angular approach, surrounding the logo with a solid black square. Trés cool.

Typography

I knew I needed a big blocky font for the titles and wanted a gentler font for the body. So, I looked on Font Pair for typography inspiration to find fonts that would both go well together and also be supported across all sites.

Titles: I chose Lato for its bold, clean look. I mainly used it in bold typeface with all caps, but also used it for official-looking subtitles.

Body: Merriweather was the perfect fit for the body font. With a softer aethetic than Lato, it was able to provide a more human feel to the site.

Special Alertis: Merriweather also has an elegant italic typeface that I used to help convey the classy side of MOOD.

Typography

Low Fidelity Wireframes

With all of the components in place it was time to put the ideas into design practice. I started some rough sketches in a notebook and then brought these ideas into Greyscale Mockups to flesh out digitally.

Greyscale Mockups

Mood Greyscale Outfit Mood Greyscale Item Mood Greyscale Checkout
Visual Design Process

I was happy with the general concepts of MOOD, but did it make sense to the users? I had to dive into some Usability Testing.

My first step was to test out the 2 Landing Page design options and see which one worked best using A/B testing.

A/B Testing

Option A: 33%

This?

Mood Greyscale Landing A

Option B: 66%

Or this?

Mood Greyscale Landing B
Usability Testing

Option B was clearly the winner but that was merely the tip of the massive iceberg called 'usability testing.' Next up it was time for in depth interviews with users testing out my mockup prototype for the first time.

I guided each user through the process with this usability testing script and watched their actions and listened closely to what they had to say.

All in all, each user was excited about the concept of MOOD but there were some specific issues that were getting in the way of MOOD becoming its best possible self.

Here are the issues my users found and the resulting changes I made.

Usability Testing Process

Landing Page - Before

Landing Page - After

User Problem 1: What is a Closet?

User Problem 2: How can I search for a specific clothing item?

Solution:

Users were confused about the "Closet" function that appeared in the navigation links and felt that there were too many new concepts all at once. Users were also confused what the "Search" function did since at first there wasn't a catalog listed.

By taking away the "Closet" navigation link and replacing it with a "Catalog" navigation link, it gave users access to a searchable catalog and took away the distraction of what "Closet" meant in the first place

Outfit Page - Before

Outfit Page - After

User Problem 3: Is the Weather function local? What about when you're traveling?

Solution:

Because many users take the weather into consideration when getting dressed or packing for a trip, I changed the layout to allow users to enter in their specific information instead of having it autmatically populated from the local weather.

User Problem 4A: How can I find the right fit by searching for my favorite brands?

User Problem 4B: How can I find the right fit by looking at other people's reviews?

Solution:

Finding the right fit is 75% of users greatest frustration with shopping online. So providing as many ways as possible for users to figure out what will fit best was a priority. I added a function to help users search by their favorite brand, and added a comprehensive review section. This was especially important to my users who described themselves as having curvy body types - the review section provided them with the best way to know whether something would fit right.

Learning from my users' issues with MOOD I was able to take their feedback and develop the full site to be as user friendly as possible, adding in all the colors and styles to make it shine.

Style Guides

Because MOOD is a responsive website, I needed to make sure that the same elements and styles I used on the web version would feel the same on a smaller mobile device.

So, I create some style guides for myself and potentially anyone else who joined the MOOD team down the line.

Style Guides

Responsive Design

Because MOOD will be seen on full screen and mobile devices I kept that in mind while creating the full screen mockups. Every page was made out of components that could easily be used just as effectively, even when arranged slightly differently, on a mobile screen.

Final Prototype

From a continous feedback loop of user research, feedback and implementation, I was able to take MOOD from a broad idea about how to choose an outfit down deep into exploring why a user is motivated to seek out fashion advice in the first place and how to solve their anxieties with a powerful tool that is easy to use.

Want to see the full site? Take it for a test drive below.

Conclusion

Next Steps

Because this is a concept that sells a physical product, any mistakes during implementation could have a serious financial impact.

Thus it would be important to start small with an MVP version of the site that suggests outfits without offering a way to buy the products. By starting small, my team and I could gather in-depth user feedback and conduct more usability tests with a much larger sample size.

In Conclusion

MOOD is a fun concept that would require a whole lot more work to get off the ground. As a UX Designer I was able to learn a lot about the underlying anxieties and motivations of online fashion shoppers, and would welcome the opportunity to work more on this or other fashion projects.