Redesigning the Grand River Hospital Website

The Back Story

Grand River Hospital (GRH) challenged Eyelight to design, develop and launch a new website that would better serve patients and educate the community about the positive impact it has in Waterloo Region.

When they met with Eyelight it was clear the site needed to appeal to a wide group of stakeholders and users, but it was most important for patients and their families to find and understand information at their time of need.

The new design also needed to better communicate the impact Grand River's exceptional practitioners have on patients lives and the community they serve through first-hand stories and facts.

To best serve all members of Waterloo Region, the site needed to be accessible (AODA compliant) and work on phones and tablets.

GRH's small but dedicated communication team needed a powerful publishing tool they could rely on to easily manage and produce rich, accessible content without having to jump through hoops to complete simple updates.

Eyelight collaborated with the hospital's communications team to achieve these goals.

Content First Approach

Content is one of the most important, but challenging parts of any web project.

GRH was surprised when they find out how large their existing site was below the surface. The site had been around for a while and there were several hundred legacy pages to deal with. Every page would need to reviewed and evaluated to ensure content would be more understandable for patients and their families (a primary goal for this project). They needed a plan to get started.

Initial Grand River Hospital Sitemap

We were able to help their communication team deal with this challenge by creating an inventory of all pages and documents on the site. We tied the list of content to analytics data to give them insight into which pages were actually important to visitors. We then met to review the inventory and provide an overview of how to audit content and develop a plan for their new site. The content audit process ensures:

content is written for the target audience (appropriate language level, tone and voice, etc.)

content meets organizational objectives

content is up-to-date and accurate, and pages that aren't needed are removed

when changes are needed, you know who is responsible and who you need to talk to

From there, the GRH team conducted the audit and met with content stakeholders to plan and write site copy. From our perspective, the audit process also helped identify the types of content the design and content management system would need to accommodate.

A Blueprint for Design

A well-built house starts with a blueprint; on the web these blueprints are called wireframes or prototypes. These blueprints allow us to collaboratively discuss the priority of content, navigation, features and functionality without investing time in polished visual design. Ultimately, this process ensures that the design includes what it needs to meet project goals which leads to a smoother visual design process.

For the Grand River Hospital site, we created responsive HTML prototypes for three key layouts and separate mock-ups of navigation options (as shown below). The screens included the home page, program landing page, and general content page. The responsive nature of the prototypes allowed the client to see how the design would scale to all of the different devices it would be viewed on.

We had a collaborative working session to review the prototypes and come to an agreement on the approach. During this session, we recapped the target users, their top goals, walked through the layouts and outlined how the designs achieved these goals.

This was an excellent time to brainstorm ideas and try multiple approaches, as editing the wireframes was a quick and painless process. For example, with Grand River we knew the Emergency Wait Time feature was an important and popular feature. We wanted to see if we could make this information easier to access anywhere on the site, so we presented different approaches that would help site users. During the review process, we gained insight into technical hurdles that would limit what was feasible. This process helped us to identify roadblocks and recommend the best possible approach without having spent time on visual design.

Visual Design

The new site needed to be friendly, approachable, easy-to-navigate and help make visitors aware of the exceptional health care provided at Grand River Hospital. During the visual design phase, we create high-fidelity mock-ups of key layouts and visual elements. For this project, we designed the home page, childbirth program page and a sample content page at desktop and mobile screen sizes (as shown below). These sample layouts captured most of the design elements that would be applied across the site to hundreds of pages.

Responsive Design for Mobile Devices

Home Page

Multi-level Navigation

Childbirth Home Page

Research Feature

Focusing On Top Tasks

Home pages need to meet the needs of all types of visitors. For the hospital, this included a very diverse group including patients, families, health care practitioners, students, researchers, the media and more. The new home page banner focused on their needs. A photo of a real Grand River Hospital doctor greets every visitor and asks 'What can we help you find?'. This message is supported by a real-time search feature and links to the most popular content, helping visitors quickly find the information they need.

Patients and Guests

A huge number of site visitors are patients and their families that need to visit the hospital for the first time. Whether undergoing their own procedure or visiting a loved one, it was crucial to provide easy access to the most important information for this group of stakeholders on the home page.

Selecting the Right Colours

Grand River Hospital has an established brand colour palette that we needed to work within. As colour contrast and font sizes are important factors in creating an accessible site, we needed to ensure that the colour scheme used would meet AODA requirements. To do this, we created a test page that displayed all possible combinations of colours and type sizes so they could be tested with accessibility checkers to determine which options could be safely used on the site. The new site features a bright, friendly and accessible colour scheme.

Featuring Important Content

GRH wanted to put a focus on the people at the hospital. Through the 'Your Stories' feature, visitors can learn about the great things happening at Grand River by exploring the real stories of health care professionals, volunteers and patients. Given the website's design flexibility, GRH can feature stories throughout the site, including the pages that are most closely related.

Grand River Facts

Important facts are highlighted at the bottom of every page providing a great opportunity to educate site visitors about the good things GRH does.

Tailored Content Management

A well-implemented Content Management System (CMS) empowers GRH to update its website much more frequently, turning it into one of their most important communication tools. The video below demonstrates how easy the editing process is in the CMS, along with a convenient 'live preview' feature that instantly shows how updates look on the front-end.

Your browser doesn't support HTML5 video tag.

With hundreds of pages of content to create and move from the old site, we knew that allowing Grand River Hospital's communication team to get started early in the process would pay dividends. Our content first approach, married with component based design and our content management system of choice (Craft CMS), allowed us to tailor the publishing system to meet their needs before visual design was complete.

We gave their team a CMS training session (complete with documentation) early in the project. As Grand River's team entered content, they came across challenges in work flow that we were able to address and improve upon as the project progressed. This meant that the CMS was well-tested for their long-term publishing needs before the project was complete, and improvements fell within the scope of the project.

When the visual design was complete, we were able to integrate it into the system without impacting the content entry Grand River had completed. Their communications team were able to see all of their hard work in the final polished design without having to go back and make major formatting changes.

Our belief is that the content management system should be as easy to use for our clients, as the end site is for their users. It should help them achieve their communication goals in an easy, efficient manner.

The effort we placed into selecting and tailoring the CMS system provided GRH with the following benefits:

an easy-to-understand, distraction-free interface with only what they need to manage content

easy organization of all site content in a drag and drop tree

live preview and real-time editing of content on screen in the design

the ability to create rich, accessible, pages (well-tested modules can be added to any page, in any order without wrestling with code)

the ability add and cross link reusable content on many pages, saving them from tedious edits

draft versions and time delayed entries

When publishing content to your website is a key part of your day-to-day job, investing effort in the editing experience is vital so you have a tool you can depend on to get the job done.

The finished product has exceeded our expectations and provided us a much stronger platform to tell the hospital’s story. It has made web updating a much simpler and faster process, which has greatly improved workflow. This is important given the sheer amount of new content we are uploading.

In short, I am very impressed by Eyelight’s services. I feel their work on our website redevelopment was extremely worthwhile and has led to a much more engaging presence for Grand River Hospital.
Mark Karjaluoto
Director of Communications
Grand River Hospital