Illustration by Joey Gao

A UX Case Study of Website Redesign for InspireHealth, a Supportive Cancer Care Organization

TL;DR: This case study documents the UX redesign of InspireHealth, a cancer rehabilitation service located in British Columbia, Canada. As a not-for-profit organization, their on-site locations offer cancer patients practical and personalized exercise therapy, stress management, nutrition and counseling services, all free-of-charge. The objective of the redesign is to reconstruct on-site information and make the site more welcoming and patient-friendly.

Thank You Letter from Client

“ It is hard to imagine that 30 days have passed. The team at InspireHealth wanted to tell you that we are so impressed with the dedication, research conducted and attention to detail that the RED Academy team demonstrated. It was very clear that everyone embraced a patient/family member’s path during their cancer journey. (We) were ‘blown away’ with the end result! I cannot thank you enough for partnering with our team at InspireHealth!”

Four Weeks Earlier

When I first learnt that cancer care service InspireHealth would be our last community project at RED Academy, I was lost.

I thought I was fairly familiar with the concept of cancer: it was the ailment that terminated both of my grandfather’s life after all. My mother’s father, for one, was diagnosed with late-stage stomach cancer during Cultural Revolution and passed away in a matter of months, 10 years before I was born.

Through the years, my mother has recounted stories after stories of my unfamiliar grandfather’s cancer journey: the panic, the despair, the confusion, the loss, and the rippling pains left behind.

Yes, I thought I understood cancer, but it turned out quite the opposite.

Yes, I’ve heard of Cancer. I’ve heard of it as the cause of worries and deaths, I’ve heard of it as the cause of donation and marathons, and I’ve heard of it as the cause of intaking antioxidant food and not to smoke. However, all these understandings of cancer were superficial and second-hand.

What are the different stages of Cancer? What exactly is chemotherapy? How does cancer affect the physical and emotional state of a patient? I have no idea.

The topic of Cancer is so taboo, so heavy, so unbearable, to the point I may have been censoring it from my life… but now we need to redesign the web experience for cancer patients. Where to start?

“Google Predication” for Cancer…: Some Topics are Just too Heavy to Confront

Research | Domain

We started the project by researching cancer, so the team can build up a adequate lexicon to communicate in the same language with InspireHealth’s support group and their patients.

Varies Cancer Related Terms from Our Domain Research

According to Canadian Cancer Society, nearly 1 in 2 Canadians will be diagnosed with cancer in their lifetime, and 1 in 4 will die from it.

Cancer affects both genders equally, and lung, colorectal, breast and prostate cancers are the most diagnosed cancer types, accounting for half of total cases.

The risk of cancer increases with age, with nearly 90% of new cancer cases and 96% of cancer deaths occur among people aged 50 and over.

Cancer development is categorized into 4 stages based on how severely spread cancer cells are. Depending on the stage, patients are required to undertake a combination of surgery, chemotherapy and radiation therapy.

Primary and Supportive Cancer Care

Outside of primary medical care system, the patients often need to re-calibrate their lifestyle to cope bother during and post cancer. For example, some chemotherapy are programed to kill fast growing cells, and as a side effect, they will weaken the lining of stomach and cause digestive and immune system problems, which require patients to adjust change their diet and exercise regimes.

That’s when InspireHealth comes in. As a public funded non-profit service, they provide an array of on-site consultations and classes in Vancouver, Victoria and Kelowna, BC, and all free-of-charge to cancer patients. They also host a wealth of text and video resources online for remote cancer patients, from healthy recipes to online meditation videos.

During the kick-off meeting, client expresses aspiration to become the leading edge web portal for cancer supportive care, where cancer patients, their loved ones and medical service providers can find all the resources and supports they need.

Research | Site Audit and Google Analytics

The current website of InspireHealth went live in March 2017. The main call-to-action is for patients to get on-board with the multitude of services available to them, on site or remotely.

Because the program is partially funded by the Canadian government, patients are required to sign up and verify their cancer diagnosis and Medicare number before participating in any on-site services. On top of that, for first-time patients, they are also required to meet with the corresponding clinical consultation teams before registering and attending any individualized classes (nutrition, physical, psychological).

While this is the backbone of the website’s core function, the website has been expanded ad-hocly to include over 2000 unique URLs since lanuch. Page contents range from but not limited to past fundraising events, online webinars, patient recipes and cancer research reports.

