How might we make the Senior Friendly Hospitals (SFH) toolkit more findable and structurally leaner?
A redesigned seniorfriendlyhospitals.ca that offers a more shallow information architecture, active and current resources, and new visual branding using colours and pictograms.
A successful website redesign that delivered a visually refreshed Home and About pages, a structurally leaner SFH toolkit, and a new pictogram and colour scheme for every SFH toolkit domain.
Senior Friendly Hospitals (SFH) is an Ontario-wide strategy that guides hospital-wide improvements in senior-centered care.
The website, seniorfriendlyhospitals.ca, compiles all the resources needed to build hospitals that are conducive to specialized senior friendly care.
I was brought in to assist the Regional Geriatric Program of Toronto (RGP) in figuring out how to make seniorfriendlyhospitals.ca structurally leaner. This was my first in-house role where I functioned as a “UX Team of One” while being supervised by some of the most brilliant and compassionate minds in geriatric care in Canada.
The SFH website was increasingly becoming a navigation challenge. As resources grew, they became buried under heaps and layers of pages, creating a findability challenge in its wake.
The SFH “refresh”, then, was about improving the SFH website’s information architecture and site design. We wanted to make the clinical resources more findable by culling outdated or dead resources, and combine small pages into bigger pages.
It was a “full-stack” project that combined UX, visual design, and content strategy into one, all geared towards helping the RGP and its network partners build hospitals committed to senior-friendly care.
The redesign went through the entire web design process: Discovery, design, development, and deployment. The RGP worked on the discovery and design phases while the developers at North Studio implemented the design plans and the QA process.
Here are the key milestones in the discovery and design processes that led to seniorfriendlyhospitals.ca‘s look today:
#1: Expert review
I began the discovery process by taking a hard look at the SFH website and how it works from an interaction perspective.
Using Dr. David Travis’ 247 Web Usability Guidelines spreadsheet, I examined whether the existing site leveraged good visual contrast, had readable fonts, had copy written for the web, prevented errors, among other UX best practices. The expert review was meant to identify the primary usability issues on the site before moving to actual usability testing.
Here’s how (then) SFH scored:
- Home Page usability
- Forms and Data Entry
- Page Layout and Visual Design
- Task Orientation
- Navigation and Information Architecture (IA)
- Writing and Content Quality
- Help, Feedback and Error Tolerance.
I focused on SFH’s IA and content quality since these are the areas that required immediate work and attention.
#2: Initial wireframes
I started running through some possible design solutions to the RGP’s design problem.
As a findability problem, I figured that improving the site’s search would be a cure (competitor websites also seemed to have a robust search experience. Why not?).
So I went with that angle and recommended faceted search for the SFH Toolkit.
My boss and my colleagues seemed to like this idea since it “cures” the problem of hard-to-find resources by getting users to specify what resource they need at that time.
But something seemed amiss – and usability testing would show it.
#3: Usability Tests (and revised wireframes)
5 usability tests later, I discovered that most of our users – healthcare partners and practitioners – were using their professional knowledge to figure out where to go next on the website.
They were essentially guessing where the “Get Up and Go Test” might be in the Toolkit and checking if they got it right.
This second-guessing was very problematic and took away precious productivity time.
Soon, I was back on the drawing board exploring an alternative to this design solution with the RGP team.
We would call it the SFH Toolkit Menu.
The SFH Toolkit Menu now lists all the components of each SFH Domain in one page. It is the first page the user sees upon clicking the “SFH Toolkit” tab on the navigation menu.
This addresses the guessing that happened in the usability tests and lays bare what the Toolkit is all about.
Senior Friendly Hospitals has launched and enjoys a visually refreshed Home and About pages, and a rebranded SFH Toolkit Menu that contains a unique pictogram and colour scheme for every SFH Domain.
Here are some before and after shots of both the Home page and the About page.
A New Visual Language
This redesign also gave birth to a new SFH visual language, a branding scheme that would be implemented for all RGP collateral such as cards, banners, and online media.
Leaner and reorganized SFH Toolkit Pages
The SFH Toolkit’s pages have been reorganized to reflect a more hierarchical, manual-like structure.
This afforded familiar navigation techniques such as previous/next navigation and sidebar menus per toolkit entry.
Finally, I helped create a founding message architecture that captures the RGP’s brand values and voice guidelines for future copy.
Using Margot Bloomstein’s BrandSort workshop, I led the SFH team through a card-sorting exercise that reaffirms who and what the RGP is and how to write emotionally resonating copy moving forward.
I’m grateful for my time at the RGP and look forward to their continued success.
I should have be there for only 3 months. But 3 turned to 6; and at my 9th, we finally – and triumphantly – wrapped it up. I’m very proud of this three-peat contract extension and will also remember this company with fondness and gratitude.
Role: Information Architect
Company: The Regional Geriatric Program of Toronto