Back

Massage Associates

Website redesign for a highly rated massage studio offering a more seamless booking experience and website navigation, as well as improved visual design and simplified e-gift card purchasing.

My role

Product Designer

Tools

Figma, Photoshop

Platform

Website

Timeline

June 2023 - August 2023

Overview

Massage Associates is a local business in Columbia, Maryland, specializing in a wide range of massage services and treatments. With this site redesign, I enhanced the user experience for customers as well as addressed and solved the pain points noted by users.

What I worked on

I worked on the website design, redesigning the overall flow on the site, and making the gift card purchasing experience more intuitive.

The problem with Massage Associates

With technology playing a significant role in daily life, most bookings are now made online. However, the Massage Associates website lacks user-centric design and effective visual elements to enhance the user experience.

Let's dive deeper...

The landing page and general site is outdated and lackluster: Massage Associates site has not gone through a redesign for a while. It lacks attractive visuals and clear concise messaging throughout the entire site as well as compelling call-to-action functions. It also has other small problems such as spacing issues.

The website lacks personalization for customers: Massage Associates offers 20 different massages/treatments and 11 enhancements. The amount of services could be overwhelming for customers looking to book their first massage and having to choose between many services.

The website’s content is poorly organized: The website contains many different services as well as lengthy descriptions that are clustered into a long list on one page; the same goes for their booking page. They also do not list their different categories of services upfront. You must scroll through the entire list of services to see all categories.

The e-gift card purchasing experience is inconvenient: Purchasing a gift card on their site requires you to purchase the git card for the amount you desire, download specific files or wait for them to send you an email containing said files, (you only have 7 days to download the files and/or 2 file downloads) fill in the downloaded file, then send it to your recipient yourself. Now that's a complicated process.

The solution and my objectives

  • Improve personalization options for customers.

  • Simplify the process of purchasing e-gift cards.

  • Increase customer sign-ups for the newsletter.

  • Enhance website navigation for a more intuitive experience.

  • Design a simpler and more visually appealing user interface.

Tools

For this project I used Figma for all of my designs and photoshop to update the logo.

Major stats from my research

100%

of people surveyed prefer to book services through sites

90%

of people surveyed would not know what service to book from

80%

of people surveyed found the site to be unorganized

Surveys

After the project kickoff, I defined my research strategy and objectives. Understanding the target audience and their challenges was my priority. I created an online multiple choice survey and shared it in various relevant communities. Based on the submissions, I identified the common pain points, which lead me to the next step. The facts and conclusions that I drew from the survey answers are below.

  • 100% of the people surveyed said they would not know what service to book from the list of services

  • 100% users said when they book self care appointments, they usually book through a website as opposed to calling in to book an appointment

  • Users said purchasing a gift card on the site was complicated

  • Some users even said the website was not aesthetically pleasing

Personas

I wanted to form a deeper understanding of the users' goals, needs, experiences, and behaviors. So, I created 2 personas based on user surveys. I used these personas whenever I wanted to step out of myself and reconsider our initial ideas. The personas affected how I approached the design process and I took in consideration their common goals and frustrations when designing the site.

The Design Process

Sketches

I began the design process with sketches to quickly visualize ideas. My sketches were based on the initial user surveys and the goals for this project. I went through 2 iterations of sketches to make sure the redesigned aligned with the goals set for this project as well as keeping the designs user oriented. The part of the project that went through the most redesign between sketches was the gift card purchasing process.

I wanted to create a more intuitive and user friendly design, especially for gift card purchasing. I created a general design that would allow you to purchase your gift card, pick your recipients, pick your quantity, leave a message, and automatically send the gift card to your recipient on the date of your choice all at once on a single page. As opposed to buying the gift card online, waiting for an email from the company with a gift card, downloading it, filling out, and manually sending it to the recipient yourself.

The other changes I made while recreating my sketches included simplifying the overall design and making important information more relevant and concise on each page. I chose to layout and arrange the elements this way to display important information quickly, upfront, and simply so users can intuitively reach their goals.

Wireframes

Using Figma, I translated my final sketches into low-fidelity wireframes.

User Flow

I developed a user flow diagram to map out the user's journey through the website, showing each important interaction from entry to completion of key tasks. This helped visualize the overall experience and identify opportunities to streamline navigation and improve usability.

UI Design

For the UI design, I went for a fresh, simple, and clean visual style with a light and airy feel and color scheme to invoke the feeling of relaxation along with using a clean and simple design.

e-Gift card solution in depth

With my new redesign for the gift card purchasing experience, users will have a more seamless experience purchasing gift cards. Users will easily be able to quickly complete the following:

  • Fill out recipient info, leave an optional note, and choose their desired price in the same sitting, on one page

  • Easily pick a quantity

  • Pick a date they want the recipient to receive the email and it will automatically be sent on the selected date

    With this user interface, there is no need to wait for an email, download extra files to fill out, or remember to manually send the gift card on a certain date.

Final Flow & Main Screens

Learnings and reflections

Throughout this project, I have learned a lot and working on it helped contribute to my growth as a designer. Here I will share what I learned:

Keep it simple.

Many times we think more flashiness or components equals a better design, but in reality less is more. When creating this project, I went for simple, attractive, and easy to use designs.

Do your research and talk to different people.

When approaching the research for this case study, I was able to speak to different kinds of people from different backgrounds and influenced by many different factors such as age, gender, religion, and ethnicity, which made my research more inclusive.

Do not be afraid to go back to the drawing board!

During my case study, I ended up changing my initial designs as I was in the process of creating wireframes for them. I went back and scrapped my old sketches and came up with newer and simpler ones that I ended up being a lot more happy with. With that, there's a lesson to not be scared to go back to the drawing board to brainstorm ideas!

Thank you for reading my case study!

I hope you enjoyed learning about my design and thought process.