Nextech Systems
Electronic Health Records Management Software
.png)
The Project
The website for a Boston Children's Hospital initiative needed a makeover.
​
After a thorough audit of the website's information architecture, content strategy and design, our team spent two months delivering a refreshed look and feel, complete with templated screen designs for the Boston Children's team to use and customize on their own.
​
Specializing in content strategy and information architecture, I conducted an open card sort to reorganize the site content, and created content hierarchy guidelines informing the toolkit and templates provided back to the client.
Overview
Boston Children's Hospital'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 IDHA website is meant to communicate this function, and provide an overview of initiative projects, past and present, to showcase the range of innovation to which the Accelerator applies its expertise.
I tackled the overarching content issues on the website, identifying opportunities to improve information architecture, navigation options, and overall content strategy both in terms of brand consistency (tone, lexicon etc.) and digestibility.​​
Personas
The primary persona for this website is someone external to Boston Children's, coming to the site to explore the variety of projects at the IDHA out of general curiosity, or with the intent of partnering with the IDHA to execute on a project of their own at any stage of ideation, pre- or post-launch.
A much more secondary persona is an internal employee at Boston Children's, 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 about concepting, partnership, and so on.
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
-
Unintuitive 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 too small to read comfortably​
-
In a Nutshell 🥜
The good news:​
-
We believe in what Boston Childrens' mission, and are excited to help them communicate the work they do.
-
We have all the information needed, we just need to reorganize and repackage it!
The bad news (well, challenging news):
-
There is a lot to cover, and many projects overlap in terms of the problem they solve and care solutions they utilize (including medium of delivery, ex: wearables, mobile-first, etc.)
-
We only have 8 weeks to figure out what to tackle and how, then to execute and deliver the redesign.
Step 1: Defining Project Organization
First, it was necessary to make sense of the content on the site. The primary navigation items were:
-
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 listed. The open sort, conducted in Figjam, is shown below.

Based on the amount of overlap between project areas, our team 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 our persona use cases. Within these specialty categories, project cards would display tags to help further describe the nature of the project. Given the number of projects on the IDHA website (around 60), we felt that two layers of categorization were both necessary and sufficient. The new categories identified are included in the sort below. A sample detail view is also included for legibility. Please note that at this stage, the category labels were not final but represent general buckets or groupings.


Step 2: Reimagining Content Strategy
Once the reorganization of the projects' information architecture had been thought through, other parts of the website like the Homepage, About page, header and footer needed to be revisited. These are focal points of the site that convey both the professionalism and compassion that underlie all work done at Boston Children’s.
Selecting the right hero imagery to span a diverse representation of providers and patients, while showcasing cutting edge technology and exciting collaborations, was key to giving this website the right look and feel. Paired with these images were easily scannable headlines with on-brand phrasing that accurately and concisely set the expectation for the content that follows. It is essential to provide the right balance of information and inspiration, visual interest through pops of color and weightier text, and just enough white space to not overwhelm the user.
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 and so on 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 Boston Children’s branding palette and other requirements.
Step 3: Creating a Templated Approach
With an eye toward client handoff, we wanted to provide Boston Children's not just with a refreshed approach to content currently available on the IDHA website, but with the tools they need to continue to add their own content as future projects develop. We created a standard template for project-level pages consisting of a specific hierarchy:
-
Project title
-
Hero image
-
Intro paragraph
-
Favicon section 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 pleasure to contribute to this organization, known around the world for its incredible work in healthcare.
​​
Linked here please find our final presentation, as well as our prototype.​​