UX Designer

Centerpiece.png

Centerpiece

Case Study: UX Design, Content Strategy, Visual Design

Centerpiece: Helping every man find his style

The problem

When I worked in menswear retail, we were constantly fed data on our customers. And the biggest pain-point for men when it comes to getting dressed is: Most men aren’t educated in how to put an outfit together.

Like it or not, how you look says something about you to others. And in a lot of situations, how you’re perceived is important. Whether at work, or when your partner wishes you “dressed your age”, people’s perception of you can be influenced by how you are dressed.

 

Research


A tale of 2 men

I interviewed a group of 5 men. All were working professionals aging in range from their 30’s to mid 40’s. What I discovered in general is that there are 2 different types of men:

  • Men who are confident in their style: These men are very self-aware of how they look, and enjoy expressing themselves through fashion. They take the time to strategize what they are going to wear, but are always looking for styling suggestions.

confident_chris.png
“What can I wear with these shoes? This hat? This jacket?”
— Confident Chris
  • Men who are “fashion aloof”: To the dismay of their partners, these men aren’t aware of any guidelines to follow when putting an outfit together. But they do care enough to “get it right” when the occasion calls for it as to not embarrass themselves or their partners.

“My wife wishes I would dress better.”
— Alex Aloof
 

KEY FINDINGS

Affinity Mapping.png
  • PROCESS: The users I interviewed that fit into the Conifdent Chris persona, all had a similar ritual of creating an outfit which centered around a single “anchor piece.”

  • FIT: Both personas didn’t always understand how their clothes should fit their body.

  • STYLE INFLUENCE: Social media, pop culture, friends and family are all big influences in their personal style.

 

Competitive analysis

There are many avenues online that men can take advantage of to get educated about menswear and how to dress. They range from e-commerce sites and social media, to interactive dressing apps.

 
look.png
 
Mr_porter.png
 
look_icon.png

Lookscope: Create outfits using your wardrobe.

Mr. Porter: High-end menswear e-commerce and lifestyle.

 
 
WEAR.png
 
Youtube.png
 

WEAR: Social media sharing of fashion looks.

youtube_icon.png

YouTube: User generated video sharing.

 

opportunities

 
Ven Diagram.png
 
  • WEAR’s social media model is great, since results are from “real people” which adds to it’s credibility. But the app caters more to a fashion-forward audience of both men and women.

  • LOOK’s interactive concept utilizes real images of your actual wardrobe for you to mix-and-match. The interactivity was interesting, but LOOK’s experience was “clunky”, and it takes a lot of effort to upload your wardrobe images.

  • Mr. Porter is a great e-commerce/lifestyle site for men, but as a “high-end” menswear experience it may feel intimidating for most people, especially for somebody in the Alex persona.

  • YouTube is always a wealth of information, but you never know what to expect when it comes to the credibility and quality of user-generated videos.

Of all the competitors, I felt that WEAR and LOOK were the most interesting because of the interactivity. Mr. Porter and YouTube could be very detailed and elaborate, but not as accessible to Alex type personas. I believe my opportunity to improve on current solutions lies in creating an app that is interactive, in-depth and menswear-focused only.

 

Design Approach


Dressing well is a skill

When considering both personas, I realized that Confident Chris may have been like an Alex Aloof at one point in time, but eventually got educated in how to dress. For Alex, learning how to dress never really mattered, but at some point in his life, having the skill of putting a look together will.

I believe, in creating an app which helps Chris find styling solutions, I can simultaneously help Alex (or whoever is dressing him) with his need to become a better dressed man. If Alex chooses to continue and develop this new skill, my solution would need to be delightful and accessible enough to be of value to him, but also rich enough to be of value to Chris.

Education_chart.png
 

What is your centerpiece?

Chris’ testimonial was very insightful, “What do I wear with these sneakers? This hat? This jacket?” All the Chris personas I interviewed had a similar ritual when creating a look for the day. They would pick an “anchor piece” (sneakers, shirt, hat, etc.) then determine the rest of their outfit around that piece. The idea is very efficient and effective, yet simple enough for Alex to adopt as well, and perfect idea to build my solution around.

WEAR’s social-media platform, and the interactivity of LOOK were the best competitor features, and keeping this functionality to facilitate my finding a style solution would be ideal.

Storyboard.png
 

main user flow

The main user flow is the guided search for a “Centerpiece” garment through a large library of options to choose from. In an effort to add value to the experience, I’ve considered an editorial section (Learn More) for users that want to take a deeper dive into the history of the garment or “how-to’s”. This is something that wouldn’t need to be launched for the MVP.

Main User Flow.png
 
Screen_sketches.png

The images in the search flow should be large enough so users can easily find the piece they are looking for, or discover new types of clothing that might pique their interest.

 

Information Architecture

Since the guided search is the main feature of the app, it needs the most support. To truly act as a hub to discover menswear, the database must be very extensive and robust to accommodate as many options as possible for users to search.

Information_Architecture.png
 

Usability Testing


Login screen

PROBLEM: When given the task to “create a profile”, multiple users would interact with the username form field, as opposed to tapping on the “create profile” button.

Centerpiece_login_1.png
 
 

SOLUTION: By removing the form fields on the first screen, there is less ambiguity as to what the next step to take is. A consequence of this edit is an additional screen for the login flow.

Centerpiece_login_2.png
Centerpiece_login_3.png
 

Quick Search

PROBLEM: When given the scenario “Find results for a Blue Bomber Jacket”, Confident Chris type users, found it cumbersome to filter their search for blue, as they were expecting a filter earlier in the search flow. In this iteration, filters don’t come until step 4 of the search flow.

In addition, I had implemented two different types of search. One is for the main guided search (Home), and the other for a quicker search which bypasses a couple steps of the guided search (Magnifying Glass). This can be very confusing.

Search_options_1.png
 

SOLUTION: I brought the Quick Search (Magnifying Glass) out of the bottom navigation so that it becomes a shortcut in the main flow, rather than a competing search flow altogether. In permitting search terms to act as filters, search results appear 4 steps earlier than our first iteration.

Search_options_2.png
The “Quick Search” feature.

The “Quick Search” feature.

 

Final Prototype


By offering an interactive, guided experience through the task of composing and outfit, CENTERPIECE can help all men learn how to be a better dressed man.

User-generated content ensures the inspiration is consistently fresh and relevant. In addition, editorial deep-dives and How-To’s give users the resources to increase their “Style IQ”.

Thank you for taking the time to read my case study. Please take a stroll through the prototype. As a task, please do a search for a “Blue Bomber Jacket”.

View Prototype

 

Next Steps

Men’s style is in constant ebb and flow. With that said, CENTERPIECE will also have to evolve as trends come and go. There will always be a need for CENTERPIECE. Here are a few ideas as to where we can go to keep up with the pace of menswear evolution.

  • COLOR THEORY TOOL: An interactive tool to guide men in how to mix colors.

  • TAILORED MENSWEAR SUPPLEMENT: A supplemental experience which dives into the detail rich area of Tailored Menswear.

  • PRODUCT TAGS: Product tagging in order to allow for deeper dives into brand editorials or purchase links.