Beaches Wellness: User Research
2021
Beaches Wellness Centre is a well-established chiropractic and registered massage therapy clinic in Toronto’s Beaches neighbourhood. As one of their patients, I went to leave a voicemail for them one day, but first wanted to double-check their hours to make sure I wouldn’t be bothering them right at the end of the day... and discovered they didn’t have a web site.
Since I needed portfolio work I could show in public without violating my employer’s security regulations, I asked if I could make a web site for them, and they agreed.
Project summary: User research and information architecture for a healthcare clinic's first website. I conducted patient interviews, competitive analysis, and card sorting to design a mobile-first solution that prioritized contact information over service descriptions. This challenged industry business conventions but was based on actual user needs.
Overarching constraint: COVID caused a lot of restrictions on physical space and time. The clinic’s waiting room was shut down; patients had to wait outside the building before their appointments. The clinic’s volumes also went up, so time to meet with the stakeholders was minimal. It wasn’t unusual for the clinic owner and I to talk about next steps during my appointment, simply because it was the only time we had to discuss anything with each other.
The Problem
After some discussions, the proposed site’s goals were determined:
- Feasible: the site must be low-cost to create and maintain.
- Accessible: although the business does not fall under AODA regulations, it made sense to implement WCAG 2.1 AA accessibility for a brand-new site.
- Ease of content management: After initial implementation, the clinic wanted to be able to update the site themselves.
- Responsive: The design had to be mobile-first, but also support tablet and larger-screen visits.
A brief was created which listed the project goals, constraints, major deliverables, and other major details.
Research
Research focused on three topics:
- Competition: what do the websites of the other clinics in the neighbourhood look like? what content do they have?
- Existing patients: what do the existing patients want in a website? What would they find useful? (Note that nearly all clinic patients are referred by word of mouth, so existing patients are considered the primary audience for a site.)
- Information architecture: in what order should the website provide the content? How should information be grouped? What are the major content topics?
Competition: I created a competitive analysis of 13 different clinics, mostly from the neighbourhood, a few in adjacent communities. The analysis noted the purpose of the site, the colour scheme, the main menu items, the core content, what services are offered, and whether or not the site had been updated recently.
Chiropractors are not allowed to compete against each other directly (ie: they can’t say anything like, “Best in Toronto!”), so it was important to find out how to stand out in a way that complied with professional standards.
The analysis revealed that there were two major ways to both stand out as a website and to comply with the standards:
- Choose a colour scheme which wasn’t the same as the other sites, which tended to draw from a limited set of pallettes
- Order the information in a way that appealed to patients
Existing patients: I decided to take advantage of the restrictions COVID had placed on patient access, and use the time waiting outside for appointments to talk to other patients informally and learn what they expected from a website. Sometimes we would look at competition websites together as well.
Information architecture: I used Optimal Workshop (external link) to create a card sorting exercise, based on the most popular menu items revealed in the competitive analysis and topics patients had mentioned. Patients were invited to complete it, and to share the link if they wanted. This gave me enough data to determine the major content for the website, and in how it should be organized.
The User’s Needs & Pain Points
The patient interviews and card sorting revealed the following pain points and needs:
- They didn’t like having to scroll through multiple screens’ worth of therapy descriptions just to find out a clinic’s office hours or contact information.
- It was too difficult to find out the clinic address. Many existing patients only visit once every several months and so don’t have the location memorized.
- Patients weren’t confident they would understand therapy descriptions from a website, and were more comfortable simply discussing them with someone at the clinic on the phone or during an appointment.
Key Design Decisions
The research led to the following major design decisions:
- It confirmed that mobile-first was the best way to go — many patients just assumed they would be using their phone to access the site, and that they would be using the site en route to an appointment, or when they were otherwise not at home.
- Patients strongly preferred a one-page layout, so they could thumb-scroll over using links or another navigation method. If they clicked to another page on a sample site, they would try to scroll back to home rather than clicking on the Home link in the menu.
- Each screen’s worth of information should be tightly-focused and kept to a minimum. Patients didn’t like a lot of content on a screen at once.
Reflections
- The conventional wisdom is to sell a small business by showing the products and services available, and then list the contact information/book an appointment as a call to action. The patients I interviewed preferred to find out the contact information and location first, and then contact the clinic to determine if the services fit their needs.
- It was noted in the brief that minimal content was preferred by the stakeholders, but the patient interviews indicated content and layout should be even more minimal than previously supposed. Rather than read about the available services on a website, patients reported they would rather have a discussion about it in the context of their personal state of health.
Beaches Wellness: Solution
2021
Project summary: Responsive wireframe design and A/B testing for mobile-first navigation patterns. I created an accessible design system using Figma, then tested hamburger menu vs. button bar solutions, using guerrilla testing to optimize the patient experience.
Research
Having established a creative brief and conducted user research in the first phase of the project, I still needed to research UI elements before I started sketching mock-ups.
Colour scheme: the competitive analysis from the Research phase showed that most competing local sites used blues, greens, oranges, or greys as their major colours. The stakeholders and I both searched independently for inspirational sites to get ideas for a colour scheme, and both of us brought forward different sites with a black & slightly off-white colour scheme with dark gold accents.
Navigation elements: the two menu options for mobile were a hamburger menu, or a button bar at the bottom of the screen. The stakeholders and I agreed to conduct A/B testing to determine which was best.
The User’s Needs & Pain Points
By focusing on the data and the research results, very little elements were left up for discussion. Most choices can be traced back to the user research, competitive analysis, and the original brief from the stakeholders.
- Key information for the home page was identified during the interviews.
- The results of the card sorting exercise are used to drive the content organization.
Design with Constraints
In addition to the constraints already identified in the brief, the research phase identified additional constraints:
- Create the mobile wireframes first, then the tablet and large-screen views.
- Since design had to accommodate content updates, structure was created first, then content.
- To ensure that the design fit on all screens, smaller/narrower options for each screen type were selected in Figma. For example, I used an iPhone 11 as the sample phone size because it was the narrowest mobile screen available.
Ideation & Wireframing
Organizing information: before any design occurred, the content (or its placeholder) was organized into groups according to the card sort results.
Mini design system: a very basic design system was created with Rangle.io’s Radius (external link) Figma template. The Figma template let me ensure the colours, text styles, and other elements were accessible and usable before creating the wireframes. It also let me apply already-created styles in the wireframe project without having to work through them as the wireframes were created.
Collect assets, create responsive grid: I based the grids on samples I have collected in Figma. The icons came from a library from the Figma community. I couldn’t find an image placeholder icon that could easily integrate the site colour scheme, so I created my own in dark and light versions. That way they wouldn’t distract the stakeholders or test users when they were reviewing the designs.
And with that, it was time to iterate, review, and validate.
Key Design Decisions
Gold text is tricky to implement because it’s in the medium range for hex values and it can be challenging to find sufficient contrast to meet WCAG 2.1 AA standards. This was mitigated by using slightly different shades of gold against the black and white backgrounds to ensure each background had sufficient contrast.
The About section has three subsections, which makes it the longest section. Research indicated it would also be the least-visited part of the site. Therefore, to keep the menu short and simple, the subsections were removed from the main menu. Links at the top of each About subsection allow vistors to navigate quickly within the main section.
Test & Review Solution
After a few initial review rounds with the stakeholders, two versions of the interactive wireframes were tested with patients:
- Hamburger menu: the traditional hamburger menu was shown at the top of the mobile view, with a menu drawer which appeared when the visitor tapped the hamburger icon.
- Button bar: a button bar was added to the bottom of the mobile screen, with only the major sections (Home, News, About) shown as buttons.
I made a temporary “secret” link on each version of the home page so that testers could switch between the hamburger menu and button bar solutions easily, showed the vistors how to switch between the two solutions, and asked them to find different sections. The testers also read through the wireframes while chatting with me informally (essentially guerilla testing).
Reflections
There were never really any major showstoppers in the process because the business owner and other business stakeholders were kept informed throughout the process. The only time I did an experiment on my own was when I redesigned the home page, and even then the feedback loop was strong enough that they were able to choose from the samples I made quickly so we could move on to evaluating the update with guerilla testing.
Using the Radius mini-design system let the stakeholders and I build up a set of design conventions which complied with accessibility standards very quickly and easily.
The interactive wireframes are available on Figma in three screen widths:
