Hygge Head Spa & Scalp Clinic
UI/UX Individual Design
For the Hygge project, I led the design and development of a standout website for a new scalp care salon, focusing on a user-friendly experience to simplify bookings and attract clients. The site combines aesthetic appeal with functionality for easy navigation and service engagement.
4 weeks
Time Frame
Project Overview
The project started with designing a website for Ashley, owner of The Line Hair Salon, to enable online bookings and foster growth. However, discussions revealed Ashley's new venture, Hygge Scalp Care Spa, prompting plans for a combined website that serves both the salon and head spa.
Project Goal and Challenge
The challenge of integrating two store, each in a distinct location with its own logo and name, into a single website quickly emerged. The goal was to create a unified online presence that accurately represented both businesses, necessitating strategic planning and meticulous execution.
Market Analysis
The project kicked off with me diving into the market, looking at what makes The Line Hair Salon and Hygge Scalp Care Spa stand out. This step was key to understanding how to showcase their unique qualities.
Through analysis, we have identified the following key learnings from the market competitive analysis:
A clear unique value proposition is essential for attracting target clientele to each salon.
Web design is crucial for effectively communicating brand values and service offerings.
The availability of online booking and transparent pricing can significantly improve customer convenience and satisfaction.
User Research
After conducting user research via Google Forms surveys to understand preferences and behaviors related to salon website design, I closely listened to our users' feedback: they desired a website with easy navigation and a simple booking process. Identifying key pain points from this research, I crafted detailed personas to represent our typical users, transforming abstract data into relatable stories and guiding the website's design to meet real user needs effectively.
User Persona
Information Architecture
Following the insightful feedback and pain points gathered from user research, I transitioned to developing the Information Architecture (IA) of the website. This phase was pivotal in structuring the site in a way that mirrored the needs and expectations identified through our personas. By organizing content and navigation logically and intuitively, I aimed to create a seamless user journey that made finding information and booking services effortless. This groundwork in IA was essential for ensuring the website's design was not only aesthetically pleasing but also highly functional and user-friendly.
After gathering feedback, I sketched out the user flow to guide visitors smoothly to services and booking options. This effort was focused on crafting a clear, welcoming path for anyone landing on the site, simplifying navigation right from the start.
User Flow
Wireframes
With these insights, I moved on to design. Knowing that designs made in Figma might not translate perfectly to Squarespace, I decided to sketch out the basic layout first. This way, I could make sure the design would work well when I started building the site on Squarespace.
Low-Fidelity Wireframes
Considering the insights gained from our research, I focused on incorporating a booking system directly on the homepage to streamline user access and emphasized transparently showcasing our services and pricing. This strategic decision laid the foundation for the initial wireframe design, aiming to weave a narrative that not only engages users but also simplifies their journey from discovery to action.
After crafting the low-fidelity wireframes, which laid out the basic structure and flow of the website, I progressed to developing high-fidelity wireframes. This stage brought the initial sketches to life, adding detailed elements such as color schemes, typography, and precise layouts. High-fidelity wireframes served as a closer representation of the final design, allowing for a more accurate visualization of the user interface and experience. This step was instrumental in refining the visual and interactive aspects of the website, ensuring that the booking and appointment management processes were not only intuitive but also visually appealing to the users.
High-Fidelity Wireframes
Usability Testing - 1st round
Upon completing the transition from wireframes to the finalized design on Squarespace, I will begin the usability testing phase. The focus will be on determining whether users can easily distinguish between the two businesses, navigate the booking system intuitively, and share their overall impressions of the website's user experience. This step is vital to ensure the site not only aligns with my design and functional goals but also effectively meets the needs of our audience, providing a smooth and engaging online journey.
The first round of testing revealed that users struggled to differentiate between the two businesses despite positive feedback on the design. After discussing with the owner, Ashley, we decided to focus the website exclusively on the head spa to ensure a clearer and more targeted online presence, aligning with user expectations.
Testing summary
Refocusing the Website on Hygge Head Spa
Following the decision to exclusively highlight Hygge Head Spa, I undertook significant revisions to the website, shifting from a dual-business platform to one solely dedicated to the head spa. This overhaul touched every aspect of the site, from visual design to textual content, ensuring everything now reflected Hygge Head Spa's unique brand and services. The update was designed to offer a cohesive and focused user experience, allowing visitors to effortlessly navigate the services, book appointments, and interact with the head spa online.
Before
After
Usability Testing - 2nd round
After the website's transformation to focus on Hygge Head Spa, I conducted a second round of usability testing to ensure easy access to information, smooth booking, and a seamless online experience.
The redesigned Hygge Scalp Care website has successfully addressed previous issues of confusion between Hygge and The Line Hair. The survey results indicate a significantly improved user experience, with ease of navigation, clear information presentation, and an efficient booking process. The suggestions for further improvements provide valuable insights for continuous enhancement of the website.
Conclusion and Further Notes
The owner of the Hygge Scalp Care salon purchased the website domain hyggespausa.com on December 25th 2023.
The website officially went live the following day.
Impressively, within just a day of going live, the website began receiving customer bookings, marking a promising start for the new online presence of Hygge Scalp Care.
Additional Information
As of today, the number of client bookings continues to rise, indicating the website's successful redesign and enhanced user experience are meeting and exceeding customer expectations.
Next step - Boosting Hygge Head Spa's Online Presence
After updating the website, I created a Google Business profile for Hygge Head Spa and linked it to the site to increase visibility. This step improved Hygge's online presence and helped in local searches. I also enhanced SEO and launched social media campaigns to attract more customers, further boosting Hygge Head Spa's popularity.
Launching Hygge's Promotional Video
I produced a promotional video for Hygge Head Spa, showcasing its unique services and tranquil environment. This video was shared exclusively on Instagram to engage with our audience and visually highlight what Hygge offers.
What Our Customers Say：
Ashely
Hygge Spa owner
Reflection
This project was a journey of learning and adaptation, highlighting the significance of user- centric design and flexibility in web development. The successful launch and immediate customer engagement with the Hygge Scalp Care website affirm its effectiveness and mark a promising start for Ashley's business growth and online presence.