Elevated Beauty & Wellness

Website redesign

Project Overview

Elevated Beauty & Wellness is a beauty studio established that offers beauty services, and recently the stakeholder has ventured into wellness events and is ready to showcase them on the website. To enhance a client’s booking experience, the stakeholder is open to improving the usability of the website and revitalizing the brand to ensure a seamless integration of both beauty and wellness aspects.

Business Goals

  • Ensure straight forward flow to online booking

  • Showcase wellness events

  • Refresh the brand identity for a cohesive beauty and wellness look

  • Provide information that is clear and informative

Deliverables: User research, UX design, brand refresh

Roles: UI/UX Designer, UX Researcher

Tools: Figma, Whimsical, Optimal Workshop

Evaluating the Existing Website

Existing homepage

To grasp a better understanding of what improvements needed to be made, I tested 6 users who have never viewed the website to get their first impressions. I created a few tasks to observe how they would navigate the website and search for information.

Usability Testing Results

  • Users overlooked wellness events on the homepage and had difficulty locating the events page

  • When they interacted with the Events page, they expressed uncertainty about whether it was still loading or potentially broken.

  • Anticipated light, serene colors to match the branding name, “Elevated”, instead of the heavy use of black.

  • Photo styling and editing did not meet users’ aesthetic preferences

  • Difficult to read enlarged font sizing and excessive capitalization

To inform current and potential clients of Elevated Beauty & Wellness' beauty services and wellness events, and to let them know that these offerings are conveniently available for online booking.

Constraints: Consider solutions that can be implemented using the stakeholder’s website builder and user-friendly for independent modifications.

Challenge

Research

Exploring the Industry

I started my research by conducting a competitive analysis to analyze how beauty and wellness competitors have set up their digital platforms. The one-on-one user interviews and survey helped me to gain insight on users' needs and frustrations while looking for services.

Beauty Competitors

Incorporates soft, feminine branding to reflect the gentle care they provide. Their photo gallery showcases the quality of work and esthetician's style, allowing potential customers to gain confidence in their services.

Informative pages on their website streamline the booking process and save time for both the salon and customers by providing valuable information.

Wellness Competitors

Strategically utilize cooler tones and open space to create an atmosphere of calm and relaxation. Descriptive content detailing the benefits of services and events ensures a clear understanding for potential customers.

Additionally, a well-curated photo gallery of the studio allows visitors to visualize the serene environment, further enticing them to experience the spa's offerings.

Weak Points to Avoid

  • Text-heavy websites without visuals hinder effective information digestion, potentially overwhelming users and impeding smooth navigation.

  • Clear service information and appointment booking details are crucial to prevent frustration and confusion.

  • Unlabeled photos can prolong decision-making, impacting users' ability to select specific services.

Insights into Users' Experiences with Beauty Service Bookings

I conducted six interviews and implemented a survey of twenty six women ranging in age from 20-30’s. They preferred a convenient online booking process, considered salon photos a bonus for assessing cleanliness, emphasized the importance of upfront service and pricing transparency, had varied associations with "spiritual events," expressed interest in them with more information, and were open to beauty services that also focus on wellness without perceiving a conflict.

Define & Ideate

Building Empathy

I synthesized my learning from my research and created two personas– a beauty client and a wellness client. Catherine (beauty client) is the main persona I focused on while redesigning because Elevated’s clientele are mostly interested in beauty. They will need simple and straight forward access to wellness information they are unfamiliar with.

Elevated Beauty & Wellness targets a female audience in their 20’s to early 40’s around Newport Beach, CA.

Personas

I conducted a remote card sorting activity to gain insight on the organization of site content and navigation. I created a Site Map and the main categories are now visible and no longer hidden.

Site Architecture

Users expressed their desire for straightforward and convenient process. To address these needs, I designed common tasks for user testing, including booking appointments and events, finding services, and locating the salon address. My focus was on enhancing the user experience for these specific areas:

Effortless Booking Task Flows

Book an Appointment

Book Sound Bath Event

Find Lash Extension Service

This user flow showcases the steps users may take to gather the necessary information for booking an appointment.

User may visit the Book Now page to learn about the estheticians' work, and also the Service Menu before finalizing their appointment booking.

User Flow

Based on my findings, it is crucial to include specific elements on the website. Firstly, a prominent "Book Now" call-to-action button should be available on every page to facilitate convenient appointment booking when users are ready.

The Service Menu should showcase transparent pricing, easy-to-read descriptions, and a well-organized structure based on services and styles. Additionally, it is important to highlight the esthetician's work experience to instill confidence in potential clients.

Wireframes for Key Screens

Homepage

Visitors to the site should immediately perceive it as a beauty website. It was important to ensure that the "Book Now" CTA button is present on every page, allowing users to conveniently book an appointment when they are ready.

Events Page

The events page includes information about upcoming wellness events, including brief descriptions and active & disabled buttons to indicate availability.

Additionally, photos of past events are included to provide users with a sense of the environment and make them feel more comfortable when considering signing up, particularly if they are new to the experience.

Service Menu

The Service Menu is designed to showcase transparent pricing, easy-to-read descriptions, and a well-organized structure that categorizes services and styles effectively.

Elevated & Wellness aims to embody a glamorous, elegant, clean, and modern aesthetic.

Brand Refresh

Color Palette

The brand is being refreshed to have a more feminine and flirty look. The background color, a peachy cream, is chosen to evoke a sense of soothing ambiance, reflecting their services.

Typography

The Brandon Grotesque font incorporates geometric forms that enhances legibility, while also imparting a touch of elegance.

Photo Treatment

The photos are high quality, featuring white colors to create a sense of open space, while also adding a touch of warmth by showcasing hands and faces.

Links

Prototype & Testing

Gathering User Insight and Feedback

I gathered the same participants from the initial user testing of the original website to observe any changes in their experiences. I also noted their impressions of the new design. I conducted six user tests, assigning the same tasks for comparison.

Testing Results

  • After user testing, I replaced the image on the hero banner with a brighter image that aligns with both the beauty and wellness branding.

  • Added a photo slider after every section enables users to save time by avoiding the need to scroll through a large gallery in search of a specific style.

  • The text on buttons has been changed from white to black to increase contrast for better accessibility.

  • Changed “spiritual event” to “wellness event” to emphasize its focus on health benefits rather than religious connotations.

Glow-Up Iterations

Final Thoughts

Learnings

I enjoyed collaborating with the stakeholder to enhance her website. One challenge I encountered was considering certain web constraints. It was important to ensure that design changes could be easily managed by the stakeholder. Additionally, the booking calendar was a fixed plug-in, which posed a challenge. Consequently, I focused on streamlining the flow to access the booking calendar efficiently. Due to limited photo options, I opted for using suitable stock images that aligned with the brand's aesthetic, providing inspiration for the brand's refresh.

Feedback from users was positive, as they appreciated the brand's refreshed appearance. They noted that the information was more easily digestible and found the website navigation to be more intuitive. Users now have access to information about wellness events, including event types and photos from past events.

Due to technical constraints and time, I was unable to redesign and add certain areas of the website. However, in the absence of constraints, I would:

  • Test a new booking system plug-in to streamline and expedite the booking process

  • Add informative guides– such as, what to expect before, during and after a service, how to pick a style that suits you, etc.

  • Establish an online shop to offer beauty and wellness products for sale

Next Steps

See more of my work