UX Design Case Study

MADAYA Responsive Design

A Sequential Flow Design for Spa Subscriptions

Project Overview

MADAYA is a holistic destination spa offering monthly subscription plans to simplify the ability for routine guests to purchase spa services.

View Prototype
Image of the Madaya Spa Website Homepage on Desktop
Project Overview

The Problem & Goal

Frequent spa guests are frustrated with the process of purchasing so many individual spa services for each appointment. The goal is to design a responsive website that will allow guests the opportunity to purchase bundled services through a spa subscription plan quickly and easily, regardless if they are using a desktop or mobile device.

Frame slider phone
Image of Madaya Spa Homepage
Image of Madaya Subscription Tiers ($49, $69, $99 per month)
My Role

UX Designer

My Responsibility

Paper and Digital Wireframing, Low and High-fidelity Prototyping, Conducting Interviews & Usability Studies, Designing for Accessibility, and Iterating on Designs.

Tools Used

Figma, A11y

Duration

4 weeks

User Research

Understanding the User

Pain Points   ⎯   Personas  ⎯   User Journeys

User Empathy

I conducted interviews and created empathy maps to understand the users I designed for and their needs. The primary user group identified through research were middle-class and wealthy adults who frequented spas, and were frustrated with the inability to bundle spa services for one recurring monthly price.

This user group confirmed initial assumptions about the unambiguity of spa services, but research also revealed that unclear pricing models was a cause that prevented many would-be clients from purchasing a service. Other pain points included the inability to purchase online, and the lack of premium service offerings for high-end guests.

Image of Empathy Map detailing brief statements about what a user says, thinks & does.
Get to Know Mia

User Personas

Mia is a 37-year-old beauty mogul who travels weekly to seek tranquility at the spa. Apart of her self-care ritual, she utilizes all of the treatment options, and services provided. Mia is frustrated by the time invested to purchase individual services at each booking. She wants to keep going, but would prefer enrolling in an unlimited spa plan by subscription.

Cards Gallery of User Persona,
Cards Gallery of User Persona, Mia
Cards Gallery of User Persona, Mia

Pain Points

Identifying the issues that cause frustration before, while, and after a user completes a task is beneficial to designing a good user experience. Below are a few pain points that were identified through research.

Unclear Pricing

Routine guests are overwhelmed by so many different à la carte services. A set cost subscription of bundled services is needed.

Limited Online Purchase

The inability to purchase services online creates a hassle for guests with limited time and account control.

Standard Service

Upscale clientele are frustrated with miniscule premium service offerings. They expect luxury spas to establish exclusivity for them.

Ideation & Usability

Starting the Design

Wireframes   ⎯   Prototypes  ⎯   Usability Studies

User Flow

When creating the user flow, I thought of interaction design by focusing on the ease of selecting a subscription plan. I followed the sequential structure of Information Architecture to complete the user flow. This design allows a user to follow a straight path to checkout, also benefiting the business by easily converting a sale.

Image of Madaya User Flow

Paper + Digital Wireframes

Taking the time to draft desktop, tablet and mobile iterations on paper ensured that user pain points would be addressed in digital wireframes. For the home screen, I prioritized the button starting the subscription process which helps users save time.

After ideating and drafting the sequential flow on paper, I designed a progress indication bar at the top of the flow screens. This will help users identify how many steps are left to complete the checkout process, keeping them informed & empowered to purchase.

Image of Paper Wireframes for Madaya Spa

Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was for the user to select a subscription plan and purchase.

View Prototype

Usability Study Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

  1. Users want to see how many steps it takes to complete checkout.
  2. Users want to see images of spa services before purchasing/ booking appointment.
  3. Users want to be able to read information about what spa packages consist of before purchasing / booking appointment.
  1. Users want to view the spa's contact information (phone) without exiting the checkout process. 
  2. Users want to select a spa plan, and still be able to see the non-selected plans without having to go back to the previous screen.
  3. Users want to know that their payment information is safe.
Mockups & Prototypes

Refining the Design

Visual Design   ⎯   Accessibility  ⎯   Iterations

Visual Design

When creating the mockups, I thought of visual design concepts by incorporating color, typography & iconography to create visual hierarchy and emphasis. I used this opportunity to try a dark-mode design with deep earthy greens and browns to complement the golden-hour photography. As a play on the golden-hour photography, I used drop-shadows  with minimal blur to make the design mimic sunlight shining directly above. This can be seen on section titles and several buttons.

Madaya Style Guide (Color, Type, Icon)

Mockups

Based on insights from the usability studies, I decided to redesign the homepage from the original wireframes. I used this as an opportunity to try non-traditional design techniques.

Madaya Visual Design Iteration Number 1

Mockups

I iterated a few times with the visual design, but in the end I chose to complement the user flow with a restructured layout, off-placed navigation menu, and an informational accordion of spa treatment offerings.

Madaya Visual Design Iteration Number 2
Accessible & Inclusive Design

Accessibility

Accessible and inclusive design considerations are essential for a good user experience. Below are a few highlights that were considered for this case study.

Traversal Annotations

I used the A11Y Plugin to help annotate the checkout design for keyboarding and screen reader users. This adds a control to the tab order which on desktop deviates from the normal top down flow. Annotating the tab order helps users who are unable to select a field by mouse to input information.

Alt Text

Provided access to vision impaired users by adding alt text to images for screen readers to read their context.

Color

Only used background and foreground color combinations on text that either met or exceeded the WCAG AAA 7:1 contrast ratio guidelines on normal text.

The Outcome

What I Learned

Takeaways   ⎯   Feedback  ⎯   Next Steps

Going Forward

Although this case study has reached its conclusion, the UX design process is continuous. During my spare time, I will continue iterating for improvements.

Takeaways

While designing MADAYA, I learned that responsive web design with a desktop-first strategy has its pros and cons. User feedback guided my design thinking process, and I was able to translate that to the smallest mobile screen also.

The next step is to conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

User Feedback

“I was able to navigate to the checkout easily. The improvements from the first test made using this design better.”

Participant B

High-Fidelity Prototype

The final high-fidelity prototype provided a quick user flow of purchasing a spa subscription plan. It also addressed the need for an option to select higher or lower tiered plans. Users with screen readers will be able to fill out contact fields without issue thanks to the A11Y plugin for traversing. 

View Prototype

Additional Projects

Image of the Veil App Product Page
Image of the MoonChild Web Design Project
Image of the PollPAL App Onboarding Screen
My Logo

A good design is the culmination of good ethics, usability, inclusivity, and visual appeal.