NARS Responsive Redesign
Establishing a new visual language and design system for a high-end cosmetics brand to bridge onsite and offline experiences
Role
UX Research
Art Direction
UI Design
Prototyping
Animation
Tools
Figma
Adobe Photoshop
Adobe Illustrator
Miro
Duration
6 weeks,
Summer 2021
Oveview
NARS is a french-born luxury cosmetics and skincare brand with an edge. Their iconic products boast bold, long-lasting pigments, and are recognizable for their provocative shade names like “Orgasm” and “Striptease”.
However, their current web presence doesn’t communicate the brand personality, top-notch quality and style. The brand misses out on bringing in more DTC revenue because of not connecting to its target audience on an emotional level of design.
Challenges
01
Brand personality and strengths aren’t communicated effectively.
02
Cluttered and ineffective search and filter functionality.
03
Readability and legibility issues throughout the website. Important information is scattered.
Objectives
01
Emphasize brand’s aesthetic and boutique in-store treatment in its digital storefront through elevated typography and color treatment.
02
Create an immersive shopping experience with quicker, more user-friendly search and filter menus.
03
Implement a robust design system that adheres to visual accessibility standards, as well as a better structured IA to remove redundancy and decrease user confusion.
Discover
Brand Research
To understand the current brand identity, strategy and target audience I researched the brand's history, guidelines and key metrics. One of the things that gave me a better idea about the brand mood and positioning was the founder's vision. Francois Nars’ creative vision inspires self expression and high-style artistry. These principles lie at the core of the brand: luxurious, high-fashion and provocative. NARS tops its sleek, minimalist approach to visuals, packaging and typography with a sharp timeless sans-serif logo.
.png)
Don't hold back. Be bold. It encourages others to do the same.
- François Nars, Founder & Creative Director
Brand Research
To gain more perspective into the needs and pain points of luxury makeup buyers, I interviewed my friends and looked into reviews for premium makeup brands online.
.png)
Heuristic Evaluation
Having learned concerns, needs and pain points of the target audience and summarized it in a persona, I analyzed the current website to point out what works and what could be improved.
Current website doesn’t communicate the brand’s lofty and sophisticated essence and looks rather stiff and bland using strict black and white palette and sacrificing legibility by overusing all caps.
Competitor Analysis
To see what premium makeup market backdrop looks like I conducted field research and analyzed competitors.
Successful competitors provided streamlined experience with a strong visual identity. They guide the customer in the process and introduce information gradually. Although some competitors lacked robust personality in their digital storefronts and often skimped on white space.
M·A·C Cosmetics (1/3)
M·A·C is a trusted quality Canadian cosmetics manufacturer. M·A·C’s brand is youthful, bold, and effervescent.
What works
Large color swatches in product listings improve shopping experience. Visual language is unique enough to make the website recognizable.
What doesn't
Long product names in all-caps headlines layered on top of images causes legibility issues. Search suggestions and PDP layouts look cluttered and overloaded.
Bobbi Brown (2/3)
Prestigious beauty brand offering a wide variety of products. Bobbi Brown’s brand has a sophisticated, classy and clean feel to it.
What works
Modern airy design with beautiful images, easy navigation and visual guides.
What doesn't
Disappearing search icon in top navigation on mobile and confusing spacing in the badges system.
CHANEL Beauty (3/3)
CHANEL Beauty is part of an established French luxury fashion house. Their website boasts curated chic imagery and highlights elegant signature product packaging.
What works
Ample negative space, minimal copy, information is presented in bite-sized, easy-to-digest format, minimalist and polished flow.
Brand Adjectives
High-fashion, deliberate and iconic.
Define
Task Flow
Through the most common task of searching, filtering and adding a product to cart the redesign tackled the most visited screens.
Design
Art Direction & Moodboard
To start the process of design explorations, I mapped out three general directions, and in the end chose to highlight the Magician and the Ruler archetypes of the brand.
With that in mind, I searched for references that would help me to capture a way to render magic, modern elegance, and luxury to the digital space. I looked at high-fashion brands ad campaigns, fashion week photography and magazines typography for inspiration.
.png)
.png)
01. Home
Sleek gradient and elements of editorial design bring high-style and modern vibe.
Products images are at the front of the “stage” and are highlighted with soft spotlights.
Featured product sections overlap and create a multi-dimensional feel inviting the user to explore.
02. Search & Filter
Infrequent makeup buyers often don’t remember the names of products they’ve used before, so search suggestions include most popular product names as well as images for easier recognition.
Badging system is less intrusive.
Since discovering that very few makeup customers buy products from search results page while browsing on mobile (without checking product details first), I removed an Add to bag button and color selector to declutter the mobile version.
Filter menu is simplified and adheres to the signature gradient and styling.
Microinteraction of the search results number adds a flair of quality.
04. Shopping Bag
Nowadays more brands are looking to bring in more DTC business, I thought about how I could make it easier for NARS to sell more makeup directly from their site.
One of the insights I got from conducting empathy interviews was that people would overlook perks (like luxury brand product freebies) if they find the brand’s website dull and basic. Buying makeup is a special sensory experience and customers want the process to be not only easy but also fun.
Hence, Shopping Bag page creates a memorable rewarding experience encouraging the customer to keep coming back to NARS website.
01. Home
Overlapping elements with soft background highlight create a sense of volume and multi-dimensional space.
Dark and light backgrounds alternate to eliminate eye strain and visual fatigue.
Featured products are almost real-life size and are the spotlight of the Home page. This creates an illusion of them almost protruding from the screen and entering the real world, enticing a customer to own the product.
02. Search & Filter
Product cards animate on hover revealing key product features, color picker and an Add to bag button.
NARS' product filters are minimal and quickly bring customer from point A to B.
03. PDP
Signature gradient runs throughout most of the page creating a cohesive look and feel of the brand web presence.
Large color swatches and shade selection pull-down allow for comfortable shopping.
Looking for specific product details is streamlined with category tabs.
Product suggestions fall into three categories: Similar Products, Perfectly Pairs With, and Recently Viewed.
04. Shopping Bag
Shopping bag has an immersive look to create a rewarding and memorable experience encouraging the customer to complete checking out.
Products added to Wishlist are shown enlarged with more prominent CTAs to help customers add products without leaving the screen.
Design System
.png)
Results
.png)
NARS’ personality stands at the forefront of design and sets it apart from competitors creating a memorable experience to help bring more DTC business.
Consistent navigation, succinct UX copy and more accessible shopping experience accommodate customers of all proficiency levels.
Design theme tells a cohesive story connecting to target audience.
Takeaways
With more times for this project, I would like to explore animation and interaction possibilities. Animating gradients to look like they are liquid (a nod to the consistency of the “Laguna” liquid bronzer) and seeing spotlights move and highlight products as the user explores would be a great addition.
Besides that, working out a way to further minimize visual fatigue while reading long product information would be beneficial. Overall, this project was a great challenge for me to explore redesigning a brand’s web presence to be more vibrant and engaging.
.png)
.png)
.png)
