UX Case Study: Blue Turtle Bodywork Website Design

How might we create a digital experience that authentically showcases Blue Turtle Bodywork’s value proposition, provides current and future customers with satisfactory information, and generates an increase in bookings?

Overview

Blue Turtle Bodywork is a massage/bodywork business that currently does not have a place to which they can direct bodywork customers. There is no place where potential Blue Turtle Bodywork customers can learn about the business, direct inquiries, or read about different services offered. Blue Turtle Bodywork is looking for a website to promote their brand, increase visibility, and to allow their customers to easily schedule appointments.

Project Goals

  1. Conduct lean primary and secondary research to identify the target audiences of Blue Turtle Bodywork, and their needs, goals, priorities, and pain points.
  2. Develop a solid design strategy that weighs target audience goals against business goals.
  3. Design clear information architecture to facilitate key user interactions, including appointment bookings and contact inquiries.
  4. Design a responsive website for Blue Turtle Bodywork that meets user needs based on research and strategy, and that is consistent with existing branding assets and available content.
  5. Conduct ongoing monitoring, usability testing, and iteration to ensure that product meets the goals and needs of both the client and their customers.

Research

In order to better understand the needs and priorities of potential Blue Turtle Bodywork customers, I designed and distributed a brief survey to people who had had experiences receiving bodywork/massage services. I collected 18 responses over five days from across the United States and Canada. The survey was open to anyone who had ever sought massage services from a massage therapist.

I also conducted a competitive analysis of bodyworkers and massage therapists in the Chicago area to identify common features and content of their websites. Because Blue Turtle Bodywork is an individual/one-person business, I scoped the competitive analysis to individual massage therapists, rather than larger massage/spa/bodywork companies.

While lean, this research provided critical insight into the expectations people have for websites of massage therapists from whom they might seek services, and helped us develop a better marketing landscape of the local massage and bodywork industry. The research laid critical groundwork for the rest of the project by helping clarify key features and content areas to include in the Blue Turtle Bodywork website.

Based on research, I designed two personas of Blue Turtle Bodywork’s target audiences.

The research helped us clarify the essential information and interactions that we would need to offer on the Blue Turtle website in order to facilitate desirable and successful engagement with current and future customers.

Additionally, the research was critical for pinpointing our target audiences. Through both an informal conversation with the business owner and the user surveys, it was clear that massage services that are centered on queer people of color is a priority for all stakeholders. Given that this is a niche target audience within the massage industry, it seems that this will be a critical selling point and value proposition to highlight in the final design.

Top factors people consider when selecting a massage therapist:

  • Price
  • Reviews
  • Knowledge/skills/experience

Additional factors:

  • Level of comfort (“not creepy”)
  • Trauma informed
  • Queer friendly
  • Trans friendly
  • Last-minute availability and ease of scheduling
  • Vibe/attitude/energy — calming

Top types of content people expect:

  • Prices of services (100%)
  • Explanations of different services offered (89%)
  • Business hours and location (79%)

Top three actions people want to take on website:

  • Read about different kinds of massage/bodywork offered (100%)
  • Book an appointment (89%)
  • Contact the business via email (63%)

Information Architecture + Interaction Design

The research helped clarify the following goals that are mutually shared by Blue Turtle Bodywork and their target audiences:

  1. Have a comfortable, trustworthy working relationship between massage therapist and client;
  2. For all involved to feel safe, affirmed, comfortable, and respected before, during, and after massage;
  3. To give and receive high quality bodywork in an environment that affirms people’s whole selves
  4. To have an online experience that facilitates customer engagement, including booking appointments and contacting the business owner
Using the research findings, I mapped the goals and pain points of Blue Turtle Bodywork against those of its target audiences. I also identified goals shared by both parties.

In addition, the research showed that the following interactions were essential to meeting the goals above:

  1. Booking an appointment online
  2. Contacting Blue Turtle Bodywork by email
  3. Reading about services online, including types of massage and pricing

With research findings in hand, I began to lay out the basic structure of the site by sketching out a site map and user flows.

