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?

erika
erika
Jun 25, 2018 · 6 min read
Mockup of the desktop home page view of Blue Turtle Bodywork’s 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

Phases: User Research — Design Strategy — Interaction Design — Wireframing and Prototyping — Testing and Iterating — UI Design

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: User 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.

T represents one of two research-informed personas of Blue Turtle Bodywork’s target audiences.
Leanne represents one of two research-informed personas 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. 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
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 interactions would be 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

Information Architecture: Site Map and User Flows

Low-fidelity site map.

In the first version of the site map, I aimed for straightforward navigation that met audiences’ desires for clear information about bodywork services and 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

By 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.

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.”

— Usability testing participant

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 compilation of key screens in desktop 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

everything is design(ed)

examining power in, and of, design

erika

Written by

erika

i care about discovering and designing meaningful, multimodal experiences that inspire critical thought and action.

everything is design(ed)

examining power in, and of, design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade