CASE STUDY - 2024
A1 Supplements
ROLE
UX, UI, Concepting, Branding
TIMEFRAME
8 Weeks
TOOLS
Figma, Illustrator
TEAM
Chanelle Miller
Nouman Javaid
Overview
A1 Supplements, a leading online retailer in the dietary supplement and nutritional product industry, has established a robust presence by offering a wide range of high-quality products. Known for their competitive pricing, detailed product descriptions, and wide-range of products, A1 Supplements aims to support customers in achieving their fitness goals, muscle-building aspirations, weight management, and overall health.
​
The case study explores a comprehensive redesign of the A1 Supplements website, which initially lacked significant branding elements. The primary objective was to establish a robust brand identity and enhance the overall user experience through a complete overhaul of the website's design and functionality.
The Problem
The current A1 Supplements website lacks strong branding and an intuitive user experience, failing to meet the needs of its primary users: deal value buyers and health enthusiasts aged 18-44. These users prioritize affordability, effective results, and easy navigation.
HOW MIGHT WE,
Redesign the A1 Supplements website that establishes a strong brand identity and a visually appealing, user-friendly design that includes clear navigation and accessibility features for middle-aged users, while prominently showcasing great deals to attract deal value buyers?
The Solution
Establish a strong brand identity and a visually appealing, user-friendly design that prioritizes inclusivity and clear navigation, while prominently showcasing great deals to attract deal value buyers.
SOLUTION PRIORITIES
Homepage
Bundle & Save
Product Details
Product - Quick Add
All Products
Before & After
​
The site's primary strengths included a wide selection of products, competitive pricing, and efficient customer service, but it lacked a distinctive visual identity, modern design elements, and an easy navigation for necessary for a compelling user experience.​
Navigation Before
Navigation After
Filters Before
Filters After
Bundle & Save Page Before
Bundle & Save Page After
_gif.gif)
The Research
​
Even with a tight timeline, the research phase was a crucial part of the design process. Luckily, A1 Supplements invested in user surveys prior to the website re-design that helped us past user surveys provided valuable insights into the priorities and demographics of visitors.
Shop for supplements to achieve better workouts and more success in the gym.
Choose A1 Supplements due to pricing and promotions.
Suggested improvements related to pricing and promotions, indicating a strong preference for great deals and discounts.
Competitive Analysis
Before beginning the design phase, I start by preparing a benchmark analysis to get familiar with the main competitors. I also compile any inspirations from other non industry-related e-commerce websites.
Elevated Branding
Refreshing the brand was a crucial step in our solution process. We prioritized inclusivity, recognizing that the existing brand primarily catered to a narrow demographic of white, male fitness enthusiasts. Our goal was to reshape the brand as a blend of gym-lifestyle appeal that also resonated with value-driven consumers, creating a more accessible and welcoming image for a broader audience.
IMAGERY
BUTTONS & ICONS
TYPOGRAPHY & COLOURS
Outfit
Semi-Bold
"We need to keep the red."
The client wanted to keep the red to honour the existing brand so I decided to expand the colour palette to break up all the red on the site and to give the brand a more friendly and corporate look.
Primary
Colour
#F4C500
RGB 244, 147, 0
CMYK 3, 22, 100
Primary
Colour
#F4C500
RGB 244, 147, 0
CMYK 3, 22, 100
Primary
Colour
#F4C500
RGB 244, 147, 0
CMYK 3, 22, 100
Secondary
Colour
#BBBBEA
RGB 187, 187, 234
CMYK 24, 24, 0, 0
Secondary
Colour
#F4C500
RGB 244, 147, 0
CMYK 3, 22, 100