A RMT’s Booking System

A user-friendly webpage and online appointment booking system for a mobile RMT’s clientele.

Role
UX/UI Designer
UX Researcher

Practices
Visual Design, Interaction Design, Branding

Team
Solo

Timeline
July 2022

Tools
Figma, Miro, Keynote, Mockflow, Whimsical, Zoom

The Background.

Bryan Yamashiro, a registered massage therapist (RMT), earned his status through both clinical and spa settings. He then kick-started his independent mobile massage therapy business by establishing his own web domain, advertising on social media, and spreading the word through family and friends. As a sole proprietor, new and existing clientele inquiries and appointment bookings are managed by himself via social media messaging, emails, and mostly texts.

The Problem.

As RMT Bryan’s business began to thrive, clientele correspondence and scheduling through his usual methods of email, text and social media messaging were impeding on his business productivity, efficiency and communication with clientele.

The Objective.

With a growing mobile RMT business, RMT Bryan is seeking an easy-to-use, organized and efficient system through a responsive website in which his clients and himself can use to manage appointment bookings.

The Solution.

Build a user-friendly booking system, with features including the rebuilding of RMT Bryan’s website homepage, linking users to create and/or access their own scheduling accounts as well as the online booking system itself. This would improve user engagement and communication, in addition to the booking process.

The Process.

I put into practice Design Thinking as the primary user-centered design methodology and its five modes of thought, to gather insight, solve potential users’ problems and arrive at the overall concept for the product.

I do empathy research to better equip myself in understanding the users’ emotional, social and irrational drivers that affect the way the users behave; thus, allowing me to develop insights that seek to address their needs. The gaps between what users do and what they say they do are where we find design opportunities. A common mistake is using one’s own biased assumptions and creating a solution we see fit for ourselves, and not for the user or team.
The main goal of this phase is to make sense of the data gathered from the research and clarify the details around what will be created, why, for whom, and how. I begin to form the hypotheses and put together the structural design of content- the information architecture.
Here, I begin to brainstorm and conceptualize the product. Incorporating information architecture, interaction design, the usability and accessibility of it, task flows, user flows and mocking up wireframes.
In this phase, I create our prototypes- low-mid fidelity wireframes with interface designs and responsive visuals. The focus is on how the product will look, feel and be used. Then, I begin the evaluative process on our prototypes.
The last stage of the design process is to polish up the prototype using any feedback and insight given. Typically, the testing is performed by several potential customers. Once learnings are received, I summarize and implement continued iterations.

1. Empathize

I want to learn how individuals understand and respond to existing online appointment systems in order to create a seamless appointment booking experience for the users.

Identifying current & potential pain points.
Determining features & functionalities most suitable & enjoyable for users.
Examining a user’s thought process.
Conducting primary research through interviews, comparative analysis, persona creation.

1.1 Comparative Analysis

Distinguish similarities, differences, strengths and weaknesses of existing competing appointment booking websites.

My Thought Process

Googled “mobile massage therapist websites”, looked up top rated services and clicked on their websites to begin comparing features.
Looked at other services that allowed users to view schedule/book online appointments as there weren’t many available for mobile massage therapist websites.
Analyzed 9 massage therapy websites and 1 healthcare or psychotherapy website.
1 healthcare or psychotherapy website I analyzed uses Jane App as a third party scheduling application. Since I have an account with them already, I signed in to analyze features of this third party scheduling system.
It turns out having an account with Jane App doesn’t mean all my account and profile information transfers to other service providers that uses this third party Jane App scheduling system.
Although the Jane App is it’s own separate third party scheduling system that can be used by any service provider, it functions like the service provider’s very own scheduling system as there is no transference of account information or registration.

Comparative Analysis Findings

44% of massage therapy websites didn’t have an online booking system

44% of massage therapy websites have their own booking system

11% of massage therapy websites uses a third party booking system

Almost half of existing RMT websites do not offer an online booking system, meaning traditional modes of correspondence are still in use. There is still a huge opportune space for RMT websites to transition into online appointment bookings for clientele use.

1.2 Individual Interviews

Gain insight on individuals’ beliefs, behaviours, shared experiences, emotions and thought processes.
Present different scenarios on how, what and why they would approach and assess their plan of action.
Here, we want to understand what online appointment bookings offer to the user vs. other traditional modes of appointment booking.

When asked about their online booking preferences…

6/6 participants prefer to book an appointment through a website than using a downloaded app, because of “extra steps, memory storage reasons, security features or access to phone info, too glitchy, too many permissions, not able to delete cookies”

4/6 participants prefer to have an account than book as a guest, for consistent booking use and record keeping

4/6 participants prefer to book an appointment on a desktop than on a mobile phone. “Screen is bigger to view & you can work simultaneously”

2. Define

Creating an appointment booking process from scratch, how can we ensure users experience an easy, quick, seamless and enjoyable appointment booking process all in their own control?

2.1 Persona Creation

Creating a persona to represent key audience based on interview findings.
Aiding design decisions & increasing empathy.
Getting a better picture of what users expect & how they interact with product.

3. Ideate

Brainstorming and conceptualizing the site. What are the users’ goals? How will your users interact with the product to solve their problem?

Incorporating research findings, info architecture and usability to define how a product will behave.

Focusing on users’ interactions and reactions with the product.

3.1 User Flow

A map of how users can move through the product to accomplish goals; it outlines all possible scenarios, options, errors, dependencies, and outcomes.
Developed a minimum viable product, a version of a product with just enough features to be usable by early customers who can then provide feedback for future product development.
What are the product users’ goals?
Main process is through Guest option but will eventually need to make account to have record of appointment booking history/cancellations/etc.
I broke up the user journey into 4 sub flows to make it visually easier to view.

