Case Study: UX Design, Art Direction, Visual Design
Men’s Wearhouse: Millenial dilemma
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).
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.
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.
Teens: They value individuality and self-expression and are also the most accepting generation of other people’s uniqueness.
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.
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.
Their website interfaces are minimal and modern (a stark contrast to MW).
Their marketing is focused on the convenience of their online service.
Local Competitors: Although MW is the biggest fish in the pond, all local franchises combined nationwide make-up it’s largest competitor overall.
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.
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).
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.
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 COMPARISON - DESKTOP
Design comparison - Mobile
“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
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.