UX Designer

Centerpiece.png

Centerpiece

Case Study: UX Design, Content Strategy

Centerpiece: Helping every man find his style

The problem

Men’s fashion has been a semi-serious hobby of mine for some time. And when I worked at Men’s Wearhouse as an Art Director, we were constantly fed data on the landscape of menswear customers overall. A theme that consistently arises from this data is that: most men don’t know how to put an outfit together.

Although clothing taste is subjective, fashion as a visual representation is a discipline with age-old guidelines and traditions, which have created a foundation for men’s fashion. After many years of these foundations being broken, revisited and reshaped, men now have infinite ways in which to express themselves with their clothing.

As a personal project to show my design process, I wanted to explore if creating a mobile app that helps men dress better, could be an effective solution for raising men’s confidence by helping them find their personal style.

 

Research


User interviews

Goal: To get a general understanding of how men feel about the clothes they wear.

Methodology: I personally interviewed 4 men in a casual setting for about 20 minutes each and recorded the interview audio on my phone.

Participants: All participants were working professionals aging in range from their 30’s to mid 40’s. 1 was single and the other 3 were in a relationships. All came from different ethnicities and cultural backgrounds.

Research Questions: I structured the interview around 3 main questions below, and dug deeper when needed to gain more insight.

  • “Tell me about how you get dressed in the morning.”

  • “How do you gain inspiration for you personal style of fashion?”

  • “How do you validate that what you are wearing is a good choice?”

 

User Testimonials:

“What can I wear with these shoes? This hat? This jacket?”
 
“When my wife wants me to look good, she styles my outfits.”
 
“It feels good when I receive a compliment on what I am wearing.”
 

KEY FINDINGS

Affinity Mapping.png

After mapping out the data from the interviews, I was able to combine the info into 3 different categories.

  • Process: Most of the users I interviewed had a similar ritual of creating an outfit which centered around a single “anchor piece” of clothing.

  • Fit: All of them didn’t fully understand how clothes “should” fit their bodies, or had trouble with how clothes fit off the rack. Some would get alterations done.

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

 

A tale of 2 men

After synthesizing all the data from the interviews, 2 personas ultimately emerged.

confident_chris.png

Confident Chris: 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.

Alex 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.

 
 

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_icon.png

Lookscope: Create outfits using your wardrobe.

look.png

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

Mr_porter.png
 

WEAR: Social media sharing of fashion looks.

WEAR.png
youtube_icon.png

YouTube: User generated video sharing.

Youtube.png
 

opportunities

 
 
Ven Diagram.png
 
 
  • WEARs social media model is great, since results are from “real people” which adds to its 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 fun, but the 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.

I believe an opportunity lies in creating an app that is delightful in it’s interactivity; is focused on menswear only; and is in-depth in regards to content.

 

Design Approach


Dressing well is a skill

I realized the biggest difference between Chris and Alex is that Chris got educated in how to dress at some point in time, whereas Alex hadn’t. Finding new styling ideas through social media and pop culture is what keeps fashion enjoyable for Chris. For Alex, learning how to dress doesn’t really matter, until the rare special occasion occurs or his partner gets tired of him “dressing like a kid.”

I believe, creating a social media app focused on menswear will help Chris find new styling solutions. Showing actual looks from everyday people creates relevancy that users can connect with. And supplementing the user-generated content with in-depth editorials will solidify the app as a hub for menswear overall. If Alex ever finds this solution, its social media model would be familiar enough for him to easily start his journey in increasing his style IQ.

Education_chart.png
 

What is your centerpiece?

A common testimonial from most users was very insightful, “What can I wear with these sneakers? This hat? This jacket?” The users 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.

Storyboard.png
 

main user flow

The main user flow is a guided search for a “Centerpiece” garment through a large library of options to choose from. Users can also take advantage of learning more about their clothing from “How-To’s” and histories in the editorial section (Learn More). The editorial feature isn’t something that would need to launched for the MVP.

Main User Flow.png
 

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. For the MVP, I feel that the guided search, account creation and login features would suffice.

 
Information_Architecture.png
 

Lo-Fi Wireframes

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

Screen_sketches.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 5 of the search flow.

Also there are two different types of search. One is a main guided search represented by the home icon. The other is a “quick search” which bypasses a couple steps of the main search and is represented by a magnifying glass icon. Having both search options in the bottom nav may cause some confusion.

Search_options_1.png
 

Solution: I brought the Quick Search out of the bottom navigation so that it becomes a special feature within the main flow, rather than a competing search option in the navigation. In permitting search terms to act as filters, search results appear 4 steps earlier, compared to my first iteration.

Search_options_2.png
The “Quick Search” feature.

The “Quick Search” feature.

 

Final Screens


By offering an interactive, guided experience through the task of composing an 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”.

The main user flow (Happy Path).

The main user flow (Happy Path).

 

Next Steps

Men’s style is in constant ebb and flow. CENTERPIECE will also have to evolve as trends come and go. There will always be a need for CENTERPIECE. Here are a few ideas that I think could be added to the app to help keep up with the pace of menswear’s 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.