THE
COCO
CLUB

NEW LOGO & WEBSITE

branding
visual identity
personas
customer journey map
taskflow
wireframes
prototype

Our client is launching a hair salon in the heart of Zurich, and is looking for a new branding and visual identity. The goal for THE COCO CLUB is to provide a relaxing and enjoyable experience for customers. We want our clients to feel at home and leave with not only a new look, but also a newfound sense of well-being. THE COCO CLUB aims to provide a unique hairdressing experience for discerning clients.

Time: Oct 2022
Goal: The goal was a minimalistic letter logo and a website

01 Starting the branding process - Building a brand

We started with strategy and defined the brand and it’s target audience. Since we were talking about a new company we started by defining the brand attributes and created a brand statement. Regarding the users I was happy to find out that the team has already been talking to their target audience and had a lot of insight so it was only a matter of consolidating the findings to form a user persona. Both of these documents guided our decisions during the rest of the project.

02 Research

The definition of user-centered quality goals as well as preparatory desk research helped me to plan the interview sensibly and to estimate the effort.

Research Goals
  • Determine what features people want on a hairstylist website
  • Get a feel for what people’s tastes are in hairstyles
  • Find out how much consumers are willing to pay.
  • Understand the concurrence through market research.
  • Find out what motivates people to go to this specifiy hairstylist.
  • Determine what will motivate people to book online
Participants
  • Gender
    4 females
  • Race
    All caucasian
  • Age
    20-30
    30-40
    40-50
  • Employment
    All full-time employed
  • Marital Status
    2 single
    2 married
Summary
Most are long-time clients
Quality of pictures was of high importance for choosing a hairstylist
They are al full-time-employed so they want to have the possibility to check for an appointment in a easy and effective way
They don’t buy online hairstylist products
They are all interested in Fashion & Lifestyle
They like the luxury lifestyle
Most of them are jetsetters
Customer Journey Map

Objective: To understand the experience of a new customer booking a hair appointment on a hairstylist's website

Awareness
The customer becomes aware of the hairstylist's website through word-of-mouth, social media, or online search. They navigate to the homepage of the website.

Exploration
The customer explores the website, looking for information about thehairstylist's services and prices. They find a page on the website thatdescribes the hairstylist's experience, qualifications, and areas of expertise.They also find a page that shows the different hair services offered, withprices listed. The customer looks for reviews or testimonials to gain a betterunderstanding of the hairstylist's reputation and level of service.
Booking

The customer decides to book an appointment with the hairstylist. They navigateto the booking page, which allows them to choose the service they want, selecta date and time, and provide their contact information. The customer also hasthe option to add any special requests or notes for the hairstylist. Once theycomplete the booking form, they receive a confirmation email with the detailsof their appointment.

Pre-Appointment
The customer receives a reminder email or text message a day or two beforetheir appointment, reminding them of the date and time. The email also includesany instructions or information the customer needs to know before theirappointment, such as what to wear or how to prepare their hair.
Appointment
The customer arrives at the hairstylist's salon at the appointed time. Thehairstylist greets them and discusses the desired hair service and any specialrequests or concerns. The hairstylist performs the hair service and providesany necessary advice or recommendations for hair care. The customer pays forthe service and leaves the salon satisfied. ‍
Post-Appointment
The customer receives a follow-up email or text message from the hairstylist,asking about their satisfaction with the service and encouraging them to booktheir next appointment. The customer also has the opportunity to leave a reviewor testimonial on the hairstylist's website or social media pages. 

Task Flow


LandingPage
Welcome message and link direct to booking page
Navigationbar with links to services, booking, about, and contact pages
Testimonials section to showcase happy customers 
Salon
List of services with a brief description and price Option to book a service directly from the page 
BookingPage
Calendar to select a date and time for the appointment
Service options with descriptions and prices
Form to input personal details
Confirmation screen with appointment details and payment options 
AboutPage
Biography of the hairstylist with their qualifications and experience
Pictures of the hairstylist at work Awards or achievements if applicable 
ContactPage
Contact form to send a message directly to the hairstylist
Contact information like phone number, email, and social media handles 
ConfirmationPage
Confirmation message after booking an appointment
Option to add appointment to the calendar
03 THE VISUAL STYLE

Creation of the logo


My focus is on creating a professional and visually appealing brand identity that resonates with the target audience. The logo I have designed is simple yet impactful, featuring a black and white color scheme that reflects the sleek and modern style of the salon. My role is to create marketing materials that are not only visually appealing but also effectively communicate the salon's brand message and values. I will use typography, imagery, and design elements to convey a sense of professionalism, sophistication, and modernity that aligns with the salon's brand identity.
04 THE MOCKUP

The user interface design


As a UX designer, I specialize in creating landing pages that are both visually appealing and optimized for conversions. For THE COCO CLUB, I focused on drawing attention to the most important elements of the page, while ensuring a seamless user experience. By designing with both usability and conversion optimization in mind, I created a landing page that effectively engages visitors and encourages them to take action. The client preferred the black version.
Design #1
Design #2
05 Testing

Check for Usability

Key Takeaways
Easy to navigate
Booking process needs more clarity
Mobile optimization could be improved
User feedback is positive
More testing is needed
I recently conducted a usability test to evaluate the ease of use and navigation of a website. The test aimed to determine how easily users could navigate the website to book an appointment and to observe any obstacles or frustrations they may have encountered during the process.
The task
Ten participants in total were included in the test, four of whom were tested in person. Of the four, there were two females and two males.The test objectives included observing the path that users took to get to the booking screen, testing the overall ease of navigation, and identifying any obstacles or frustrations that may have impeded the users' ability to complete the task.After conducting the test, it was found that all users were able to complete the task in under 5 minutes. The website was also given high marks for ease of use, indicating that users found it simple to navigate through the site.
The result
Users found the website easy to navigate: The test revealed that users were able to navigate through the website with ease and complete the task within a short amount of time. This indicates that the website's design and layout are effective in guiding users towards their desired goal.

Booking process needs more clarity: While users were able to book an appointment, some participants expressed confusion over the booking process. This suggests that the website could benefit from clearer instructions or more intuitive features to make the booking process more straightforward.

Mobile optimization could be improved: During the test, some users experienced difficulties navigating the website on mobile devices. This suggests that the website could benefit from further optimization for mobile devices to improve the overall user experience.

User feedback is positive: Based on the test results, users generally had positive feedback about the website's design and functionality. This suggests that the website is meeting users' needs and expectations, and may be a valuable tool for the target audience.

More testing is needed: While the test provided valuable insights, further testing with a larger and more diverse group of users may be needed to ensure that the website is accessible and usable for all users.

Create an affinity map


After reviewing the results of the usability test, I create an affinity map to identify common themes and patterns in the data.

User Feedback
Positive Feedback
Easy to navigate
Clear layout
Quick loading time
Intuitive design
Professional appearance
Constructive Feedback
Confusion around booking process
Mobile optimization needs improvement
More detailed instructions needed
Some users experienced difficulty finding specific information
Some users suggested adding additional features (e.g. chat support)
Observations
Users were able to complete the task within a short amount of time
Users followed similar paths to get to the booking screen
Users expressed frustration when encountering obstacles or errors
Users tended to rely on visual cues to navigate the website

06 Next steps

My next steps would be to do another round of user testing with the changes I've implemented. After that, I'd do another round of affinity mapping and synthesizing of that data. I'd iterate until the flow was as smooth as it could be. Then I would package it all up and start develop the website.