In the first version of the site map, I aimed for straightforward navigation that met audiences’ desires for (1) clear information about bodywork services and (2) clear pathways to contacting and booking appointments.
In one low-fidelity user flow, I diagrammed how Leanne, one of the personas, might navigate the site in order to book a bodywork appointment.

Wireframing + Prototyping

Through diagramming user flows, I identified key pages that I would need to design, and sketched them with pen and paper. I quickly transitioned to designing a high-fidelity, working prototype. I used a site builder because I wanted my client to have the option of managing and editing the site content without feeling the need to know front-end development. Squarespace offered the flexibility to customize the visual design while also being a platform that is accessible to people with limited experience in website design.

Usability Testing + Iteration

After designing the prototype, I updated my client on the status of the project and showed him a preview of the website for overall feedback. I wanted to make sure that my client felt informed on the status of the project and was able to provide input where desired.

Additionally, within the scope of the project, it was most appropriate that my client develop the text content for the website, so we reviewed what was needed for the final product.

I also conducted usability testing in order to identify potential errors and issues that people might encounter when visiting the site. I recruited people within and outside of the client’s target audience. I wanted to test the website with people who did not necessary frequent massage services in order to better understand the level of clarity of the site content and structure, especially to people who are new to, or unfamiliar with bodywork.

Through usability testing, I identified key usability issues, including the following:

  • low contrast between background images and font make some content hard to read and potentially inaccessible to some people.
  • the massage services page needs more specific information about pricing and duration, as well as clear calls to action for booking.
  • since booking takes place in a separate platform, it could be helpful to notify people that they will be taken to an external site to complete their transaction.
  • the sliding scale concept is attractive to visitors, but the current layout of the information on the pricing page is hard to digest.

Usability testing also showed patterns in how people perceived the overall site aesthetic. People repeatedly reported that the site evoked a sense of calmness, tranquility, peace, and relaxation. Moreover, the results of the usability tests highlighted the key role that the call to action on the home banner plays in people’s experiences with the site; most people reported that clicking the “Learn More” button would be their first action on the site.

“because the positioning of the business is unique and interesting, i’d want to learn more about it before even thinking about what services are offered”

In addition to live and remote usability testing on site navigability, I conducted tests to evaluate the overall accessibility of the site. By running the site through accessibility assessments, I learned that the site had a number of areas of improvement, including missing alt text for images, insufficient contrast, and issues with hierarchy for text. I corrected the issues and continued to re-test the prototype until it passed accessibility tests.

Through the usability tests, I was able to develop a quick roadmap of usability issues to address, and iterated on the design.

Site Launch

After several rounds of testing and iteration, we were able to launch the site. With the site live, Blue Turtle Bodywork was able to not only expand its audience reach, but was able to increase audience engagement and earn its first online bookings for massage services.

A compilation of key screens in desktop view.

Key Takeaways

A core takeaway from this project is that establishing clear, open, honest rapport with clients is integral to project success. From the beginning, my client shared his goals and needs, and was explicit about where he wanted to be involved with project decision-making, versus where he wanted me to take ownership. Through as-needed email check-ins, we were able to connect and craft a shared vision with fluidity and ease. My client helped me see areas where the prototype needed to be more accessible to all audiences, and he helped recruit participants for testing and research. While it may take more time and effort, collaborative design processes tend to result in all parties feeling connected to the experience, and contributes to a more cohesive, thoughtfully-produced end result.

“Working with Erika was a wonderful experience! I had no idea how to start thinking about creating a website for my business, and Erika was great at asking questions that had me get clear on what I wanted to share through my website. Her communication with me throughout the process was prompt and effective. She made room for me to give as much input as I wanted to have or not have in different areas of designing the website. I absolutely love the way my website turned out, and will definitely turn to Erika first for future design needs.”
— JJ, Blue Turtle Bodywork

Questions? Thoughts? Interested in working with me? Let’s connect at erikaharano.com. Thanks for reading!

Like what you read? Give Erika Harano a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.