I created the type lockup and animations for J.Jill's 12 Days of Gifting campaign.
These assets were used in various forms on the site, social media, and email communications.
Boston Children's Hospital X Bentley HFID
Redesigning the Digital Health section of the Boston Children's Hospital site to more effectively promote digital health offerings
TIMELINE: 9 weeks
TEAM: 3 graduate students in the Bentley HFID Master's Program; HF770: Prototyping and Interaction Design
MY ROLE: Managed the Figma prototype from start to finish, supported research and client presentation design
TOOLS: Figma, Miro
The Challenge
Boston Children's Hospital is a leading provider of pediatric healthcare services.
For this sponsored project, representatives presented our class in the Bentley MSHFID Program with the challenge of redesigning the Digital Health portion of the hospital's site.
.png){kind=logo}
The Scope
Wording, placement, order & organization of Digital Health site content
Design of Digital Health site menu navigation, homepage, and subpages
Specification of how users would navigate to the Digital Health site from the main BCH site
Copy and word choice optimization
Integration of informative photos & visualizations
The Solution
Our team created an updated design that showcases the hospital's offerings in a more user-friendly format. This solution incorporates changes to site information architecture, layout, and copy while maintaining brand standards.
Highlighting the benefits of Boston Children's Hospital digital offerings
Making offerings easy to find and understand
Incorporating clear & concise copy
Maintaining brand consistency & site standards
The Journey
Information Architecture Studies
Before beginning the design process, we wanted to lay down the structure for an updated site information architecture. Through tree testing and card sorting, we determined how our team would name and categorize digital health services so the user can understand and locate them more easily.
Q1: Where should the Digital Health section live on bch.org?
Currently, there is no entry point to Digital Health from the Boston Children's homepage. Part of the project scope was to determine how users will get there. In our tree test, Digital Health products & offerings were most often placed under Digital Health (52 times) or under Patients & Families (38 times) in the Boston Children's Hospital main site menu.
Recommendations
Place Digital Health under the Patients & Families top-level section of the BCH main menu to help guide parents who are looking for offerings for “patients & families.”
Consider renaming the Digital Health section to “Digital Healthcare”; “Health” is an overly broad term that is less closely related to patient care than “healthcare” is.
Q2: How should digital offerings be organized and named?
On the current site, there are nine different digital health products and services. We conducted a card sorting test with 13 participants to determine how best to organize and name these services.
MyChildrensPatient Portal
Findings: Grouped inconsistently within inpatient or at-home tools
Recommendations: Remove as a dedicated subsection and instead add a Call-To-Action (CTA) at the top of the Digital Health homepage to help users quickly get to this tool if they miss it in the global header
Virtual Visits & Video Visits
Findings: Placed in the same groups by all participants, with top associations with virtual/remote/telehealth groupings and appointments/visits
Recommendations: Place Virtual Visits in Virtual Care (vs. In-person Care) to reflect association with virtual services, and include a reference to Video Visits under Virtual Visits as these two offerings were often associated with one another.
Online Second Opinions
Findings: Most consistently grouped as a virtual/remote/telehealth or secondarily, as digital services/tools
Recommendations: Place in Virtual Care (vs. In-Person Care) to reflect association with virtual services.
Voice Transcription
Findings: Grouped most often as general tools & services and inpatient/outpatient, but also had a large variety of other groupings
Recommendations: Assuming it’s only offered for in-person visits, place this offering in In-Person Care (vs. Virtual Care) to make this association clearer. In the offering name and description, make it clearer that it is a service (e.g., Voice Transcription Service). NOTE: Sponsor indicated in discussions that this is offered for Virtual Visits as well, so we ultimately placed it under "Related Programs and Services" in our updated IA.
Remote Patient Monitoring
Findings: Associated with a range of groupings, incl. general tools & services, inpatient/outpatient tools, and patient care. As it appeared in a wide variety of groupings, could point to confusion about the service itself.
Recommendations: Place in Virtual Care (vs. In-person Care) to reflect association with virtual (and non-inpatient) services. Also consider updating the name to be clearer it involves a physical tool (e.g., “Remote Patient Monitoring Tool”).
Voice-Powered Care Assistance
Findings: Most often appeared in general tools & services and in/out-patient, and was grouped most of the time with Remote Patient Monitoring. In the Tree Test, it was also placed incorrectly the second most often. Participant feedback pointed to potential issues with understanding the scope of the offering overall.
Recommendations: Place in In-Person Care (vs. Virtual Care) grouping to make clear it’s only available in the hospital. Also update the name to reflect terms that are more familiar to consumers (e.g., “Voice Assistant-Powered Care” may make more sense to users).
Innovation & Digital Health Accelerator
Findings: Stood out as dissimilar from all the other offerings. No participants placed it under Digital Health in the Tree Test; it was most-often placed under Researchers.
Recommendations: Keep this offering under the current “Innovation” section of the BCH site and frame it as a “related program” at the bottom of the Digital Health page, for users looking to learn more about BCH’s efforts in the digital healthcare space.
Precision Medicine Service
Findings: Groupings were unable to be standardized. It was not placed within virtual/remote/telehealth groups, and was assumed to be an in-hospital service. It was also placed incorrectly the most often in the Tree Test.
Recommendations: Remove from Digital Health section completely and consider updating the name to reference genetics to make it easier to recognize, understand, and find (e.g., “Genetics-Informed Medicine”).
Link back to Digital Health from the Precision Medicine Service overview page and add Precision Medicine Service under the Researchers > Innovation site section.
Below are the results of our studies shown in the form of IA diagrams. Due to time constraints, we focused on building out more in-depth subpages for Virtual Visits and Voice Transcription that could serve as templates for other subpages.
Original Information Architecture
Proposed Information Architecture - V1
Initial Wireframes
We leveraged the study findings to create an initial wireframe that included the entry point to Digital Health from the Boston Children's Hospital homepage menu, a new Digital Health homepage, and a Virtual Visits subpage.
Main Menu
Place “Digital Healthcare” under “Patients & Families” based on tree test research findings; digital offerings were categorized under Digital Health (52 times) or Patients & Families (38 times) the most
Rename “Digital Health” to “Digital Healthcare” to make it a more approachable category for users
Divide offerings into “Virtual Care” and “In-person Care”, both directly accessible from the main menu, based on card sort & tree test findings
Digital Healthcare Homepage
Very brief explanation of Digital Healthcare to introduce the page along with convenient contact CTA
Menu with exposed main categories represented by (tbd) icons
Standalone link to MyChildren's Patient Portal; it was placed in the most diverse set of groupings by study participants
All offerings are represented under menu dropdowns so users can easily navigate to the option they’re looking for
Order of services in the body of the page aligns with top menu structure to keep users oriented
Each offering is represented in an easily digestible card format with an image and concise bullet points followed by CTAs with specific action items
Categories with less information receive a different treatment with a simple icon
Virtual Visits Subpage
Sections titled in question format to make it easier for the user to find information
they need; this was seen frequently on competitor sites
Info cards divide content into logical sections and provide details in the form of easily digestible bullet points
Option to schedule a virtual visit directly from this page
Tips section for patients who already have
a virtual visit scheduled
Accordion FAQs at the bottom of the page
Sponsor Testing Updates
After we created this initial prototype, representatives from Boston Children's Hospital visited our class. We had the opportunity to ask questions and conduct usability testing with them to refine the design.
First, there were several changes to our proposed information architecture that arose based on sponsor comments. The main updates were changing "In-Person Care" to "In-Hospital Care" and adding a "Related Programs & Services" category to host Voice Transcription and the Digital Health Accelerator.
Proposed Information Architecture - V2
We also updated our wireframes to reflect these IA changes as well as several other modifications based on sponsor feedback.
Digital Healthcare Homepage
Removed Contact Our Team button based on feedback that contact options are different per product offering
“Contact our team” button might be difficult to implement; each product team is very separate… they would prefer that it’s not prominent.”
- Test Feedback
Updated icons to better match new menu groupings, including additional Related Programs & Services section, and added Voice Transcription Service under this category after receiving additional information from the sponsor
Virtual Visits Subpage
Added subpage menu to make contents easy to navigate and reduce scrolling.
“I didn’t see FAQ initially at the bottom…” - Test Feedback
Prominently featured the Virtual Visits tech support phone number.
“(Technical support number) is important way to contact that team.” - Test Feedback
“How Do I Schedule a Virtual Visit” section, including the option to solicit interest in cases where programs do not yet offer virtual visits.
“Would like ways to encourage programs that discourage virtual visits to see the benefits of considering them.”
- Test Feedback
Usability Testing
We utilized the Maze platform to perform unmoderated usability testing. The test presented users with five different scenarios, each with a corresponding task that they were asked to perform using the prototype. We gathered several recommendations for prototype updates based on the results.
Recommendations
Many users clicked “Schedule a Virtual Visit” to learn more about Virtual Visits and Participating Programs (rather than clicking “More about Virtual Visits”). Remove this button from the Digital Healthcare Virtual Visits card to reduce choice overload and support progressive disclosure of information.
Additionally, re-enforce paths to schedule a visit by using more direct language in the CTAs on the Virtual Visits page. “Schedule a Visit with MyChildren’s Patient Portal” will likely catch the eye of someone looking to schedule rather than “Login to MyChildren’s Patient Portal.”
Some users clicked menu items other than "I Have a Virtual Visit" to locate tips on how to have a successful virtual visit. Update the “I Have a Virtual Visit” menu item to “Preparing for your Virtual Visit” for clarity.
Additionally, replace the “Tips for Virtual Visits” section with a button that leads to the one-pager info in web form (vs. PDF) or remove references to guides/tips, as information already on the Virtual Visits page was seen as redundant.
Initial High Fidelity Design
After this round of usability testing, we translated our designs into high fidelity utilizing Boston Children's Hospital fonts, colors, and styles.
Main Menu
Digital Healthcare Homepage
Virtual Visits Subpage
The Final Product
Proposed Information Architecture - Final
The final proposed information architecture incorporates menu structures for Virtual Visits and Voice Transcription subpages that could be used as templates for additional product pages.
The highlights of the design are described below, structured based on the high-level goals of the Boston Children's Hospital sponsor team.
Make Offerings
Easy to Find &
Understand
There is a user-friendly path from the main site menu to the Digital Healthcare homepage.
"Finding the information seemed very intuitive"
- Test Participant
"Just was easy to click through didn’t have to think!”
- Test Participant
"Virtual Care", "In-Hospital Care" and "Related Programs & Services" categories are accurately represented with Boston Children’s marketing-approved icons and proposed new icons.
Products and services are categorized in a user-friendly manner according to information architecture research findings.
Highlight
Digital Products
A straightforward card format with representative imagery, concise bullet points, and a single actionable CTA displays offerings with subpages on the homepage.
Key features of In-Hospital Care offerings without subpages are highlighted with clear bullet points.
On the Virtual Visits page, a subpage menu with corresponding icons helps highlight important information and make page contents easy to navigate.
More direct language is used for the scheduling CTA under "How Do I Schedule a Virtual Visit" to facilitate engagement.
Detailed “Tips” section is replaced with a CTA link to a dedicated page to clarify location of important information.
"I did a lot of scrolling trying to find the best related link to get me the info I was looking for."
- Test Participant
The new Voice Transcription subpage replicates the Virtual Visits subpage pattern to effectively highlight features and explain offerings in a consistent format.
Use Clear,
Concise Copy
Descriptive copy is integrated as needed while simplifying language and reducing sentence length. The Flesch Reading Ease Score was improved across all pages (Grammarly, 2022).
The Flesch Reading Ease Score measures on a scale of 1 - 100 the readability of text (100 being most easy to read and 0 being most difficult). It is based on the average length of words and sentences (Grammarly, 2020).
Follow Brand
Guidelines
Standard Boston Children’s styles, fonts, and colors are utilized for consistency across pages.
Digital Healthcare Hero photo is updated to convey more engagement between patient, parent, and provider. Also chose a brighter photo treatment to add needed contrast to the blue color scheme.
Subpage hero photos are updated to better represent offerings while maintaining consistent look and feel.