Holland Bloorview Kids Rehabilitation Hospital

Homepage redesign, migration and CMS implementation

Holland Bloorview Kids Rehabilitation Hospital

Homepage redesign, migration and CMS implementation

Project overview

Redesigning and migrating the corporate websites for Holland Bloorview Rehabilitation Hospital and its sister organisations: Bloorview Research Institute; Bloorview School Authority; and Holland Bloorview Kids Rehabilitation Hospital Foundation.

Project duration

2 years (2012 to 2014)

My role

Digital specialist, digital accessibility specialist

Responsibilities

Project management, migrating websites, training staff on new CMS.

Before
Screenshot of a website
After

Project overview

Redesigning and migrating the corporate websites for Holland Bloorview Rehabilitation Hospital and its sister organisations: Bloorview Research Institute; Bloorview School Authority; and Holland Bloorview Kids Rehabilitation Hospital Foundation.

Project duration

2 years (2012 to 2014)

My role

Digital specialist, digital accessibility specialist

Responsibilities

Project management, migrating websites, training staff on new CMS.

Before
Screenshot of a website
After

Problem

Holland Bloorview’s suite of four websites’ UI and UX had grown to become outdated, unresponsive to mobile devices, and inaccessible to assistive devices.

It also required a manual process for updating content by one person via Dreamweaver which often caused delays due to high-volume backlogs.

Goals

  • Redesign and migrate Holland Bloorview’s websites so they are mobile responsive and accessible.
  • Unbury content by creating dynamic menus and home pages to make content easier to find.
  • Implement a new CMS custom-built to each department’s needs enabling non-technical staff to easily post updates.

Problem

Holland Bloorview’s suite of four websites’ UI and UX had grown to become outdated, unresponsive to mobile devices, and inaccessible to assistive devices.

It also required a manual process for updating content by one person via Dreamweaver which often caused delays due to high-volume backlogs.

Goals

  • Redesign and migrate Holland Bloorview’s websites so they are mobile responsive and accessible.
  • Unbury content by creating dynamic menus and home pages to make content easier to find.
  • Implement a new CMS custom-built to each department’s needs enabling non-technical staff to easily post updates.

Understanding the users

User research

I worked with the Chief of Communications and Strategy and vendor to manage seven information-gathering interviews with over 70 internal and external stakeholders to gather and assess requirements for the websites and new CMS custom-built for each department’s unique needs. I filled most of my notebook with notes!

I set up meetings, summarised my notes, and repeatedly referred to them in discussions with the vendor and stakeholders to ensure everyone remained focus on the end-user needs and prevented scope creep. I also migrated the websites and trained staff on the new CMS.

Understanding the users

User research

I worked with the Chief of Communications and Strategy and vendor to manage seven information-gathering interviews with over 70 internal and external stakeholders to gather and assess requirements for the websites and new CMS custom-built for each department’s unique needs. I filled most of my notebook with notes!

I set up meetings, summarised my notes, and repeatedly referred to them in discussions with the vendor and stakeholders to ensure everyone remained focus on the end-user needs and prevented scope creep. I also migrated the websites and trained staff on the new CMS.

Key pain points

Key pain points

Limited information architecture

Many clicks required in user journey. Homepage relied on promotional tiles and carousels in order to direct users to niche content.

Outdated content, orphaned pages

Lack of content governance created a large volume of outdated information still accessed by internal links.

Accessibility

Not compatible with assistive technologies. For example, pages designed in tables within tables.

Not mobile responsive

Navigating the websites required a lot of pinching and zooming and often accidentally clicking on incorrect links.

Manual updates

Manual process for updating content by one person often caused delays due to high-volume backlogs.

Starting the design

Wireframe and UI approval

I collaborated with the vendor and art director to finalize the information architecture and wireframes.

My Senior Communications Manager and I co-presented the high-fidelity mockups to the executive team and received positive feedback. We received approval with only a few minor suggested changes to the information architecture and began construction.

Content cleanup

We needed to purge a lot of orphaned files, images and PDFs, and outdated content that accumulated across the website over the years to prevent budget from being spent on migrating content irrelevant to the user. 

I led the cross-corporate content clean-up by managing my team of seven communication colleagues and over 20 content owners across the enterprise. This project took about two months and resulted in a reduction of over 1000 pages, images, and PDFs.

Accessible videos

Holland Bloorview uses videos to tell its many incredible stories. I worked with our internal videographer and transcription vendor to update and caption over 30 existing and new videos.

I also developed a new corporate policy and procedure for transcriptions and captions to keep accessibility compliance and commitment high.

Training sessions

I led 10 training sessions on our new CMS and had content owners up and running quickly. I have often been complimented on how effective I am at explaining technical concepts to non-technical people and how adaptable my training style is to each individual’s learning style.

I also provided training in making content accessible and provided ongoing help desk style support as needs emerged.

Starting the design

Wireframe and UI approval

I collaborated with the vendor and art director to finalize the information architecture and wireframes.

My Senior Communications Manager and I co-presented the high-fidelity mockups to the executive team and received positive feedback. We received approval with only a few minor suggested changes to the information architecture and began construction.

Content cleanup

We needed to purge a lot of orphaned files, images and PDFs, and outdated content that accumulated across the website over the years to prevent budget from being spent on migrating content irrelevant to the user. 

I led the cross-corporate content clean-up by managing my team of seven communication colleagues and over 20 content owners across the enterprise. This project took about two months and resulted in a reduction of over 1000 pages, images, and PDFs.

Accessible videos

Holland Bloorview uses videos to tell its many incredible stories. I worked with our internal videographer and transcription vendor to update and caption over 30 existing and new videos.

I also developed a new corporate policy and procedure for transcriptions and captions to keep accessibility compliance and commitment high.

Training sessions

I led 10 training sessions on our new CMS and had content owners up and running quickly. I have often been complimented on how effective I am at explaining technical concepts to non-technical people and how adaptable my training style is to each individual’s learning style.

I also provided training in making content accessible and provided ongoing help desk style support as needs emerged.

Launch

Impact

  • Responsive to mobile devices
  • Stakeholders reported a reduction in incoming queries, an increase in efficiency in posting content, and pride in this updated home on the web.
  • Increased engagement from social networks as page thumbnails were easier to implement and display. 

What I learned

  • Gathering stakeholder pain points and requirements can be a very long process involving multiple full-day meetings. Mention treats in invites to reduce no-shows! 
  • Ensure hero image communicates overall brand and mission.
  • Empower non-tech staff in training sessions by enabling them to practice by migrating their own content.

Launch

Impact

  • Responsive to mobile devices
  • Stakeholders reported a reduction in incoming queries, an increase in efficiency in posting content, and pride in this updated home on the web.
  • Increased engagement from social networks as page thumbnails were easier to implement and display. 

What I learned

  • Gathering stakeholder pain points and requirements can be a very long process involving multiple full-day meetings. Mention treats in invites to reduce no-shows! 
  • Ensure hero image communicates overall brand and mission.
  • Empower non-tech staff in training sessions by enabling them to practice by migrating their own content.