Redesigning the website of Lotus Hair Salon
Creating a seamless fresh new online look so that clients can access services at their fingertips.
May 2023
Role: UX Designer
Team: 1 Senior Web Developer
Timeline: 4 weeks (approx. 1 month)
Tools: Adobe XD, Adobe CC
Project Overview
Context
As a local hair salon based in Edmonton, Alberta, Canada, the owners of Lotus Hair Salon wanted a fresh new look to revitalize their online experience, so that clients can easily access their list of services with pricing right at their fingertips. Additionally, they wanted to be able to keep up with the increasing number of services becoming online, to retain and promote more clients by expanding online accessibility for appointments and other salon inquiries. Over the span of 4 weeks, I have worked as the UX/UI designer to lead this redesign, in collaboration with a web developer for pass-off, to help put this vision to life.
The Problem
The owners of Lotus Hair have always pursued a very traditional approach to managing their business outside the salon - initially, they did not think that they needed any website or online experience, clients simply call in or walk in to book an appointment. Following, they hired a company down in the United States to manage their social media and website, however they were not pleased with the results as the online experience were not entirely representative of their business and the information posted were inaccurate, further preventing online client access. When we connected, we sorted out the problems and key goals that needed to be addressed to create the ideal online experience for Lotus Hair. Here were the problems:
People were unable to retrieve an accurate/up-to-date list of the services with correct pricing provided by the salon,
People were not able to access the salon’s gallery extensively other than what was posted on Google Reviews,
People were not provided with the correct information if they wanted to book an appointment or have an inquiry online, for those who prefer not to call or walk-in.
The Goals
To provide current and potential clients the key-features they need the most;
to access list of services and prices,
to view past client photos of the salon’s work
to extend accessibility and inclusivity for those who prefer and require to contact the salon online
2. To create a seamless website consistent to their branding, making it as easy-to-use and straightforward as possible for existing and future clients.
3. To promote their business through diversifying their web-traffic and making it more accessible for users to access their information
The Design Challenge:
By creating a modern, sleek look for the website that is consistent to their branding, we can include the core details of salon services and an option for users to connect online, to be able to refresh and enhance the online experience of this business, while keeping user accessibility and inclusivity in mind.
The Design Challenge:
By creating a modern, sleek look for the website that is consistent to their branding, we can include the core details of salon services and an option for users to connect online, to be able to refresh and enhance the online experience of this business, while keeping user accessibility and inclusivity in mind.
Key Features of The Online Experience
#1 - Featuring rotating gallery on the homepage
Allowing users to view the work of hair stylists before experiencing the magic of Lotus Hair
#2 - Interactive, accessible and simple menu bar for user ease
Increasing usability with this responsive menu bar featured on all pages of the site. The menu bar is kept simple and minimal providing only essential and necessary tasks for the clients.
#3 - Option for users to reach out to the salon online
Inclusive to clients who prefer communicating online, skipping the phone call or in-person visit.
#4 - Responsive web-designing for all platforms
Not just for the desktop website. For all the phones and tablets too.
Goal #1
To provide current and potential clients the key-features they need the most;
to access list of services and prices,
to view past client photos of the salon’s work
to extend accessibility and inclusivity for those who prefer and require to contact the salon online
Client Characteristics
The owners of Lotus Hair Salon has recognized that having an online platform for their business attracts younger clients, as nowadays forms of social media and online communication have become the preferred method. Below are key characteristics that current and prospective clients have that are important for the creation of the website.
1
The need for easily accessible information
Individuals want the ability to easily access information (of the business) online with their own smart devices, without having to take an extra step to contact the business itself.
2
Affordable options within the beauty industry
Individuals, especially younger clients (i.e. students) are always looking for more affordable options when receiving services in the beauty industry like hair.
Individuals are able to explore these options fit for them when they have easy access to this information.
3
Flexible ways to book an appointment
The owners have stated that some clients have asked about online options (booking an appointment online, navigating social media).
By introducing an online method of contact between the salon-client, this promotes the target clients of the business and inclusion of more groups, while providing flexibility in client options.
Information Architecture
Site Map
The owners of Lotus hair wanted a very minimal, easy-to-use website that was able to provide key information on the salon.
“ A lot of young people now like to book online with us instead of over [a] phone call” - Anthony L., co-owner/partner of Lotus Hair
Sample User Flow
Problem Statement: As a busy university student, I want to easily view services provided by the salon without having to contact them over the phone for information, so that I can quickly book appointments.
Goal #2
To create a seamless website consistent to their branding, making it as easy-to-use and straightforward as possible for existing and future clients.
Here, we created the design system to be used for the website of Lotus Hair. Lotus Hair salon follows the colour scheme of the lotus flower, with shades of pink and related colours of the petals, alongside shades of green to represent the stem, leaves, and other water plants (such as water lilies) sharing the aquatic habitat of the plant.
Design System / Style Guide
Colour Palette
Typography
Visuals Used
Format
1440 x 1024 (Figma Desktop Format)
I played around with the visual elements on Canva, and explored some fitting Lotus visuals from several artists who published on Canva; Sketchify Korea, and Mariyana.
Goal #3
To promote their business through diversifying their web-traffic and making it more accessible for users to access their information
Now, what is meant by “diversifying web traffic”? This may seem pretty vague.
We wanted to increase the diversity of the type of people (future clients) to reach out to the salon. Aside from the phone-calls and in-person communication some may prefer,
Expanding forms of business communications to online such as through email, targets more younger age groups today who prefer to communicate on digital devices.
This expansion promotes accessibility to not only these groups but other people who are unable to verbally communicate or meet in-person, or may require other assistive devices.