top of page

CALM BODIES WELLNESS:
A MOBILE-FIRST UI PROJECT

Updating an Experience for Key Users on Mobile

Beginning midway through 2025, I started taking on freelance work to continue honing my design skills as I searched for my next in-house role. A family member reached out in August regarding updates to her business's website, on which she sought to educate people about the therapeutic services she provided and allow them to schedule appointments with her. From there, we discussed 

The problem:
How can we ensure that potential clients are aware of the services offered, knowledgeable about which are best for them, and able to schedule appointments quickly and easily?
cbw-home.png
My Role:

  • UI/UX Designer

  • Project Manager

The Team:

  • UX Designer

  • Client

Tools Used:

  • Figma

  • WordPress

My Contributions:

  • Persona creation

  • Design System Creation

  • Mobile-first UX Design

The Process:

​Empathize

  • Understand Ideal Client Customer Base

  • Identify personas

Specify

  • Prioritize persona needs

  • Consider common needs among them

​Ideate

  • Discussion with Client

  • Listing potential pages

  • Find new solutions to common persona problems 

  • Journey mapping

Bring to Life

  • Design system

  • Full UI made in Figma

  • Eventual website creation

​Verify

  • Compare account scheduling frequency with past

  • Feedback surveys sent via email

Outcomes:

  • Design System that uses simple colors and clear text elements

    • These artifacts allow simple navigation across the site and easy reading for elderly individuals without the need for text enlargement add-ons.​

  • New feature: questionnaire for finding recommended services

    • ​This allows individuals who are unsure about which services are best for them (e.g., SweThai Massage vs. Therapeutic Massage).​

DEFINING THE USER BASE

At the beginning of this project, I was approached with only a few things: a commissioned logo and a request to create a new website for the business. However, I needed to know several more things before beginning design work on this proposal:​

​

  • What did the existing user base look like? 

  • How do customers typically find out about the business or services? What advertisements are used?

  • What customers does the client wish to attract? Are there specific careers or demographics?

  • Do customers usually have specific concerns they wish to solve, such as pain or stress? If so, what?

​

Additionally, I learned that advertisements typically consisted of local coupon books, as well as print flyers in yoga studios and related shops, but customers primarily learned about the services through word of mouth.

"The Retiree" 
RICHARD

retiredrick.png

​Age: 70

​

Hometown: Ithaca, NY

​

Motivations: enjoyment, romance, exploration

​

Personality: humorless, straightforward, taciturn

​

Likely services: Therapeutic Massage, Gong Therapy, Meditation for Couples

​

Goals:

  • Schedule a massage therapy appointment with no obstacles

  • Find options for couples

  • Find quick appointments without too much time dedicated to each

​

Frustrations:

  • Usually finds it hard to schedule appointments online

  • Often confused by descriptions of various methodologies

  • Might be unsure of what’s best for him and his wife

"The Athlete" 
AMOS

athleticamos.png

​Age: 28

​

Hometown: Wilmington, NC

​

Motivations: fun, adventure, spirituality, danger

​

Personality: extrovert, talkative, easygoing

​

Likely services: SweThai Massage, Sound Healing Alchemy, Reiki

​

Goals:

  • Relieve sports injuries via therapeutic massage

  • Explore meditation methods to reduce mental stress

  • Schedule appointments quickly

​

Frustrations:

  • Often has trouble finding effective relief for sports injuries that don’t involve pain medications

  • Easily forgets the various types of massage

"The Spiritual" 
SHELBY

spiritualsamantha.png

​Age: 41

​

Hometown: Orlando, FL

​

Motivations: spirituality, self-actualization, calm

​

Personality: outgoing, motherly, curious

​

Likely services: Reiki, Vibrational Sound Massage, Meditation for Couples

​

Goals:

  • Explore spiritual solutions to her problems

  • Learn about Reiki and other healing methods

  • Find self-actualization through spirituality

​

Frustrations:

  • Has trouble scheduling appointments quickly

  • Most massage services she finds are generic by nature

"The Intern" 
IRIS

collegecarol.png

​Age: 21

​

Hometown: Tampa, FL

​

Motivations: friendship, fear, financial stability

​

Personality: friendly, easily stressed, shy

​

Likely services: Head/Hands/Feet Massage, Therapeutic Massage

​

Goals:

  • Utilize regular therapy appointments for everyday stress

  • Relieve pain from repetitive stress injuries obtained via internship

  • Save money via cheap massage services

​

Frustrations:

  • Finds herself with little help in finding sincere services to help her de-stress

  • Often finds it challenging to schedule multiple services in advance.

IDEATING FEATURES AND MAPPING JOURNEYS

The next step was to determine how users would progress through the journey:

  • Learning about the business

  • Deciding which services to book

  • Scheduling the service

 

Another key factor was that some individuals would schedule services that they might not be completely satisfied with afterwards, because they had other expectations.

​

After some ideation with the client, we decided that the solution would be a questionnaire that asks users about factors that could affect recommended services, such as the following:

  • Age

  • Mental stress levels

  • Sedentary lifestyle

  • Everyday pain

  • Spiritual curiosity

CBW Journey Map.png
mobileui-answer.png

From there, we decided that education of services could be done in three ways: 

  • Questioning users about their needs 

  • Offering in-depth explanations of services on dedicated pages 

  • Providing brief explanations of services when listing all services and prices on a single page

​

Arguably most importantly, I learned that the majority of the customer base uses the website through handheld devices, such as phones, because the website was advertised via QR codes. Due to this, we agreed that I should prioritize mobile UI when designing the site.

BUILDING A MOBILE-FIRST UI

cbw-schedule-mobile.png
cbw-about-mobile.png

Before creating the design system, I conducted a competitive analysis by researching local massage and spa businesses to understand how their content was organized, as well as the general emotional design schema. 

​

Most sites had dedicated pages for the following:

  • Scheduling

  • About the studio or service

  • Types of services

 

Once color palettes and text styles were created in Figma, organizational content was centered around two priorities: 

  • Clear distinction of topics to prevent overwhelming users with too much information via color card UI

  • Readable, accessible text via larger text sizes

NEXT STEPS: REFINEMENT AND REALIZING

More still needs to be done for this project, but the next design steps in the immediate design process include the following:

  • Refine content via the inclusion of descriptive, concise text that educates users on services

  • Modify the existing website or create a new domain via WordPress, Drupal, or a similar framework for an accessible design standard

  • Design print advertisements to improve outreach

​

Once the site and advertisements are deployed and new customers have booked appointments, validation of design choices and collection of metrics will be done via various methods:

  • Tracking site usage via metrics such as heat maps and the number of hits per week

  • Surveying users after each service to determine the accuracy of the recommendation

  • Designing ease-of-use surveys and including them in the site with pop-ups after scheduling accounts

massage-desktop.png

© 2025 Antonio Diaz. All rights reserved.

bottom of page