Boston Children's Hospital
Boston Children's Hospital
Boston Children's Hospital
CASE STUDY · 10 MIN READ
CASE STUDY · 10 MIN READ
CASE STUDY · 10 MIN READ
OVERVIEW
OVERVIEW
Our design team partnered with Boston Children’s Hospital to redesign the Internal Digital Health Accelerator (IDHA) website, transforming it from a hospital subpage into a dynamic hub for medical technology innovation.
We aimed to improve navigation, enhance project discovery, and streamline pathways for stakeholders, collaborators, and investors to engage with the BCH team.
Our design team partnered with Boston Children’s Hospital to redesign the Internal Digital Health Accelerator (IDHA) website, transforming it from a hospital subpage into a dynamic hub for medical technology innovation.
We aimed to improve navigation, enhance project discovery, and streamline pathways for stakeholders, collaborators, and investors to engage with the BCH team.
ROLE
ROLE
Team Lead
Team Lead
TIMELINE
TIMELINE
12 Weeks
12 Weeks
TEAM
TEAM
4 Product Designers
4 Product Designers
TAGS
TAGS
Desktop
Desktop
UI Design
UI Design
Design System
Design System
Objectives and Constraints
Objectives and Constraints
Objectives and Constraints
To kick off the redesign of Boston Children's IDHA website, our team worked closely with the organization's lead designer and marketing manager to align on Boston Children's vision and goals. Together, we clarified key project objectives and identified technical constraints.
To kick off the redesign of Boston Children's IDHA website, our team worked closely with the organization's lead designer and marketing manager to align on Boston Children's vision and goals. Together, we clarified key project objectives and identified technical constraints.
To kick off the redesign of Boston Children's IDHA website, our team worked closely with the organization's lead designer and marketing manager to align on Boston Children's vision and goals. Together, we clarified key project objectives and identified technical constraints.
Objectives
Objectives
Increase discoverability of relevant BCH project and sponsor information.
Increase discoverability of relevant BCH project and sponsor information.
Ensure clear navigation, progress visibility, and automatic saving.
Ensure a consistent UI, clear hierarchy, and user-friendly language.
Enable clear avenues for employees and investors to contact BCH.
Condense information arch and site copy to be more easily consumed.
Constraints
Constraints
Lack of access to BCH investors and internal staff for usability testing.
Lack of access to BCH investors and internal staff for usability testing.
Adherence to Microsoft Fluent Design System and Windows fat client UI.
Adherence to the constraints of Xamarin.Forms and SyncFusion.
Adherence to established BCH branding guidelines.
Adherence to a three month timeline to present a hi-fi prototype.
Personas
Personas
Personas
After consulting with stakeholders at Boston Children’s our team defined two personas that aligned with the goals of their IDHA: Richard, an external entrepreneur and Suzanne, an internal employee.
After consulting with stakeholders at Boston Children’s our team defined two personas that aligned with the goals of their IDHA: Richard, an external entrepreneur and Suzanne, an internal employee.
After consulting with stakeholders at Boston Children’s our team defined two personas that aligned with the goals of their IDHA: Richard, an external entrepreneur and Suzanne, an internal employee.
Heuristic Evaluation
Heuristic Evaluation
Heuristic Evaluation
The original IDHA site had dense copy, especially on the portfolio and partnership pages. BCH highlighted that external investors visiting the site had limited time, so finding relevant information quickly was crucial. This insight led us to focus our heuristic evaluation on those sections, ensuring content was easy to navigate and digest at a glance.
The original IDHA site had dense copy, especially on the portfolio and partnership pages. BCH highlighted that external investors visiting the site had limited time, so finding relevant information quickly was crucial. This insight led us to focus our heuristic evaluation on those sections, ensuring content was easy to navigate and digest at a glance.
The original IDHA site had dense copy, especially on the portfolio and partnership pages. BCH highlighted that external investors visiting the site had limited time, so finding relevant information quickly was crucial. This insight led us to focus our heuristic evaluation on those sections, ensuring content was easy to navigate and digest at a glance.
Challenges
Challenges
Dense Site Copy
Dense Site Copy
Dense Site Copy
The site contained dense copy in 10 pt font that made it difficult for users to receive information at a glance.
The site contained dense copy in 10 pt font that made it difficult for users to receive information at a glance.
The site contained dense copy in 10 pt font that made it difficult for users to receive information at a glance.
Unclear Partnership Flow
Unclear Partnership Flow
Unclear Partnership Flow
The site lacked a clear CTA to partner with BCH outside of a small nested hyperlink on the partners page.
The site lacked a clear CTA to partner with BCH outside of a small nested hyperlink on the partners page.
The site lacked a clear CTA to partner with BCH outside of a small nested hyperlink on the partners page.
Lack of Portfolio Filtering
Lack of Portfolio Filtering
Lack of Portfolio Filtering
The site's portfolio page lacked search and filter functionality to find projects of relevance.
The site's portfolio page lacked search and filter functionality to find projects of relevance.
The site's portfolio page lacked search and filter functionality to find projects of relevance.
Solutions
Solutions
Streamline Site Copy
Streamline Site Copy
Streamline Site Copy
Increased copy size to 16 pt and worked with BCH employees to condense overall copy length.
Increased copy size to 16 pt and worked with BCH employees to condense overall copy length.
Increased copy size to 16 pt and worked with BCH employees to condense overall copy length.
Clear Partnership CTA
Clear Partnership CTA
Clear Partnership CTA
Added a clear partnership CTA, and increased visibility and clarity of each partner through a carousel.
Added a clear partnership CTA, and increased visibility and clarity of each partner through a carousel.
Added a clear partnership CTA, and increased visibility and clarity of each partner through a carousel.
Portfolio Search and Filtering
Portfolio Search and Filtering
Portfolio Search and Filtering
Assigned each project relevant tags and created a search and filter function to find projects of interest.
Assigned each project relevant tags and created a search and filter function to find projects of interest.
Assigned each project relevant tags and created a search and filter function to find projects of interest.
Mid-Fi Wireframes
Mid-Fi Wireframes
Mid-Fi Wireframes
Using the top level findings of our heuristic evaluation our team created a series of mid fidelity wireframes for the sites landing page, about us page, partnerships page, and portfolio page. Shown below are the key changes our team made between the initial site and our mid fidelity wireframes.
Using the top level findings of our heuristic evaluation our team created a series of mid fidelity wireframes for the sites landing page, about us page, partnerships page, and portfolio page. Shown below are the key changes our team made between the initial site and our mid fidelity wireframes.
Using the top level findings of our heuristic evaluation our team created a series of mid fidelity wireframes for the sites landing page, about us page, partnerships page, and portfolio page. Shown below are the key changes our team made between the initial site and our mid fidelity wireframes.
Usability Testing
Usability Testing
Usability Testing
In order to help validate our design decisions, the team conducted 3 usability tests with stakeholders from BCH that had never used the IDHA website before. Throughout the test users were asked to navigate through the about us page, search for a project of specific relevance, and use the partners page to partner with BCH. Below are the most prominent changes the team made post test.
In order to help validate our design decisions, the team conducted 3 usability tests with stakeholders from BCH that had never used the IDHA website before. Throughout the test users were asked to navigate through the about us page, search for a project of specific relevance, and use the partners page to partner with BCH. Below are the most prominent changes the team made post test.
In order to help validate our design decisions, the team conducted 3 usability tests with stakeholders from BCH that had never used the IDHA website before. Throughout the test users were asked to navigate through the about us page, search for a project of specific relevance, and use the partners page to partner with BCH. Below are the most prominent changes the team made post test.
High-Fi Prototype
High-Fi Prototype
High-Fi Prototype
Problem
Problem
Boston Children's wants to make their partnerships known to investors to promote social proof.
Boston Children's wants to make their partnerships known to investors to promote social proof.
Solution
Solution
A carousel partnerships page featuring partner details, case studies, and a clear CTA.
A carousel partnerships page featuring partner details, case studies, and a clear CTA.
Problem
Boston Children's wants to make their partnerships known to investors to promote social proof.
Solution
A carousel partnerships page featuring partner details, case studies, and a clear CTA.
Problem
Problem
No way to search/filter through projects or receive information about projects at a glance.
No way to search/filter through projects or receive information about projects at a glance.
Solution
Solution
A visual portfolio page with categorized projects that can be filtered and searched through.
A visual portfolio page with categorized projects that can be filtered and searched through.
Problem
No way to search/filter through projects or receive information about projects at a glance.
Solution
A visual portfolio page with categorized projects that can be filtered and searched through.
Problem
Investors need a way to view high level information about projects quickly to gauge relevance/interest.
Solution
A project details page that displays high level information, project partners, news, and clear CTAs.
Problem
Problem
Investors need a way to view high level information about projects quickly to gauge relevance/interest.
Investors need a way to view high level information about projects quickly to gauge relevance/interest.
Solution
Solution
A project details page that displays high level information, project partners, news, and clear CTAs.
A project details page that displays high level information, project partners, news, and clear CTAs.
Success Metrics
Success Metrics
Heuristic Insights Addressed
Heuristic Insights Addressed
Heuristic Insights Addressed
The information architecture and UI changes successfully addressed our heuristic evaluation.
The information architecture and UI changes successfully addressed our heuristic evaluation.
The information architecture and UI changes successfully addressed our heuristic evaluation.
Timeline & Constraints Met
Timeline & Constraints Met
Timeline & Constraints Met
Our design team successfully aligned with the client's timeline while working within their technological constraints.
Our design team successfully aligned with the client's timeline while working within their technological constraints.
Our design team successfully aligned with the client's timeline while working within their technological constraints.
Hi-Fi Deliverables Handed Off
Hi-Fi Deliverables Handed Off
Hi-Fi Deliverables Handed Off
Our team handed off a style guide, hi-fi wireframes, and a hi-fi prototype to BCH.
Our team handed off a style guide, hi-fi wireframes, and a hi-fi prototype to BCH.
Our team handed off a style guide, hi-fi wireframes, and a hi-fi prototype to BCH.
Next Steps
Next Steps
Gather Engineering Constraints
Gather Engineering Constraints
Gather Engineering Constraints
With limited engineering input, collaboration would be needed to define implementation constraints.
With limited engineering input, collaboration would be needed to define implementation constraints.
With limited engineering input, collaboration would be needed to define implementation constraints.
Validate Portfolio Categories
Validate Portfolio Categories
Validate Portfolio Categories
While our team created portfolio categories that made sense to us, a card sort would help validate them.
While our team created portfolio categories that made sense to us, a card sort would help validate them.
While our team created portfolio categories that made sense to us, a card sort would help validate them.
Conduct Hi-Fi Usability Tests
Conduct Hi-Fi Usability Tests
Conduct Hi-Fi Usability Tests
Lacking access to external investors during our initial test, usability tests with them would be a valuable asset.
Lacking access to external investors during our initial test, usability tests with them would be a valuable asset.
Lacking access to external investors during our initial test, usability tests with them would be a valuable asset.