UX/UI DESIGN Case Study — Size & Fit Hub
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.
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.
Fit and size are different things ¯\_(ツ)_/¯
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.
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:
Brand and Competitive Research
Client UX workshop, questionnaires and meetings
Consumer group types
Path to Purchase testing
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:
Researchers / One Time Shoppers
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
Simplistic approach cuts down user flow and prevents drop-offs
Users are utilizing Recommended items feature more than on 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?
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 only allows sorting options for fragrances—does not allow user to filter based on preferences.
Which direction is least intense?
How are these scents organized?
What do these categories mean?
FAQ Trends focused on definitions and discounts/samples
How might we categorize and help users understand these fragrances better?
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.
SEo Recommended Site map
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
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.
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
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.
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.
Agency: Color + Information
Team: Trishia Frulla, Elizabeth Clare