Boston Children's Hospital
Innovation & Design Healthcare Accelerator
.png)
The Project
The website for a Boston Children's Hospital initiative needed some love. Through a full audit of information architecture, content strategy and design, our team delivered a refreshed look and feel, complete with templated screen designs, within 8 weeks.
​
Specializing in content strategy and information architecture, I conducted an open card sort to reorganize the site content, and created content hierarchy guidelines for Boston Children's to use into the future.
Overview
Background
​
BCH’s Innovation & Digital Health Accelerator (IDHA) is an initiative through which the Hospital partners with both external and internal entities to provide digital health solutions that make delivering care easier for providers, caregivers, or patients themselves. The main purpose of the IDHA website is to provide an overview of projects from the past and present that showcases the range of innovation to which the Accelerator applies its expertise.
The primary persona for this website is someone external to BCH, coming to the site to explore the variety of projects at the IDHA for their own curiosity, or with the intent of partnering with the IDHA to execute on a project of their own. This persona may be in any stage of ideation on their concept, from a simple proposal to a launched start-up ready for a new phase of growth.
A much more secondary persona would be an internal employee at BCH, browsing the website for similar reasons. We were asked to include a flow that accommodates such a user and redirects them towards internal channels for any inquiries.
I tackled the overarching content issues on the website, identifying opportunities to improve information architecture, navigation options, and overall content display both in terms of branding and legibility.
​​
Framing the Problem
The current IDHA website contains information that users need to understand what the Accelerator does, but displays it in a suboptimal manner with unclear navigational cues that make it difficult to browse.
Prominent pain points include:
-
Inconsistent branding throughout
-
IA categorization without sufficient explanation
-
Images that do not pair well with other surrounding content and a general lack of images that contribute to…
-
Large blocks of text that overwhelm the reader
-
Lines of text too long to read comfortably (standard practice should be about half the length of the screen)
-
Font that is to small to read comfortably
​
...to name a few.
In a Nutshell 🥜
The good news:
-
We have all the information we need, we just need to reorganize and repackage it!
-
We believe in what Boston Childrens' mission, and are excited to help them communicate the work they do.
The bad news (well, challenging news):
-
There is a LOT to cover, and many of these projects overlap in terms of the problem they solve, care solutions and medium of delivery (wearables, mobile, etc.)
-
We only have 2 months to figure out what to tackle and how, then to execute and deliver the redesign.
Step 1: Defining Project Organization
We needed to make sense of the content on the site. The primary nav items were currently:
-
About
-
Portfolio
-
Digital R&D
-
Partnerships
-
Programs
What is the difference between a “Portfolio” project, versus “Digital R&D,” or “Partnerships” and “Programs”? Our audit revealed that “Digital R&D” was more closely aligned with academia and public health research, and “Partnerships” consisted of a handful of ongoing partnerships (5) with large companies like Amazon or Uber. The titling in the primary nav wasn’t accurately conveying this logic.
I conducted an open card sort to get a holistic sense of the true spectrum of projects displayed on this website.
IMAGE
Based on the amount of overlap between project areas, we felt that a universal search and filtering functionality would be a more appropriate way to display this information. Within this umbrella of all “Projects,” I identified specialty areas that were descriptive and specific enough to be helpful for persona use cases. Within these specialty categories, project cards would display tags that help further identify the nature of the project. Given the number of projects on the IDHA website (around 60), we felt that two layers of categorization was both necessary and sufficient.
​
IMAGE
IMAGE
Step 2: Reimagining Content Strategy
Once we had the reorganization of the Projects IA under control, we needed to refresh other parts of the website like the Homepage, About page, header and footer to convey both the professionalism and compassion that underlies all the work done at Boston Children’s Hospital.
Selecting the right hero imagery to span diverse representation of providers and patients, cutting edge technology and exciting collaboration was key to giving this website the right look and feel. Paired with these images were scannable headlines with on-brand phrasing that accurately and concisely sets the expectation for content that follows. This balance of information and inspiration, pops of color and text, and just enough white space to not overwhelm the user, is an art of taste and utility I’ve learned over many years in crafting content.
Establishing guidelines for titling between title case, sentence case or all caps, color and sizing, and the use of cards, carousels and other modules, background color etc. were all aesthetic matters we discussed as a team. We used the Google Materials Design 3 design system as a basis from which to modify elements to establish our proposed redesign within BCH’s branding palette and other requirements.
Step 3: Creating a Templated Approach
With an eye towards client handoff, we wanted to provide BCH not just with a refreshed approach to content currently on the IDHA website, but with the tools they need to continue to add their own content as more projects develop. We created a standard template for project-level pages consisting of a specific hierarchy:
-
Project title
-
Hero image
-
Intro paragraph
-
Favicons with highlighted stats
-
Body copy
-
Footer with carousel of related projects and/or news articles
With this customizable structure, the IDHA would be able to continue displaying project information in a clear, consistent manner going beyond our current project with them.
Final Delivery
Our final client presentation, which summarizes the project nicely, can be found below. It was a great pleasure to work with a fantastic organization that does such amazing work in healthcare.
​
Linked here please find our final presentation, as well as our prototype.​​