Legend

1) Treatment Preferences

2) Date & Time Selection

3) Confirmation

4) Cancellation

3.2 Low-Fidelity Wireframes

Building the blueprint and overall structure of the website’s homepage, booking process and account creation with low fidelity wireframes.
Visualizing where and how components and elements should be laid out.
Showcasing quick design solutions for desktop and mobile home pages. Scales are not up to par.
Featuring mobile homepage, desktop homepage versions 1 and 2, booking as a guest and as an account holder, and cancelling an appointment.

4. Prototype

How will the website look, feel and be used?

Creating interface designs and responsive visuals for the prototype.
Crafting UI Kits and style tiles.

4.1 Style Tiles / UI Kit

Showcasing my style tile and UI elements for the homepage of website, user’s account, and guest booking pages.

Lighter purple schemes for the guest booking pages.

4.2 Responsive UI Design

High-fidelity wireframes before feedback, revisions and prototyping.
What my original colour schemes, gradients and pages looked like.
Design approach on colours - worked with shades of sunrises, sunsets and clouds as they are usually images that come to mind when people think of wellness, rest, relaxation, peace and restoration and that was what I wanted people to feel when they book a massage.
I came across a lot of visual accessibility and legibility challenges later on and had to revise colour sets and visual background.
RMT Bryan also wanted to add a symbol he likes- (Ensō (円相) is a Japanese word meaning “circle” and a concept strongly associated with Zen) so we incorporated that symbol into the background of these concept pages.

5. Testing

What are your objectives, assumptions and hypotheses?

Evaluative research.
Usability testing.
Interpreting test results.
Using feedback we get from our users, we then create the next iteration of our work and repeat the design process again.

5.1 Responsive UI Design

Visual accessibility & legibility was a priority and a problem.
There were struggles to make the wireframes more legible and visually accessible without compromising the main design of the site.
These were several iterated wireframes that were more feasible after creating a number of different versions of the original wireframes.

Finalizing high-fidelity wireframes

Created the homepage of website.

These were the main wireframe designs, colour schemes and layouts I decided to go with.

Sample screen for an appointment booking process for a guest

Sample screen for a registered client and their appointment booking account

5.2 Responsive Prototyping

Getting the main flow of a new client’s appointment booking process ready for testing.

5.3 Usability Testing

Planning and conducting the usability test

5.4 Usability Test Findings

5.5 Final Iterations

Made set of questions separated for each guest to answer; once first guest is finished answering all questions, the second guest can begin to answer their set of questions, instead of combining.

The second guest can now answer their own set of questions, instead of combining all guest questions together.

Selected location/time & day can be different for people booking together if wanted. Here is an example of guest #2, Jessie, now being able to choose where she would like to have her RMT appointment, instead of having it default to wherever guest #1, Jacob’s, chosen location is.

Made calendar on appointment-at-a-glance more functional (details of bookings, edit, cancel, etc. When clicking on a date).

Made calendar on appointment-at-a-glance more functional. Registered user can click on a specific date to view schedule details, edit and/or cancel appointment.

Revised cancellation confirmation page to look less like a button, and added option for user to reschedule on the same page.

Pre-iteration on login screen. Revised sizing of text boxes throughout screens.

Prototype:

Click below to view prototype.

View Prototype

Conclusion

What I learned:

Based on my research, clients like to make bookings on a desktop so I had prioritized desktop wireframes.
As this is a concept, I created a simple, short, familiar and useful booking process. However, this concept may not fully work with this solo RMT’s business, as he provides his own massage techniques with a mix of massage modalities for each client as opposed to giving client’s a choice of ‘treatment type’.
Based on my research, clients like to be in control; they want to know their options ahead of time to manage their expectations. They might want to choose their own modalities of treatment and/or select from different types of RMTs, which wouldn’t work in our concept.
Another issue with this booking process concept is that clients may not know the RMT’s availability in real time as the RMT must confirm and review appointment requests for it to be shown on client’s calendar, however, majority of the day he is on the road and providing massage treatments. Realistically, he wouldn’t be able to check his schedule and locations on his GPS until much later in the day or at night. Clientele would still need to wait for RMT Bryan to respond and check his schedule to confirm dates and times.
RMT Bryan and I also brainstormed ideas on how to make his travel make sense (he cannot have anyone book any time as location and travel time matter); we thought of making available days by location (ex. Mondays are for only clients in location X), basing available days around regular clienteles’ schedules as priority, or limiting clients ability to choose date/time by filtering their preferences to ‘morning, afternoon, or night’ and RMT gets back to them with proposed times.
In the end, we went with the concept of having clients input their postal code and developers on the backend can allow dates and times available to pop on calendar based on clients treatment length, party of people, and location to see if they are within 20km from RMT’s previous scheduled client scheduled that day. Backend must also know the breaks/time in between each location of client to ensure RMT can get to location A to B on time. Now there is the potential issue of if the previous scheduled client cancels last minute, then the travel time and distance will change around the day making it more or less efficient for RMT’s business.
RMT Bryan had several challenges detailed above on booking, corresponding with clients and planning out what would make sense for his own schedule (in terms of driving and traffic). In this concept, we ultimately worked on a deliverable that focused on clientele booking and what would be in their control.

What I would do differently:

I would reach out to more massage therapy clients and/or RMT Bryan’s existing clients; for the purpose of conducting more research interviews, prototype testing and for the aim to create a deliverable that would satisfy both clientele needs but also the functioning of RMT Bryan’s business needs.

The next steps:

Conduct another round of usability testing.
Add an About page to the website as users typically want to know who they are working with.
Explore creation of mobile wireframes.