UX Designer

MWhero.png

Men's Wearhouse

Case Study: UX Design, Art Direction, Visual Design

Men’s Wearhouse: Millenial dilemma

Project Brief

Men’s Wearhouse (MW) has been around for 40+ years. It would almost feel “un-american” if you hadn’t experienced renting a Tuxedo from them. But in 2018,  MW’s big marketing problem was to “combat the negative perception among Millenial and Gen Z audiences that Men’s Wearhouse is an outdated brand.”

Website KPI goals for 2019 were provided to guide the strategy:

  • Increase coupon registrations

  • Increase site visitors to lead conversion rate

  • Increase event creations

As Art Director, my role was to lead the effort in redesigning the website’s UI to appeal more toward a new generation of customer, and visually align with our overarching marketing strategy across multiple channels (social, broadcast, media).

 

Research


Bridal Personas

Bride+Persona_2.jpg

Brides: Millennial, multicultural. The primary driver of the wedding planning. She knows exactly what she wants for her wedding. It’s important to her that her groom and his guys look good and is very involved in his attire decision. 

Groom+Persona.jpg

Grooms: Millennial, multicultural. Is much more involved in the wedding planning process than ever before. His attire is very important to him and he wants to stand out, look his best, and get the best value for what he’s paying for. 

 

Prom Personas

Teen+Persona.jpg

Teens: They value individuality and self-expression and are also the most accepting generation of other people’s uniqueness. 

Mom+Persona.jpg

Parents: Want their son to look good. Expect quality from a suit rental or purchase as well as a breadth of options. Doesn’t want to spend a lot of money, and price is usually a determining factor.

 

Competitive analysis

National Competitors: Men’s Wearhouse’s biggest online competitors are fairly new to the industry, and represent the needs of a younger, internet-reliant generation that may be disinterested in renting from a place where their Dads shop.

Key comparisons:

  • Their website interfaces are minimal and modern (a stark contrast to MW).

  • Their marketing is focused on the convenience of their online service. 

The Black Tux: Online tuxedo rental. Available to try on in-store at select Nordstrom locations.

Generation Tux: Company started by former owner of Men’s Wearhouse, George Zimmer. Online only suit and tux rentals.

 

Local Competitors: Although MW is the biggest fish in the pond, all local franchises combined nationwide make-up it’s largest competitor overall.

Key comparisons:

  • They rely on undercutting MW’s prices to gain an advantage.

  • Some of their site experiences actually felt more modern than MW’s, which could be a contributor in MW’s negative brand perception. 

Friar Tux: Franchise covering mainly Southern California. Rentals available online or in-store.

Savvi Formalwear: Franchise covering mainly the north midwest. Rentals are available in-store only.

 

Site Audit

Since the homepage contains most of the modules that are used throughout the site, an audit of just this page is an ideal place to start.

Visual Hierarchy: The visual contrast between images and copy isn’t substantial enough to create a clear visual path for users’ eyes to take. I proposed the following hierarchy to remedy this:

1. Photography: Using larger aspect ratios for images will give them the highest visual hierarchy over the whole page, creating a more immersive product experience.

2. Promotional Pricing: Increasing the size of, or highlighting promotional pricing would allow a quicker read for users.

 
 
 
 

Module Hierarchy: The current order in which information is presented lacks cohesion. Customer service modules are interspersed between e-com modules. This random order creates a “broken” experience, not giving the user a focus.

Since e-com modules are focused on selling product, grouping those modules at the top encourages conversion earlier in the experience. Service modules reinforcing brand value, should be moved to the bottom where users can further explore reasons to purchase from MW.

Less Copy: Parsing down copy for mobile doesn’t crowd the space, and keeps the read short to accommodate for diminishing attention spans (about 8 seconds).

module hierarchy.png
 

Opportunity

After comparing the MW site to their competitors, and understanding the company’s business needs, I’ve concluded some key takeaways to guide my design strategy:

  • Design for millennials: Keep visual design simple and modern and reduce copy for mobile.

  • Highlight affordability: In a big pool of competitors, price and promotions are still king.

  • Highlight customer service: Customer service and convenience is important for customer retention.

 
competitor venn diagrom.png
 
 

Design Approach


A Simple, modular Design system

Quick production times are common for retail websites, and the creative and development teams were in need of gaining efficiency. To help with this, I introduced Sketch to my team and created MW’s first Design System to use for this redesign. This also ensures design consistency across multiple pages, and sets expectations early with channel partners to help avoid last minute change requests and unexpected reactions.

Design system 1.png
Design systerm 2.png
 

DESIGN COMPARISON - DESKTOP

Original site.png
new site.png
 

Design comparison - Mobile

Mobile new 1.png
Mobile new 2.png
Mobile new 4.png
Mobile new 3.png
 

Q1 Performance


MW_Redesign_Desktop Mobile.png

“By implementing a more modern and visually striking look and feel to our special occasion websites through new campaign imagery that reflected our core audiences demographically, compelling storytelling and promotional messaging, and an overall more seamless user experience, we saw double-digit increases within the first quarter of launch in key site metrics...” 

- Angelique Marquez-Salamone, Marketing Director, Tailored Brands

First Quarter KPI results for 2019 vs. 2018:

  • Coupon registrations: +13%

    41,064 . vs. 36,234

  • Site visitors: +11%

    2,635,592 vs. 2,381,364 

  • Event Creations: +33%

    50,794 vs. 36,234

  • Demand (product in shopping carts): +52%

    $789,123 vs. $520,814

    View Website

 

Next Steps

With the help of an outside agency, Men’s Wearhouse has just started (Q1 2019) it’s efforts into applying an AGILE methodology. These efforts are still in their infancy, and are only being applied to only a small part of the business (excluding this redesign).

Prior to agency help, I was leading the effort with my channel partners in order to set-up a regular meetings to receive performance data regularly. Unfortunately I have left the company and wasn’t able to see these changes take hold.

I am still in contact with some that still work there, and hoping to receive updated performance data in the future.

THANK YOU.