Silver Mirror Facial Bar
Booking system and responsive marketing website redesign for a result-driven facial service.
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
01 Context
Problems
The owner of Silver Mirror Facial Bar approached us to improve their booking system due to customer difficulties. As our collaboration evolved, they recognized their website's design system was outdated and didn't meet industry standards. This led to a comprehensive brand repositioning project to enhance their online presence while maintaining brand identity.
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 visited the facial bar in person to fully understand the customer journey and match the design with the store's ambiance. This firsthand experience allowed us to identify booking issues and observe customer and esthetician frustration, informing our redesign process.
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.
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.
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.
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.
Reflections
A clear user flow can drive revenue and cut down on 50% of the time spent searching for the correct button
Our team implemented progress bars, color gradients, and automation to reduce the number of button clicks, consequently decreasing the time spent searching for buttons. We aim to keep users engaged on the booking platform by providing informative content during the booking stage without interrupting the user flow.
It's important to strike a balance between visual storytelling and actual content
It's always a chicken and egg question: clients need to see the design before knowing if the real content is effective for the design. However, a clear structured wireframe, sitemap, and content forms can help clients envision the complete website and reduce the number of iterations needed.