Current Website of Inspire Health Offers both Booking for On-Site Services and a Wealth of Online Resources

Despite the impressive quantity and depth of contents available for patients, the performance metrics result from Google Analytics suggest they are under-utilized. The good news was that InspireHealth already has a strong online presence: during the two-year active period, it has been visited over 440,000 times, and 68.9% of the traffic are driven by organic search.

However, when analyzed more closely, the data revealed some worrisome insight. First, 20% of the visitors landed on the homepage, while another whopping 20% landed on a mysterious turmeric tea recipe. It is generally encouraging that users found this “star page” through social media posts or search, but none of the users stuck around to explore other services offered. In fact, the bounce rate for the site is extremely high: 72.2% of the visitors, after reading one page, left the site. And for new users that stayed, only 3% find their way to the on-boarding page in ‘get started’ section.

Visits Drop Off Sharply After First Page

It’s apparent the problem with existing site is not the lack of content, but how to access them. One of our key focus for the redesign would be to rethink the on-boarding process and streamlining the site navigation to be more user centered, as opposed to information and services centered.

Research | User Interviews

While Google Analytics data painted a quantitative overview of user behavior, it lacks the qualitative apprehension into the high bounce rate. In order to understand how existing users use, or rather not use the site, we approached a number of patients for one-on-one interviews.

Getting to Know the Users on a Personal Level with One-on-One Interviews

Given the sensitivity and time constraint of the subject, we were extremely grateful for the time and honesty our interviewees has entrusted in us. All interviewees were either cancer patients or survivors that used InspireHealth’s service in the past. Not only did they give valuable site-usage feedback, most also shared their cancer journey and experiences with InpireHealth, which added a human dimension to the project.

We asked how they used the website and what they liked and disliked about the it. Most respondents pointed out the text-heavy site feels cold and corporate, especially when most texts are either instructional or descriptive. The lack of organizational hierarchy and visual consistency also makes it difficult to see what’s clickable and where to go. This is especially troublesome given considering how helpless and disorienting the patients were at the time. As the result, most patients opt to call in and inquire in person after failing to locate what they were looking for online.

Time and time again though, the interviewees brought up how welcoming and understanding the staffs were when they first visited one of InspireHealth’s on-site locations. The design team wondered if there was a way to visit the office and bring that on-site experience into the website redesign.

Research | Contextual Inquiries

Attending On-Boarding Orientation at InspireHealth’s Vancouver Branch

We visited InspireHealth’s Vancouver Branch and attended their Fireside Gathering orientation. Upon arrival, we instantly understood what our interviewees were raving about.

We were welcomed into a living room setting, where we, along with new cancer patients were given a detailed introduction about how InspireHealth could help with establishing exercise and nutrition routines them, all backed with scientific research statistics. The message was very clear: InspireHealth understood what the patients were going through, and they were there to help. This immediately invoked positive patient feedback , they were evidently empowered by the knowledge and couldn’t wait to learn more about the various programs offered by InspireHealth.

When asked about their experience with the website, new patients said it was hard to sieve though all the text to find what they need, especially when they were bombarded by other changes in life. If the website was clearer, they prefer to walk through the orientation from home to save the hassle to travel.

We also got a chance to visit the various ‘classrooms’ at the facility where different types of services are held, this ranges from a cozy kitchen space where cooking demo are given to the room-top garden where Tai-Chi were taught. The physical locales reminded us how tactile and personal cancer care is.

Planning | Persona and User Journey

From the initial research, we created two user personas to represent InspireHealth’s on-site and remote patients.

On-Site Patient Persona

Sandra is our patient persona who has access to the various programs InspireHealth offers to help get her health back on track post breast-cancer. She is having a hard time finding scientific and reliable information to guide her recovery. She is also very mindful with her time management between all the medical obligations.

Remote Patient Persona

Henry, on the other hand, represents patients living in remote or foreign regions that aren’t able to drop in for classes or consultations. After being diagnosed with colon cancer, he seeks online support and resources to ready his body into optimum condition for surgery. He also feels quite isolated and helpless in the small community and wants to connect to other patients and health professionals.

Planning | Feature Prioritization

After profiling the two user groups, knowing who they are, how do they feel before they found InspireHealth, what are their interests and needs, we started connecting all the research data and organizing them in an affinity diagram.

