Designing 'Flow with Su' for web and mobile
UX Case Study


Timeline: 3 weeks

Platform: Responsive Website

Role: UX/UI Designer | Webflow Developer

Su Xu is a licensed massage therapist that had been stationed in Japan and had recently moved back to the states in 2020. After all the commotion of moving back, settling down, and getting used to the pandemic, Su thought of finally trying to get her massage business going again. She offers different types of massage services but also teaches private yoga classes. Su is only interested in female clientele at the moment.

Su reached out to me to help establish an online presence that would showcase all the services she provides along with a modern take in design.


Starting off, I needed to ask myself a few questions. Who are our primary users? What kind of goals do they have? What our research goals and main goal for this website will be.

Research Goals
High Level Goals
Target Market


User Interviews

We decided to conduct user interviews in order to obtain qualitative data to understand user pain points and then organized all the takeaways in an affinity map.

Competitive Analysis

The goals for this analysis was to determine what features, information, and other factors our competitors are using in order for us to distinguish and think about what to incorporate with what aligns with our user research.

Corporate competitors:

1. Online Booking

Most of our competitors have the feature to let users book an appointment or reservation online directly through their website.

2. Visible Call-to-Action

The Call-to-action, in this case the booking or appointment button, is visible as soon as landing on the websites.

3. List of all services provided

All services are listed to showcase the different options users can choose from.

User Persona

By creating a persona for our target users, designing the website with the understanding of who we are building for will make it easier to ideate solutions for the problems they are having.

The Problem

Women looking for massage and yoga services need an informative and trustworthy website with a self-booking application where they would feel comfortable booking an appointment for a massage visit.

Feature Prioritization

After conducting user research by interviewing participants in our target market and synthesizing the findings, I was able to learn that users like transparency. Oftentimes when websites don’t include prices, users tend to steer away and look for a different place. Also, having reviews or testimonials gives them a sense of trust similar to how a friend would recommend a place. Lastly, users prefer having an online booking system where they can find an opening and book it themselves.

In order to create an MVP (Minimum Viable Product), I placed all features that interview participants mentioned they would like to see on a 2X2 feature prioritization diagram and found that designing a modern website with neutral or bright colors, including all services with prices along with a section with testimonials or reviews, and a call to action that would direct users to a third party booking app would be the most effective first iteration.


We believe that designing a website that showcases all the different services with descriptions, prices, testimonials and an easy to use booking system where users can pick the dates and times, they will be able to make a decision to book an appointment a lot easier.

We will know this to be true when users start booking appointments and also booking them repeatedly.


User Flow

Although the main goal is to get users to book an appointment and the user flow for this website is fairly simple, we need to keep this in mind to make sure this is fulfilled through our design.


Low Fidelity Wireframing

Making sure to get the idea of the sketches fast into a primitive design in order to test again and see what changes would be best made or if the original layout idea was the best.

High Fidelity Wireframing

Refining and honing down into the design.

Final Design

Finalizing the design after doing more testing and tweaking issues that were found during the tests.

Final Product

Check out the live site!


What we learned

After many rounds of user testing, we learned that users had a strong preference on whether the site had an outdated look or a modern design layout. That is why we had to try out a second different style from the original high fidelity and users preferred how the last iteration looked over the previous one.

Hypothesis confirmed

In this day and age, we have more and more people who use technology on a daily basis. Which means that they are now more likely to use texting over calling, emailing over letters, etc. Our research showed that giving users the ability to book appointments online was a major influence on wether they would book an appointment since this removed the hassle to interact with someone over the phone and saving a lot of time for both the user and the business owner.


The timeline for this project was pretty tight. We only had a couple of weeks for research and the remaining for design and testing. Given the time frame, we were not able to dive deeper into the project and compromising on certain features. In the future, I would like to work on integrating the booking application, which is Calendly, in the website itself. This way, users won’t need to leave the page in order to book.I would also like to run metrics after launch such as how many more bookings Su will get and the number of users that leave the site to see what we can improve.

Thank you for taking the time to read through this case study. The process for each project will differ depending on the situation, project scope, and what the main problem we are trying to solve is.

Got a project? Let's talk.

Whether you've got a new project or have any questions? Feel free to drop me an email and I'll get back to you shortly.

Get in touch


© 2021-2022 Laud Media. All Rights Reserved.

Follow me