Designer & Creative Collaborator
Minimalist-Showcase-Project-Presentation_NOTYPE.png

Brooks Brothers

UX Design

Brooks Brothers

UX/UI DESIGN Case Study — Size & Fit Hub


Problem
Brooks Brothers is the original authority on American style, offering stylish modern clothing and fresh takes on heritage designs for men, women, and kids. Although they are a staple in American menswear and have consistently strengthen their name based on the quality and fit of their clothing (they’ve dressed 40/45 presidents!), Brooks Brothers was unable to communicate their product selection to users online in a way that made sense.

Solution
Create a scaleable size & fit hub that would integrate top SEO pages with UX best practices, affording a tool for users to confidently shop and understand Brooks Brothers’ product assortment.

Lesson Learned
Fit and size are different things ¯\_(ツ)_/¯


brief

Brooks Brothers needed a way for users to understand what they were buying. Through various customer feedback channels, we found that product knowledge was one of the top three pain points in the user’s path to purchase. We needed to update key product information (IE: fit and size guides) for today’s user since their current size and fit information was spotty and only available for select product categories.

Discovery

We immersed ourselves in the World of Creed via research and analysis of the history of the brand, the Creed consumer, Competitor Analysis, a little Fragrance 101, and a diagnostic of the current platform and consumer experience. Tools of the discovery phase included the following:

  • Adobe Analytics

  • SEO reporting

*////EDIT

  • Brand and Competitive Research

    • Field research

    • Client UX workshop, questionnaires and meetings

    • Competitor interviews

    • Feature Inventory

    • Moodboards

  • User Research

    • Consumer group types

    • Consumer Questionnaire

    • Heat Maps

    • Scroll Reports

    • Path to Purchase testing

 

**edit//User Research

We also conducted user surveys offering a CREED gift certificate upon completion, and were able to gain a better understanding of Creedboutique.com's needs.

3 primary users:

  • Product Focused

  • Browsers

  • Researchers / One Time Shoppers

user Summary

  • Interests: travel, art, cocktails, style, fashion, other luxury brands, wine

  • Over 60% Male

  • Living in the US (New York, Texas, California, Florida, Illinois) and Canada

  • High Spend potential

 

**edit//Analytics & SEO Report

  • 28.6% Ages 25-34

  • 24.7% Ages 35-44

  • 18.5% Ages 45-54

  • 63% Viewing from Mobile, 32% purchasing

  • 30% Viewing Desktop, 60% purchasing

  • Strengths:  Brand Reputation, clear value proposition, solid social media presence and engagement

  • weaknesses: Lack of keyword optimization content and filters for higher rankings

  • challenges: Keyword optimized contend, Competition with department store websites,

**edit//Heat Mapping and Scroll Reports

PDP

  • Mobile:

    • Simplistic approach cuts down user flow and prevents drop-offs

    • Users are utilizing Recommended items feature more than on desktop

  • Desktop

    • "sizes" image carousel and dropdown are top clicked sections on this page, but do the same thing. Utilizing these as separate information in redesign could help increase conversion

    • Users are curious to understand scent. How might we make users more confident about their scent choice throughout the site without words?

Home Page

  • User Majority goes straight to navigation buttons

  • Mobile does not offer search feature

  • Desktop users are clicking through to Video content and Featured Blog Category "Viking Diaries"—mobile, not so much

Path to Purchase

  • Users confusing voucher section with “coupon code”

  • Utilizing autofill expedites user journey,

  • There is no confirmation screen or final review before order is placed

PLP

PLP only allows sorting options for fragrances—does not allow user to filter based on preferences.  

Scent finder

  • Which direction is least intense?

  • How are these scents organized?

  • What do these categories mean?

FAQ

  • FAQ Trends focused on definitions and discounts/samples

How might we categorize and help users understand these fragrances better?

**edit//information architecture

We needed to simplify the navigation through eliminating redundancies and non-sensical flow. With so many static pages and a wonky navigation both on desktop and mobile, we believed it best to move forward with fewer top tier buckets, and more alluring sub categories. We also looked to condense pages without affecting SEO opportunities. Additionally, we wanted to update nomenclature to be more aligned with modern search terms. While the sitemap was fluid throughout the UX process, we were always working to optimize and stay conscientious of page templates and requested page designs.

Original Sitemap

SEo Recommended Site map

**edit//UX Strategy

  • Navigation and Search/Filter Functionality for usability and SEO tracking.

  • A personalized shopping experience to be consistent with Creed's in-store experience.

  • Increase conversion rates among our mobile users

 

Redesigned sitemap

**edit//Wireframes

We developed 2 conceptual directions for the e-commerce structure, then moved forward with a conglomeration of both directions that was used structurally throughout all wireframes to create our base flows while moving on to visual design.

  • Stronger navigational flow and filter/search capabilities to help increase site visits and conversion rates

  • Home page personalization for 3 levels of users (guest, new member, loyal)

  • Highly responsive for usability across all platforms.

Desktop

**edit//Design strategy

Strengthen brand voice through consistency

With a clear value proposition and solid social media presence/engagement, we wanted to enhance the already strong brand reputation within all facets of their website.

  • Solid type hierarchy and color story aligned with Creed brand guidelines

  • Customizable modules for various marketing initiatives, storytelling and calls to action

Elevate Navigation and categorization

We created an entirely new navigation system based on our UX and SEO findings. This allowed for visual callouts to various sections of the website

shoppable Product FIltering system

The current website had very limited filtering capabilities, beyond gender and product type filters,, and recommended/a-z sorting. We created a system to pull results based on more user-specific needs, creating a more shoppable site (and visibility to search engines).

Represent scent in a sense-less space

Driving sales for a fragrance on an e-commerce platform was a tall order, but we were ready to take on this challenge. Creed's current website described people and places to explain their perfumes, but what if there was an easier way to do this? Scent is visceral and instinctual. Scent creates moods and recalls memories.  Scent is complex, yet feels simple like ...color.

We visually mapped various notes into colors, allowing for a greater understanding of compound notes, and giving a visual signal to what olfactory pairings could be most appealing. We then integrated each perfume's scent color story into various parts of the website. 

Fragrance Profile within Product Page

Scent Finder Results

Sampler Set Module

Scent Finder Quiz

Simplified PDPs 

Product details were restructured and simplified, we integrated lifestyle and editorial modules (where relevant), and we created a more visually stimulating PDP

A new SKU (Sampler Sets) also became available during our re-design. We not only integrated them into our scent finder quiz, we continued to detail the unique aspects of each recommended fragrance, including their fragrance color story.

SEO-Friendly PLPs

The client was adamant about having ancillary/collection PLPs so we took this opportunity to showcase more of the personality of each fragrance. We took a little from our standard PLP and PDPs , further integrating our fragrance color stories, lifestyle, and editorial modules in a a more high level way.

Checkout

Desktop

Mobile

 

Agency: Color + Information
Team: Trishia Frulla, Elizabeth Clare