Skinologic
(Responsive Web Design)
OVERVIEW
Role
UX/UI Designer
Duration
6 weeks
Method
UX/UI Design, UX Research, Design Thinking, Task & User Flows, Personas, Wireframing, Branding
Tools
Figma, Miro, Whimsical, Calendly, Maze
Background
Skinologic Aesthetics & Skin Clinic is a certified non-surgical aesthetic clinic. Based in Angel, London with over 12 years of combined experience in Advanced non-surgical cosmetic enhancement. Founded by Lorraine Oji, a CoEd Nurse.
Problem Statement
The client already has an existing website but would like to improve certain aspects of it. Users are able to book treatments that range from botox to facials. However, the client is not getting many bookings, even though they have been open for about 2 years, they want to increase the number of online client bookings and overall revenue to help their business succeed and survive.
Solution
A complete redesign/rebranding of Skinologic. Redesigning the booking process, overall UI, and user experience.
EMPATHISE
User Interviews
5 participants aged 27-39 years old, with a mixture of full-time students and working professionals were all interviewed. From these interviews, I was able to get really good insights into what role or how people value beauty and self-care.
Findings
100% of participants say that price plays a big role in whether they decided to book a treatment.
“I like to look good on a budget”
-Interview participant
80% of participants rely on reviews in order to make a decision.
“I will drive far if they have good reviews”
-Interview participant
60% of participants rely on recommendations from a friend in order to find the best place to get their treatment done.
“I trust my friends. If they like it, I’ll try it ”
-Interview participant
60% of participants like to book online as they find it more convenient and simple, but will call if they are going to be doing a major treatment.
“It’s time effective. I can read reviews, book it, and add it to my calendar in one go.”
-Interview participant
Overall, participants found this site/clinic to be of a “higher class” standard that looked “clean” and “professional”.
However, 40% participants found the website held some inconsistencies with the content and layout. Which did influence their feelings towards the brand and whether or not they would go book a treatment with them.
“I find the treatments list overwhelming”
“It was confusing when I was trying to book a treatment.”
“Some of the text was hard to read”
“There’s too many pop-ups!”
-Interview participants
DEFINE
Personas
I was able to create a couple of personas that embodied the key insights discovered through the interviews.
Megan who represented the everyday influencer who was looking for the next best thing. She was happy to travel, as long as the clinic provided the “trending” treatment that was out there or that have a strong online presence.
Then we have Tracey, who is on the other end of the spectrum. She is a single mother looking for a good deal. Hence her quote is “I like to look good on a budget”.
Sitemap
To begin, I thought it would be best to start with the sitemap, in order to look at the structure in which the website is already set up. This way I could locate the inconsistencies and find a better solution.
The old layout was more confusing and didn’t link up well.
I decided to create a more simplified and a more cohesive structure, to help improve navigation for users.
Task Flows
From there I was able to devise two task flows, focused on the biggest pain points (booking and gathering information about treatments) that were discovered during my research.
But after talking to the client, it was noted that they wanted to stay with third party provider for their booking system. Later I would discover that the provider had design restrictions with the system they provided.
User Flows
So I made a user flow that focused on the aim of gathering more information, to help reflect the new direction the project was headed.
IDEATE
Low-Fedility Sketches
Keeping in mind the new direction of the project, I focused on the 3 key pages that needed to be redesigned. These were the: Homepage, Treatments page, and the treatments details page. Helping with the information architecture and in turn, helping strengthen the brand identity.
Colour Palette
Initially the client wanted to explore a new colour palette and revamp their brand, but then they changed their mind and wanted to keep the palette they already had. This was because all their marketing and products already used the palette they have and they did not have the budget to change anything.
So baring that in mind, I had to come up with a palette that used similar colours to what the client already had. But I also had to find a way to improve them to make them more accessible.
This what I came up with:
New options
UI Components Kit
After coming up with a colour palette, the client was happy with; I designed the components kit. Using the primary colour (#E6C1F1) and two of the neutral colours (FFFDFC & 4A4C4F), as the main colours for the buttons. This is because the lilac is eye-catching and it stands. This combination also helped reinforce the brand’s main colour. The darker colour is a perfect pairing to the lilac, as it holds a good contrast against most of the background colours.
Desktop
Mobile
Brand Logo
To create a new logo I used the brand's key traits and core values, to explore the different logo ideas.
The final logo was an evolution of an hourglass, which was influenced by one of the pinnacle ideas of beauty, which is ‘Time’. But to help the readability, the shape was rotated in order from the it’s “S” like shape.
Typography
Avenir Next typeface was selected as it resonated with some of Skinologic’s core values; professional and trustworthy. It’s also a sans serif typeface that looks modern and is easy to read.
PROTOTYPE
Hi-Fidelity Wireframes
Remembering that the goal of this project was about reorganising information and figuring out a way to display content in a more simplistic but effective way, a combination of pastel colours and gentle illustrations were used. This helped to communicate the new brand identity.
Shapes are also used to aid the design consistency but also it is a reflection of the different body shapes you would find in the real world. This falls directly in line with the type of business Skinologic is.
Prototype
I wanted to also test and see if the navigation of the website had improved, so I also added a flow that looked at that; as well as seeing if required information is provided in a simple way.
Flow 1 looks at navigating through the website; looking for the treatments list.
Flow 2; looks at gathering information about a treatment.
TEST
Usability Test Results
100% of participants felt that the layout was well organised and had good visual hierarchy.
40% of participants would want more medical information about the products used for each treatment
100% of participants felt like they had all the information they needed in order to make a booking, but would it be nice to additional information that is not completely necessary.
60 % thought it was a bit text heavy in some areas, even though 40% felt like it was more conservative and simple.
PRIORITY REVISIONS
After the testing, I analysed the data that was obtained. The most common trends that came up were: pages being too text heavy/more visuals, spacing between content, a more relevant hero image on the homepage. These were the things I focused on changing, as they were things that really effected the users experience.
CONCLUSION
Prototype
Overall, every participant was able to navigate through the new layout/design of the Skinologic website. They also felt like the aesthetic matches/communicates well, the business values. So I think the new design has improved the overall consistency and feel of the brand.
Working with a Client
This entire project has really taught me how to adapt. From the client changing their mind mid way, about colour palettes to changing the objective of the project due to design restrictions with the booking provider the client decided to stay with.