Silver Mirror Facial Bar

Booking system and responsive marketing website redesign for a result-driven facial service.

Silver-Mirror-Opening-Image

Overview

Silver Mirror is a result-driven facial bar that provides fast and affordable facial services nation wide. Their goal is to transform facial care into an ongoing maintenance routine, similar to going to the gym to see results. With today's hectic schedules, they rely heavily on their digital experience to ensure efficient booking of facial services and products for their clients, as well as facilitating effective workflow tracking for their estheticians.

Goals

  • Reevaluate the booking process in response to a user experience that has proven to be both inefficient and confusing.
  • Design a user friendly client portal.
  • Redefine their website aesthetics to mirror the in-store Silver Mirror experience, striving for a clean and luxurious design that resonates with young professionals.
  • Develop an interactive facial quiz designed to assist customers in determining their ideal facial service.

Tools

Sketch / Figma / Illustrator / InVision / After Effect

Methods

Website Audit / Wireframes / Visual Design / Icon Design / Brand Reposition / Quality Assurance / Usability Testing

Teams

UI / UX Designer Me
UX Lead Tamara Olson
Design Director Bruce Viemeister
Creative Director Allis Chang
UI / UX Intern Elaine Shih

Duration

6 months - currently ongoing

View Live Site

Silver-Mirror-Design-Timeline-

01 Context

Problems

The owner of Silver Mirror Facial Bar initially reached out to us to revamp their booking system. They had noticed that customers were having a tough time booking facials, mainly because the existing system was confusing and didn't perform well in user experience testing. As our collaboration progressed, they realized that their website's design system was being misapplied and user interface was falling behind industry standards, especially compared to their competitors. Therefore, they decided to embark on a comprehensive brand repositioning project. The goal was to maintain their brand's colors and logo while giving their online presence a significant upgrade to match the quality of their physical stores.

Target Users

These are young professionals juggling their busy work lives while finding some extra cash to pamper themselves. They're all about getting tangible results by sticking to a regular self-care routine.

02 Research

Understand the pain point by visiting the physical store, studying competitors, and studying businesses with similar models.

On-site Interviews

Our design team went on-site to personally experience the entire customer journey at the facial bar. This immersive experience enabled us to align the visual aspects of our design with the ambiance of the physical store. During our visit, we also identified a few booking issues and observed instances of customer and esthetician frustration, providing valuable insights that informed our redesign process.

Silver-Mirror-Store-1
Silver-Mirror-Store-2

03 Design

Booking Flow Redesign and Client Portal

Product Problems

Lack of information in the booking interface
Limited service information on the interface, with only facial names and prices, might deter clients from exploring new options and decrease their interest.

Booking and schedule finding are non-reversible processes
When selecting an esthetician's availability, the user flow can lead to a dead end if the esthetician has no openings. This requires users to make extra clicks to discover an available booking time.

Silver-Mirror-Booking-Flow-1
Silver-Mirror-Booking-Flow

Design System

The booking platform employs a reduced color palette while maintaining cohesiveness with the marketing website. It retains a clean aesthetic and upholds the visual hierarchy, ensuring users can concentrate on their tasks and successfully achieve their goals.

Design-System-Silvermirror

03 Design

Responsive Marketing Website

Design Process

Bringing store-front white space to the website and toning down vibrant colors
Silver Mirror's Creative Director, Allis Cheng, has art-directed all our inspiring photoshoots. As the photos themselves are vibrant, I have maintained a limited color palette for the website, exclusively incorporating the primary brand colors.

Reduce unnecessary icon usage while maintaining clear communication
I designed a set of icons to improve communication regarding various unfamiliar skin problems. To maintain a more sophisticated and upscale website aesthetic, we've consciously restricted the widespread use of these icons for decorative purposes.

Let the typography do its work
We selected a serif font, Freight Display, known for its timeless and elegant qualities, which contribute to enhancing the brand's professionalism.

Silver-Mirror-Marketing-Website.png
Silver-Mirror-Elements

03 Design

Facial Quiz

Design Solution

Quiz logic
Our UX lead collaborated closely with the Silver Mirror Team to streamline the complex quiz logic that guides their team of estheticians in recommending the appropriate services and products.

Interactive quiz through visual storytelling
I proposed a solution that involves users cleaning up their virtual vanity table as they progress through the quiz, with the level of cleanliness reflecting their quiz progress. Additionally, I designed out various interactive UI elements, icons, and loading animations to enhance the overall facial quiz experience.

Silver-Mirror-Quiz-wireframe
Quiz-Screens
Quiz-Results
View