B.C. Mental Health Services website redesign
Helping to connect professionals and those in need of critical care to the services they need
Situation
Brief
British Columbia Mental Health and Substance Use is a provincial service that is "Caring for people with complex mental health and substance use challenges". They needed to redesign their website to better the user experience, making it easier for healthcare professionals and those impacted to access vital resources and highlight their unique research. BCMHSUS is a provincial service that helps healthcare professionals and researchers access the tools and referrals needed for people in critical distress suffering from substance use and mental health issues.
My role
-
UX designer
-
UX reseacher
-
Design system specialist
Challenge
BCMHSUS' whole mission is to help people receive support. Their previous website was not serving that need. I needed to balance the huge amounts of information to varied under groups in a cohesive manner in a way that did not feel clinical.
Additionally, it was very important for BCMHSUS to highlight the research work that separates them from other similar institutions.
Of note: this was the pilot website for a series of 14 websites using the PHSA design system I created
BCMHSUS aimed to redesign their website to enhance the user experience, making it easier for healthcare professionals and those impacted to access vital resources. Together, we developed an accessible, user-centered platform that streamlines navigation and supports their mission to provide comprehensive care and support.
Project process
The BCMHSUS website redesign project was done as a partnership with EvolvingWeb, a web and design agency. As sometimes happens in an agency with shifting resources, I was not actually involved in the kick-off or early discussions with stakeholders so had to play a little catch-up. I got up to speed, then joined and led some of the UX activities, before collaborating with the UI designer. During the UX design phase and development stages, I worked closely with the Drupal developers and tech lead. This was the pilot project for 14 other PHSA websites (see PHSA design system case study here) so analytics were put in place and there was a focus on documentation so we could inform future projects with our insights.
UX discovery
UX design
Design system
Development
Maintenance
UX discovery activities & process
Understanding the current website situation
This is the pilot site of an enormous project. There was a lot of discovery work conducted and a huge amount of discussion around how to plan for discovery that would encompass all 14 sites of the PHSA project. What discovery activities could we learn the most from that would help to inform the UX, the wireframing and the UI design? The team UX lead, digital strategist and I worked with the PM to choose which UX activities and deliverables we could achieve with the resources we had available to us that would best serve both the PHSA project and BCMHSUS pilot site.
01
Strategy questionnaire
We created a Survey Monkey that was sent out to stakeholders to help clarify the audience prioritisation, organisatinal goals, and direct feedback from users.
02
Benchmark analysis
With the UI team, we analyzed healthcare and support organization websites to identify opportunities and areas for improvement.
03
Vision & goals workshop
Collaborating with stakeholders, we held a workshop to align on the business goals and feeling of the new website.
04
User journey workshop
Again with stakeholders, we facilitated a user journey workshop to uncover key user needs, behaviors, and pain points to guide the project’s direction.
Strategy questionnaire results
Understanding business goals and the industry
Here we identified main themes, the audience prioritization, the organisational goals of the website, as well as what the stakeholders wanted to get out of the new website.
Main themes
-
Being an inclusive, culturally safe space for the Indigenous community
-
Improve wayfinding and overall user experience of the site
Audience prioritization
-
Clinical health professionals
-
Health administrators
-
Patients, clients & family members
-
Prospective employees
Organisational goals
-
Promote the unique, innovative health research work and facilities
-
Health promotion
-
Recruitment efforts
Vision and goals & user journey workshops - correcting assumptions
Talking to the workers and families who use the site
The biggest error in early assumptions was that we would need to design for alerts and for very highly visible "In case of emergency" banners. Our team's discussions centered around how to show highly important information to people who are in extreme distress. As we learned from talking to BCMHSUS employees, this is not the case.
People who are in crisis would never consult the BCMHSUS site, it is not an emergency hotline. The site is used for researchers, health care workers (who often make referrals), and by family members or loved ones of people who have been referred. At times, this could be a court order to an individual, but someone cannot choose to enroll in one of the programs or facilities without a referral.
Having learned this critical information, I can better prepare my notes and wireframes. No emergency info, more focus on wayfinding and intuitive solutions.
For the vision and goals workshop, we prepared a FigJam board featuring various personas. After starting with an icebreaker, the group collaboratively assigned names and photos to each persona. I shared my initial assumptions about their motivations, goals, and pain points, which workshop participants could agree or disagree with, as well as add their own insights using sticky notes. We then discussed and refined these ideas together.
Health professionals use the BCMHSUS site to refer patients to different clinics, and they found the process of finding and downloading referrals challenging, as well as understanding the differences in requirements for other facilities.
In the user journey workshop, we explored the process that individuals referred to BCMHSUS services, as well as those making the referrals, experience. This helped to inform our information architecture, site map, as well as my wireframing. The referral and clinic process reflect in the user journey of the site.
Aligning workshop insights with development and wireframes
A major, critical point of discussion was surrounding the navigation. Again, this component needs to be flexible enough to use across all 14 PHSA sites while still feeling custom. After lengthy (healthy!) debates internally between the UX designers, the UI designers, and the digital strategist, we succeeded in separating the navigation into 2 parts:
-
Utility navigation on top that includes secondary and tertiary audience needs as well as the call-to-action buttons.
-
Main menu items with dropdowns. The menu items must be clicked on to trigger the dropdown, a decision that was enforced to accommodate web accessibility regulations.
Here is an earlier version of the sitemap.
Wireframes
Translating insights and Drupal development into design decisions
Wireframing for BCMHSUS was a unique challenge because I was creating the PHSA design system components in parallel. Every Figma component (or Drupal paragraphs or custom blocks) had to be evaluated heavily. Would we re-use these design system components in other places? If not, we re-used other components.
Deliverables included:
-
Home page
-
Landing page for child pages
-
Clinic and services list and detail page
-
Referral page
-
'Preparing for your visit' page
-
News list and detail page
-
Search results page
Of course, all of this was also designed for mobile use as well.
Development collaboration & client iterations
This project was done in Drupal 10, and I worked very, very closely with the front-end and lead devs on the project. Again, as this was the first part of the PHSA design system, all the UI elements/Figma components & variants/Drupal paragraphs needed to be continuously revised. Do we need it? Can we re-use it for future sites? Is there something similar we could use instead? These were all questions I asked myself while building the wireframes.
Let's look at the (abbreviated) life cycle of the 'Make a Referral' page. This can show how assumptions, client discussions, and team collaboration can shape the changes of a page.
Before
After
Of note
-
The breadcrumbs! Spolier, at an agency, there is never a beautiful project process that follows logic. Development for this started as I was building the UI kit. The information architecture design was being done at the same time as client wireframe presentations. My initial assumption was that the referrals would be a direct child page of the 'For Health Professionals'. Wrong! With the health professional stakeholders, we decided it makes more sense for the referral page to be a child page of the clinic/program to which it relates. Unrelated: one of the liveliest discussions seen in the design room centered around the styling of the final breadcrumb. Is it the page the user is currently on? Is it highlighted? A very fun debate and I would love the opinion of the person reading this!
-
The user journey changed a lot. Initially, I had a list of all the clinics/programs on 1 referrals page but the stakeholders felt each referral process had its own unique characteristics, steps, forms and requirements. I moved things around so that you could only access the referral from the program page.
-
The side navigation. What a journey. Again, this changed because of the site architecture and main navigation. Ultimately, this is where a lot of big decisions were made that affected the whole site. The logic is as such: the home page and 1st level landing pages (pages in the navigation menu, not the drop-down menu items) will be full-width content with no breadcrumbs. All other child pages would have ⅔ width content, breadcrumbs, and this lovely side navigation, as there are a lot of levels the user can drill down.
-
The mobile version was another big discussion. Where to put the side navigation? The UX lead on the team suggested I try placing the side navigation items as 'In this section' hotlinks. Another alternative would have been a dropdown menu on mobile. Why did we go with the hotlinks? Honestly, we had already done the dropdown menu as side navigation on mobile for another client and I wanted to see how this would perform in production with the help of analytics tools.
Final
So for the breadcrumbs, side navigation and information architecture, we changed it all back to how it was before. We were able to show the stakeholders the value of consolidating information to simplify the experience for health professionals looking for referrals.
For this page, we took out the 'In this section' hotlinks but they do live on in other pages with much more lengthy content.
All to say, it's never a straightforward process, there is a lot of bak-and-forth between team members and stakeholders. In the end, the final prototype was signed off and sent to the developers with everyone happy(ish).
Colours and typography
Deliver solutions alongside the design system
Validate with stakeholders and implement the shiny new design system
Once again, this was the pilot website for the PHSA design system that will handle 14 different websites. Here are some of the more fun and challenging components I created. But I encourage you to see the PHSA design system case study itself.
Final results and next steps
Here is the homepage in production.
The analytics were updated into Google Analytics 4 so that we could monitor user activity and find places to optimize the user experience and journeys. The stakeholders were thrilled with the results, and the team and myself were equally pleased with the output of our efforts.
