Web Design
Winter/Spring 2018

Blue Turtle Bodywork

Through a research-informed, people-centered, collaborative process, I designed the website for Blue Turtle Bodywork, a Chicago-based massage therapy practice that prioritizes trauma-informed bodywork for queer and trans people of color.

READ ON MEDIUMVISIT WEBSITE


The Challenge

Blue Turtle Bodywork, a Chicago-based massage therapy company centering queer and trans people of color, needs a streamlined, transparent way for customers to book appointments.

The Approach

A responsive website that clearly communicates Blue Turtle Bodywork’s services, informs clients of what to expect, and provides clients with easy appointment bookings.

Goals

  • Identify the target audiences of Blue Turtle Bodywork, and their needs, goals, priorities, and pain points.
  • Design clear information architecture to facilitate key user interactions, including appointment bookings and contact inquiries.
  • Design a responsive, easy-to-maintain website that meets user needs and is consistent with existing branding assets and content.

Duration

10 weeks

Tools

Sketch, Squarespace, Google Sheets, Pen and Paper

My Role

User Researcher, Interaction Designer, Content Strategist, UX Designer, UI Designer


The Design Brief

Prior to this project, Blue Turtle Bodywork was a massage therapy business that did not have an online presence.  There was no way for potential clients to  learn about the business, direct inquiries, or read about different services offered. I worked with Blue Turtle Bodywork to design a responsive, accessible website to promote their brand, increase visibility, and to allow their customers to easily schedule appointments.

Phase 1: 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 with bodywork services. I also conducted a competitive analysis of bodyworkers and massage therapists in the Chicago area to identify common features and content of their websites.

The primary and secondary research generated critical insights into the expectations people have when looking for bodyworkers. The process also 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.

Summary of user research findings. Text document of research findings available here.


Additionally, the research was critical for pinpointing target audiences. Both business and customer stakeholders articulated the importance of bodywork services that center queer and transgender people of color, and the research confirmed that the proposed design would need to clearly communicate this framing.

Document showing a persona in their late 20s named T. This persona represents a target audience group. The document includes a bio and personality information about this hypothetical character.
T, a persona representing one of Blue Turtle Bodywork’s target audiences.
Document showing a person in their 20s named Leanne, who represents a target audience group. The document includes a bio and personality information about this hypothetical character.
Leanne, a persona representing one of of Blue Turtle Bodywork’s target audiences.

Phase 2: Interaction Design

Design Strategy

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

  1. To 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.
A matrix with four boxes representing business needs mapped against customer need.s
The matrix above shows business needs, customer needs, and customer pain points. The “Focus” quadrant highlights project priorities whereas the “Avoid” quadrant reminds us of potential pitfalls to prevent. Text document of business needs and customer needs is available here.

In addition, the research showed that the following web interactions would be essential to meeting stakeholder goals:

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


Information Architecture: Site Map and Flows

I used the research findings and stakeholder needs to articulate the proposed information architecture through a site map and user flows.

Hand-drawn diagram showing a hierarchy of site pages.
Low-fidelity site map.

In the first version of the site map, I aimed for navigation that met audiences’ desires for clear information about bodywork services and clear pathways to contacting and booking appointments.

Hand-drawn diagram showing a sample pathway a person might take on the website in order to book an appointment.
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 in a Content Management System. My client and I agreed on the importance of designing a solution where my client could independently manage and edit site content. Squarespace offered a balance of unique, accessible, responsive interface design options, along with easy-to-learn interface for site administrators and editors.

Phase 3: Usability Testing + Iteration

After wireframing and prototyping an initial set of pages, I conducted usability testing in order to identify potential errors and issues that people might encounter when engaging with the prototype. I tested 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.

A set of four blue boxes containing quotes from usability testing participants.
Summary of key usability issues that emerged through first round of testing. Text document of these findings is available here.


Usability testing 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.

Phase 4: 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 set of high-fidelity mockups showing the Home page and Services page, in desktop and tablet views.
A set of high-fidelity mockups of key pages in desktop and tablet view.

Key Takeaways

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 co-create a shared vision. 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. 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
BACK TO PROJECTS
Connections are nice

Get in touch.

Whether you want to bounce ideas for a project, want to talk about design and decision-making, or just want to say hi, I'd love to hear from you.

CONTACT ME
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.