UX Case Study: Blue Turtle Bodywork Website Design
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.
- 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.
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.
Phase 2: Interaction Design
The research helped clarify the following goals that are mutually shared by Blue Turtle Bodywork and their target audiences:
- Have a comfortable, trustworthy working relationship between massage therapist and client;
- For all involved to feel safe, affirmed, comfortable, and respected before, during, and after massage;
- To give and receive high quality bodywork in an environment that affirms people’s whole selves
- To have an online experience that facilitates customer engagement, including booking appointments and contacting the business owner
In addition, the research showed that the following interactions would be essential to meeting the goals above:
- Booking an appointment online
- Contacting Blue Turtle Bodywork by email
- Reading about services online, including types of massage and pricing
Information Architecture: Site Map and User Flows
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.
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.
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.
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