Affinity Diagram of User Feedback of Existing Site

Healthcare = Health + Care

It was clear to us the website redesign needs to address patients’ needs on two levels. First, the current website features needs to be functional and efficient by offering a clear and intuitive structure for users to find and comprehend health information/services relevant to them. More importantly, the website also needs to communicate the sense of intimacy and sense of connection present in InspireHealth’s on-site locations, so the patients will feel being attended to and taken care of.

We decided to refine our project goals to reflect aforementioned challenges:

  1. Overhaul existing site architecture to be intuitive to navigate
  2. Group and organize information into templates of consistent formatting to minimize patient’s learning curve
  3. Highlight services and programs with images to create a friendly and seamless user on-boarding and booking experience for on-site activities
  4. Help patients to feel supported and connected to InspireHealth’s cancer community

Design | Information Structure

For our final design, we restructured the website into five sections, all with their own introductory slash page. About Us and Get Involved covers the administrative portion of InspireHealth as an organization. Our Services lists all their on-site programs and invites patients to learn more and register. Online webinars and recipes are regrouped under the Resources section, accessible to anyone interested in supportive and preventive cancer care, anywhere. Finally, an Event section of fundraising and walks for friends, family and donors to support InspireHealth and their loved ones.

All sections can be organically accessed through a narrated home page, where the copy is written to mimic a conversation guiding the patients. There are also highlighted CTAs embedded throughout the picture-rich site as shortcuts between sections to connect patients to the services they need.

Re-conceived Sitemap

Due to the budget constraint and not-for-profit nature of InspireHealth, as much as we wanted to build a customized donation and user registration system, we recommended they are best handled with integrated APIs like Jane and DonateKindly from a cost-effective perspective at this stage of the project cycle. We did provide the client with a detailed diagram showing how third-party software can be integrated into the userflow. Moreover, the intake form of these applications can be relayed to create user profiles on InspireHealth, should the website decide to add more social functions such as saving favorite classes or chatroom for patients with future updates.

Website Integration with Jane Booking System

Design | The On-Boarding Assistant

As mentioned before, one of our primary goals for patient on-boarding was to replicate the welcoming and receptive atmosphere during our on-site visit. To achieve this, we created an interactive assistant to guide new users to the most relevant sections based on their location and interests. The on-boarding assistant streamlines the discovery phase for new users and avoids any chaotic search or tedious reading. User could be arrive to a list of personalized recommendations and next steps in just a few clicks.

On-Boarding Flow Chart and Built-in Assistant

UI Design | Reconstruct the Living Room

To replicate the human connection exuberant at the on-site locations, for UI, we decided to emulate it with a tactile visual vocabulary that is familiar to our 50 and above user demographics. For activities, services online-videos and recipes, cards with rounded corners are used to invite patients to explore more.

To further depart from the cold and corporate style of the existing site, we decided to hand draw all the icons with a minimalist color palette. While the saturated tone and strong contract create a sense of empowerment, freehand techniques make the drawings more authentic and easier to personally relate.

Nutrition, Stress Reduction and Exercises Icons for Get Started Section

UI Design | Wayfinding

Bold and vibrant visual cues are used to highlight buttons and main call-to-actions to help patients wayfind through the site. The same visual language is also used to create hierarchy within the a page, especially when informative texts and descriptive/instructive need to be distinguished.

Visual Cues for Wayfinding

Prototypes

Reflection

Our project, at first glance, can be passed as a simple exercise of information architecture. However, reorganizing content for users to have efficient access to health information is only half of the challenge.

Who are the patients? Under what condition are they visiting the site? How would they interact with information under those unconventional conditions? And how can we help to make it easier? The team can never arrive at our final solution without asking these difficult questions first.

I though I understood cancer, but I only know of it. Cancer is such a difficult topic, and it’s our natural tendency observe at a distance, until our lives are impacted by it, one way or another.

With this project coming to a close, I felt fortunate to have worked on such a challenging topic. Cancer, like all problems we face in design, may appear messy, heavy and even unbearable at first, but only when we invest time and energy to care, to learn, to confront and try to solve it, it will eventually become personal and inherently more manageable.

- For grandpa

Our Team

The project was part of Red Academy Vancouver’s UX community project, and it was the result of three weeks of extremely diligent work from four students. We are…