accessible website redesign for Patient Voices Network

Accessible Website Redesign and Development – Patient Voices Network

Patient Voices Network is a recent accessible website redesign and development case study that exemplifies the different ways we make websites accessible to people of all abilities.

Website accessibility doesn’t just focus on achieving a seamless website user experience for individuals with disabilities; it also means creating a site that can easily be navigated when there are temporary or external impairing factors. An excellent example of this is when users are navigating your website where there is limited connectivity or impaired visibility due to the room’s lighting.  If you haven’t checked out our blog that we wrote last month about digital accessibility, we encourage you to read it

With more users being highly engaged online, businesses must consider how they can increase the accessibility of their website for as many diverse users as possible. 

This was the case when we worked with our clients, Patient Voices Network and their most recent website redesign and development. Today, we’re giving you a sneak peek at the process we took to create their beautiful, new, and highly accessible website.

About Patient Voices Network

Patient Voices Network is a community of patients, families and caregivers working with health care partners to improve health care in British Columbia. PVN is administered by an organization called the BC Patient Safety and Quality Council. The network exists to facilitate and support the inclusion of patient voices in problem solving and decision making to improve BC’s health care system. This partnership provides new perspectives and greater understanding for both patient and health care partners, leading to more informed decisions.

The objective is to improve the quality of care provided to patients while also building strong relationships between all parties. 

The Objective that Patient Voices Network Had with this Accessible Website Redesign & Development

In Spring of 2020 we were engaged by the BC Patient Safety & Quality Council to help them redesign their Patient Voices Network (PVN) website. They wanted a site that was more modern looking and had improved functionality in the way the sites resources and information was displayed.

Their goals for the new site included:

  • To improve accessibility for people of diverse abilities.
  • To simplify and improve the way information and resources are displayed.
  • To make it easier for visitors to easily navigate the site and find engagement opportunities that match their interests.
  • To improve online processes such as the sign-up forms.
  • Modernise the website, making it up-to-date with current best practices.
  • Help visitors learn about and share the impact of the partnerships supported through PVN to improve health care in BC.

The COVID Pandemic threw a spanner in the works and meant that we had to switch to working with the Council Team remotely. 

While it extended our deadlines, the Out-Smarts team kept the project on track through regular communication weekly meetings. Patient Voices Network proudly launched their newly designed, accessible website earlier this Spring. 

Step One – Website Discovery and Planning

Every project we work on starts with an in-depth discovery process to fully understand every aspect of the work at hand – taking time to communicate and listen in this phase allows us to uncover everything we need to know. It also includes auditing their current site and content to determine if there are any additional opportunities to enhance the user experience for their target audience. 

We started with a kick-off meeting to understand all of the pertinent information. This includes everything we need to know about the organisation, its history, vision, the reason it exists, what it stands for, who it works with and the audiences. 

We took a deep dive into the website’s goals and what would make the project a success. 

We learned about the different roles in the organisation and started building relationships with the team members. During this process, we also interviewed key stakeholders – healthcare partners as well as patient partners, website users, and members of their working group created to learn what they liked and didn’t like about the old site. his information focused our efforts on more straightforward navigation and better access to information.

Step Two – Design

Our design process was built on the discovery phase of the accessible website redesign and development project. We developed greyscale layout sketches of critical pages on the site for both desktop and mobile, then produced lo-fi wireframes showing hierarchies and components of the pages.  After those were approved, using PVN’s branding and style guide, we then created full-colour prototypes of those pages to represent the website’s final design on significant devices.

Step Three – Development

In all our development work, we optimise for smooth performance and interoperability to provide a functional experience for all visitors, regardless of their device’s technical capabilities.

Our developers build custom themes only, and this site was no exception. We used a modern, developer-friendly framework to make maintenance and future work much more manageable. Following insights from the discovery process, we built custom content types and metadata fields to tailor the backend authoring experience to PVN’s unique content requirements.

We optimised for site performance and minimal bandwidth, including support for responsive (high-resolution or Retina) images. 

Step Four – Testing and Deployment

In the final phase of this accessible website redesign and development, we supported PVN as they adapted and refined their content. Tested the site on major browsers and devices, added META Titles and Descriptions for SEO and setting up Google Analytics and Search Console to monitor site traffic. PVN uses Ionica for secure website hosting, and we coordinated with them to ensure a timely and smooth transition as we launched the site and their customer service was exemplary.

Testimonial from Patient Voices Network

“Creating a website that was more accessible to the people we serve was extremely important to us. Mhairi and her team were incredibly helpful in supporting us to realise this vision by guiding us through the process and translating the technical aspects of website accessibility to make informed decisions about our site design. It was a pleasure to work with them.”

Tammy – Director, Patient & Public Engagement – BC Patient Safety & Quality Council

In their own words:

Since early 2020, we’ve been researching the need for a new website and including real-time feedback on what works and doesn’t work. We’ve used this research to build our new website.

It features prominent sign-up directions and testimonials from current patient and health care partners – all with the objective of growing and diversifying our membership to ensure all British Columbians can have their voice heard.

The website contains a wealth of information that people can easily navigate when seeking to learn more about us and how they can get involved in their region’s health care improvement work. It includes:

  • A modern and efficient design built for desktops, mobiles, and tablets
  • Better user experience with more intuitive navigation and site structure
  • Robust internal search for engagement opportunities with filterable results
  • A page dedicated to highlighting how patient voices are improving quality of care across BC
  • More user-friendly layout that adheres to web accessibility standards
  • Personalized resources for patient partners and health care partners
Red background with white text "AA WCAG 2.1 level AA compliant website"

Why we Loved This Accessible Website Redesign Project

We are incredibly passionate about helping clients that make a difference in the world and PVN fits that category.. We take on all of our website redesign and development projects with excitement. However, the added challenge of ensuring that all elements were carefully optimized with digital accessibility in mind was something that we were thrilled to take on. This made us more conscious of each element’s function, ensuring that it went beyond aesthetics and served a purpose to their diverse audience.

Learn more about this project through PVN’s blog post.