Iyara Thai Bodywork is a massage store based in Los Angles that specializes in Thai style. Receiving a massage is an experience that people from all walks of life find enjoyable and something they want to repeat over and over again. A great massage can help people to relax and relieve stress, relieve muscular pain and chronic tension, and even improve your sports performance. There are many different types of massage services available at Iyara Thai bodywork, such as Swedish Massage, Deep Tissue Massage, Sports Massage, Thai Yoga Massage, and etc.
Evaluating the Initial State
The two screenshots below are from Iyara Thai bodywork website. This website has some issues:
1. This website is not responsive;
2. The font of navigation bar is hard to read;
3. Unorganized layout;
5. No logo anywhere;
6. The text box is not wide enough;
7. There are too many words on the homepage.
The homepage of Iyara Thai bodywork as of January 2020.
The "service" page of Iyara Thai bodywork as of January 2020.
A screen recording to show the website homepage.
Persona Hypothesis
Based on my conversation with the employees of the store and research on the internet, I identified two types of users:
1. Customer for relaxing purposes (Primary Persona) : They are looking for experience to enjoy, relax and relieve stress, so they care more about environment and more likely to try new massage types.
2. Customer for medical purposes (Secondary Persona): They are looking for professional therapists to focus on certain body parts, so they are less likely to change massage therapists but more likely to visit the store frequently.
User Interviews
In order to understand my two types of users better, I conducted user interviews that would help me to know their needs, goals, and experiences at Iyara Thai bodywork. I visited the store and interviewed five customers randomly. The questions I asked in the user interviews are mentioned below.
Questions for customer for relaxing purposes:
1. How often do you get a message service?
2. How did you make the appointment for today? (Call, online, or walk-in)
3. When you make your appointment do you ask for specific therapists?
4. How did you know find Iyara Thai bodywork? (Have you been to their website?)
5. What kind of massage did you get this time? Would you like to try some other new types of massage for next visit?
6. What is the most important thing for you when searching for a massage place online?
Questions for customer for medical purposes:
1. How often do you get a message service?
2. How did you make the appointment for today? (Call, online, or walk-in)
3. When you make your appointment do you ask for specific therapists?
4. What kind of massage did you get this time? How was it?
5. Would you like to try some other new types of massage for next visit?
6. What is the most important thing for you when searching for a massage place online?
The notes for my interviews.
Talking to the customers face to face really helps me to understand my users much better. After the interviews with five customers, I synthesized my personas into the following versions:
Primary Persona - Customer for relaxing purposes
Primary Persona - Customer for medical purposes
Goal-Directed User Scenario
In order to better understand the needs and goals of the primary persona, I fleshed out a goal-directed context scenario:
Lisa has been really busy for the past months. She is going to have another big project for work next week. She feels very tired and stressed. Lisa wants to book herself a massage appointment. Lisa calls her best friend Christine and Christine suggests Lisa to go to Iyara Thai Bodywork. She opens her laptop and goes to Iyara Thai Bodywork website.
Lisa looks at the Photos on the website and she likes the environment in the store. She notices there are many different types of massages offering in this store, so Lisa goes to the details page to learn about the differences among these massage styles. The website introduces each massage type and suggest Lisa to choose Swedish Massage or Thai Yoga Massage based on her massage experience level. Lisa choose Swedish for herself and books the appointment online. She checks the availability calendar and chooses the best time for her. She gets a conformation text message right after she made the appointment.
Lisa arrives at the store ten minutes before her appointment and shows the conformation text to the front desk lady. She enjoys the experience. After massage, Lisa is so happy and relaxed. Lisa decides to go to the store every two weeks.
User Cases
From the scenario above, I notice that there are some important use cases for customers while they using the website.
Make Appointments Online
1. User comes to Homepage and click on “Make an appointment” in navigation bar
2. User lands on Appointment Page. User checks the calendar and choose available date
3. User come to Appointment Detail Page. User chooses specific time, massage type and therapist
4. User lands on Personal Info Page and fills out name and phone number
5. User lands on Conformation Page. User verifies information and clicks Book this appointment
6. User reviews Thank You Page and gets a conformation text message on the phone
Check Availability
1. User comes to Homepage and click on “Make an appointment” in navigation bar
2. User lands on Appointment Page. User clicks on Check Availability button
3. User lands on Availability Page. User sees the calendar which showing all the available dates. User clicks on the desired date
4. User sees all the available sections for that date. User clicks on specific time
5. User could click on Make This Appointment button and lands on Appointment Page. Or go back to Homepage
Compare Different Styles
1. User comes to Homepage and click on “Thai Massage Technique” in navigation bar
2. User lands on Thai Massage Technique Page. User clicks on the types he/she interested in and clicks the Compare button
3. User come to Details Page. User reads details for the massage types and click on Suggestion button
4. User lands on Suggestion Page and reads the suggestions to different levels of customers
5. User could click on Try It Out button and lands on Appointment Page. Or user could click on Got It button and lands on Homepage
Feature List
I created a list of features premised upon my user interviews and the inspiration websites. The major features are mentioned below:
1. Calendar - Calendar for showing available dates
2. Reservation System - Form to make appointments for specific date, time, massage type, and massage therapist online
3. Registration System - Ability to register accounts for new users or log into accounts for returned users to receive special discount
4. Browse Image Gallery - Click the left/right arrow to see different images of the store
5. Text Message - Ability to send a conformation text message to the user’s phone number after the user made an appointment
Sitemap
I made this sitemap before making my wireframes, so I could have a clear idea about each page. The sitemap below shows how each page are connecting with one another. The sitemap also included the footer information that I would want to display on the website.
Sitemap for my project
Features and functionality list to describe the content of each page
User Flow for three use cases of my customers.
Wireframes
According to my sitemap above, I made these desktop wireframes for each page. I could design the content and had a basic idea of how each page would look like.
I also created mobile/responsive version of the desktop wireframes. These wireframes will look like images below on mobile phones:
Visual Design
A logo could help customers to remember a business. Customers seeing the logo of the store, or similar shapes, could remind them the store itself. Since the original website did not have a logo, I designed a logo for the store. I also decided to keep green as the theme color for Iyara Thai bodywork website.
Logo and Theme color choice
After adding colors and pictures into my wireframes, the mobile design looked like this:
Prototyping
After designing each page, I connected all the pages together. I created a mock-up of the User Interface using the inbuilt prototyping functionality of AdobeXD:
My AdobeXD prototype page
You could see more details with my AdobeXD prototype for this project by clicking here
Research Plan
Goals
1. Users will be able to tell from the homepage that this is a site for providing massage service
2. Users will be able to make an appointment easily
3. Users will be able to find the phone number and address on each page
User Profile
Any person who is either interested in getting a massage or had a massage within 18 months
Establishing Questions
1. How did you find the massage store last time?
2. Have you ever book any massage appointment online?
3. What would you expect to see on the website while searching for a massage store?
Tasks
Task 1 - You are browsing this website online. What do you think this website is for? How do you think about the logo at the top right corner?
Task 2 - You would like to give this store a try. Making an appointment on this website.
Task 3 - You don't know which massage type to get, so you decide to see how other customers think about different massage types here. Browsing customer reviews on the site.
Task 4 - You like deep tissue massage the most, and you would like to know the price for it. Find the price for different types of massages.
Task 5 - You are are going to the store to enjoy your massage. Could you find the address and phone number for the store?
Testing Results
I use unmoderated study on Validately to do the usability test. Here are my testing results:
Findings
1. 100% of my participants were able to tell from the homepage that this is a site for providing massage service so I will keep the current homepage design.
2. 100% of my participants thought the phone number and address were very obvious so I am going to keep where they are.
3. 100% of my participants liked the design of the home page and the color of the logo, so I will keep the current font, color scheme, and layout.
4. 100% of my participants passed all my tasks so I am not going to make any big change to my UX Design.
5. 75% of my participants get confused by the choice of the specific date for task 2 due to my unclear instructions, so I will give clearer instructions in the future.
Click below to view the highlight reel that showcases how users performed the tasks and findings:
Highlight Reel
Design Updates
After usability testing, I made some changes:
1. I changed "Service" into "Service & Price", so it is easier for users to find the prices for different types of massages.
2. I added a page for users who clicks "Load more" on my "Gallery" Page, so the user could view multiple photos on the same page.
3. For future testing, I added specific date, time, and length to my task instruction.
The Changes I've made.
