SAINT Cosmetics

During my time at SAINT Cosmetics, I lead the website redesign. The company decided they wanted to focus on an e-commerce sales model and felt a website redesign was necessary to increase conversion rates and decrease bounce rates. 

SAINT Cosmetics is a clean, non-toxic, cruelty-free cosmetic brand based in Toronto. When purchasing products from SAINT Cosmetics customers have peace of mind that they are purchasing products that will make them look and feel their best. 

Project Type

Website Redesign & Rebrand

My Role 

UX Designer, UI Designer, Brand Strategist

Duration

October 2020 - Jan 2021 (3 Months)

Team Members

CEO & Creative Director 

Tools

Figma & Adobe Photoshop

Business-Objectives-1
User-Goals-1
Constraints
Responsibilities

The Problem

The current website was driving high cart abandoned rates, was challenging to navigate and needed to be optimized for conversions.

🔎 Research

I started the research process by conducting a competitive analysis of SAINT's top competitors. This allowed me to evaluate how the industry leaders are positioning themselves, how beauty brands market their products and learn typical navigation behaviours. After, I conducted a thorough heuristic evaluation and SWOT analysis of the current website to identify usability issues and areas of improvement. Then, I created 2 user personas to capture 2 of SAINT's main targeted audiences.

SAINT-1

🧐 Research Findings

Based on my research findings, I identified areas of opportunity and improvements:

✨ Create a unique brand identity and brand voice
✨ A style guide to ensure consistent branding
✨ Take advantage of cross-selling opportunities
✨ Re-organize navigation to common cosmetic category names
✨ Include an FAQ to answer common questions

🎨 Brand Identity

After discovering that the clients wanted to revamp their brand image, I believed it was essential to solidify the brand before redesigning the website. To ensure that the team was on the same page, we worked collaboratively to create a mission & vision statement as well as determine the brand's personality.

 🌈 Visual Design

colour

After reviewing the current brand colours, we determined that the dark magenta/brown tones do not reflect the new brand image. Dark colours do not evoke a clean, friendly, feminine and relatable brand. By referring to colour psychology and keeping the white product packaging in mind, we chose a light pink colour palette. I used the Web Content Accessibility Guidelines (WCAG) to ensure the colours were AA compliant.

👩🏽‍💻 Logo Change

LOGO

We believed a logo redesign was necessary to reflect our new brand. After researching the fashion and beauty industry, we recognized that many brands have transitioned to all-caps, sans serif typeface. This is because brand logos need to adapt from small screens to giant advertisements. We want to align with industry trends and decided that the Sweet Sans font would best represent our brand; the sans-serif is friendly, youthful and clean.

🖌Style Guide

style-guide-1

When the brand image and identity were approved, it was time to focus on the website redesign. After reviewing my research, I created a site map to determine the necessary screens and to get a holistic view of the site's architecture.

🧭 Site Map

Site-Map

🖼 Wireframes

I decided to follow the standard 8px spacing system for the website to ensure consistency and alignment. I used the following pixel values: 8, 16, 32, and 64. 

Frame-27

🖥 Hi-Fi Wireframes 

3 months later, I redesigned the SAINT brand, redesigned over 12 responsive web pages and implemented 2 new experiences including an email consultation page and a Skin Quiz. 

Frame-28-2
Frame-31-3
Frame-30-3

🖱Micro Interactions

The final prototype included micro-interactions such as hover overlays, animated buttons, and a sliding horizontal menu bar. The current website lacked animations, therefore I made a conscious effort to include interactions as it helps add interest and character to the website. 

🛒Checkout

To decrease cart dropout rates I strategically designed the checkout process with gamification in mind. I added a progress bar, to visually communicate with customers how far they are from free shipping. Ideally, this feature would encourage users to purchase more products to reach free shipping.  I also added product suggestions to add personalization to the shopping experience and encourage more purchases. 

👱🏼‍♀️Skin Quiz

A foundation match quiz was a top priority for the SAINT team. The goal is to help customers find their perfect foundation match by answering 3 simple questions. To design this quiz I conducted market research to learn how people find their foundation match and to see what other companies are doing.  To make this an enjoyable experience, I made the quiz as visual, straightforward and short as possible.  

💡Key Learnings 

The UX/UI role was one of the first major projects I launched as a lead designer. After completing various freelance positions, I was lucky to have the incredible opportunity to work at SAINT Cosmetics. I was responsible for making my own design decisions, creating new experiences, and working with developers. Throughout the project, I was able to grow as a designer, a leader and a collaborator.

👍🏽 What I Did Well 

Lead the project from concept to launch on a tight deadline

I was able to design over 12 pages in a 3-month time limit. Since I was working with a small team, I wore many hats, including researcher, project manager and designer. I quickly adapted to a new environment and new team and created a final product the team was happy pleased with.

Took initiative to conduct a complete rebrand

Initially, I was hired onto the team to conduct a website redesign. However, after pointing out the brand inconsistency and discovering that the team was not happy with their current brand, I took the initiative to conduct a complete rebrand. I wrote the brand's mission, vision, values, and personality, selected new colours and created a vision board.

⏭ What I Would Do Differently

Conduct user research before the design phase

Due to the short timeline, I was unable to conduct primary research. Learning more about the SAINT customer, pain points, and motivations would have helped me understand the targeted user. Instead, I created 2 user personas based on the team's knowledge to capture SAINT's targeted user.

Conduct usability testing before launch

Based on best practices it is essential to test the prototype before launch. However, due to a short timeline, it was not possible. With more time and resources, I would’ve liked to A/B test different solutions to make more informed design decisions.

Selected Works

SAINT CosmeticsWeb Redesign

CrashCareer Quiz

Savr RecipesDesign Sprint

Fit NationFitness Social Media App