May Sky Massage

Elevating a small business with
responsive web design.

Overview

For this project, I redesigned the website for May Sky Massage, a budget-friendly spa located in Los Angeles. The target audience comprises career professionals aged 25-65 with some secondary education. My objective was to enhance user experience by developing a responsive web design featuring a booking functionality, addressing the limitations of their current simplistic website.

The Problem

The primary challenges with May Sky's online presence lie in its lacking design, absence of online booking options, and lack of detailed information on their services. These pose the risk of deterring potential clientele and hurting the business's credibility.

May Sky Massage Spa has limited resources common to small businesses, hindering the development of a solid website and brand presence in the market.

The Solution

In order to attract new clients and give prospective clients more information and features that will streamline their booking processes, I designed a responsive website tailored for desktop and mobile users with intuitive navigation, an integrated appointment booking system, and readily accessible information.

Category

Web redesign, logo design

My role

UX Designer, Visual Designer, Logo Designer

Tools

Figma, Illustrator, Photoshop

Jump to Prototype

Research

Lack of features creates inconvenience

One notable observation is the prevalent reliance on websites for booking massages among our target demographic. However, these websites often suffer from outdated interfaces and cumbersome navigation.

Additionally, the absence of online booking functionalities compounds the issue, as many users lack the time to engage in direct calls. Consequently, this challenge hinders users' ability to effectively schedule spa treatments or massages, ultimately leaving them dissatisfied with the overall experience.

Key User Pain Points

Navigation

Websites for local massage and beauty spas websites are often confusing according to the user. Features such as menus are absent, text is too small, and photos are unclear, making it difficult to access information.

Lack of Features

Local massage and beauty spas often have websites that are very basic. They often do not have a feature for online booking for potential clients to schedule an appointment.

Limited Information

Many massage websites are simple landing pages with only the bare minimum of information. Users have difficulty understanding what types of services are offered, pricing, location, hours, and more.

Current Website Evaluation

BasePrior to redesigning the website, I conducted an in depth evaluation of its current interface in order to identify the issues to focus on. The evaluation resulted in noting key missing elements detailed below.

  • No call-to-action
  • No Booking Features
  • Lacking information on services
  • Doesn’t follow standard web conventions
  • Navigation is confusing and inconsistent
  • Lack of style guide and inconsistent brand

SWOT Analysis

I started the project by conducting a SWOT analysis of May Sky Massage in order to uncover areas for design. The analysis revealed that May Sky provided a lot of the basic needs that clients are looking for in a massage spa, but there was a lot of opportunity in the digital space to elevate the experience for new customers, including creating a solid brand and redesigning the website.

Design

Logo Design, Branding

Part of elevating the digital experience of their clientele was to enhance May Sky's brand with a better logo and a consistent style guide for its website.

The intention was to maintain simplicity and elegance in the logo design, reflecting the calming and soothing themes synonymous with massage therapy, and to incorporate color palettes evocative of tranquil sensations, such as shades of lavender and lilac, to resonate with users.

Simplified Navigation

The main issue users experienced was website navigation, so I aimed to make a simple sitemap that allowed simple navigation. My goal was to make a top horizontal navigation menu for desktop and a hamburger menu for mobile that allowed easy navigation to access information.

Wireframes and Prototypes

After conducting thorough user research, I shifted my focus to wireframing and prototyping to see how my designs would translate to users. Additionally, I planned to utilize their feedback to improve the final redesign of the website.

Paper Wireframes

With a user-friendly mindset, I sketched out paper wireframes for each screen in the website. The Home and Services page (now titled “Treatments”) are drawn with the goal of optimizing user experience.

Because users often use several different devices to access websites today, I drew wireframes designed for different screen sizes. This will make the site fully responsive across mobile and desktop devices.

Digital Wireframes/Low Fidelity Prototype

Transitioning from paper wireframes, I translated the concepts into a low-fidelity digital prototype. This phase focused on refining the user flow and interactions, incorporating insights from research. Using tools like Figma and Adobe Illustrator, I created a simplified version of the app, emphasizing functionality over aesthetics.

Low Fidelity Prototype

In order for me to gather feedback, identify usability issues, and validate design assumptions, user testing after creating a low-fidelity prototype was essential. It helped me refine the user experience and ensure the final product meets users' needs effectively, minimizing the risk of costly redesigns later in development.

View Low Fidelity Prototype

Final Design

The final design was optimized for both desktop and mobile to ensure a responsive website design that enhances the digital experience for May Sky's users. A style guide was included for them to implement and create consistency with their brand identity.

Additionally, I included screen sizes for both desktop and mobile users. Often users are not at a desktop when booking an appointment, so I optimized each page for mobile devices so users have a pleasant experience regardless of what device they are using.

View High Fidelity Prototype

Accessibility Considerations

Headings with different sized text in each page have been added to indicate a clear visual hierarchy and make navigation easier. The brand's color paleette on the website has also been tested and verified for contrast accessibility using Stark.

Key Takeaways

Simple features go a long way

Target users shared that the navigation was intuitive and simple, booking appointments was simple, and information was easy to access if curious about May Sky’s spa treatment options.

Final Thoughts

Implementing responsive web design can streamline complexities, empowering small businesses to effectively attract new clients and flourish. Although simplifying navigation and information can pose challenges, prioritizing user needs is paramount and contributes to enhancing the overall experience for the intended audience.

Next Project: VizFit

View Project