Client: Boston Children's Hospital (BCH)
-
Pediatric hospital affiliated with Harvard Medical School
-
Largest hospital-based pediatric research program in the world
-
Over 70% of users access the BCH website via a mobile device
Duration: 4 months
(Sept - Dec 2022)
Role: Lead UX Strategist
1. Overview
Project
Client sponsored project for graduate students to redesign the mobile Digital Health site for Boston Children’s Hospital in order to promote the digital services (e.g., virtual visits, remote patient monitoring, etc.) offered to patients and their families.
2. Problem Statement
How might we make the site more discoverable and accessible for patients and their families to better utilize Boston Children’s Digital Health offerings?
3. Process
We leveraged Nielsen Norman's design thinking approach for the Digital Health site redesign to understand, explore, and materialize designs in an iterative fashion.
Empathize
Define
Ideate
Prototype
Test
Implement
Empathize
Define
understand
Ideate
Prototype
explore
Test
Implement
materialize
Competitor Research
Two similar hospital websites with digital health services were evaluated in order to identify design conventions, features, and information architecture for this sector.
1. NewYork-Presbyterian
2. Children's Hospital Los Angeles
Competitor Insights:
-
Clear navigation and prominent call-to-action buttons for additional information on services
-
Responsive design for mobile, ensuring a consistent experience
-
Intuitive information architecture organizes content in a logical manner
Analytics & User Feedback
Boston Children's Digital Health Department completed some preliminary usability research and provided the team with some key analytics to ground our research in tangible user data.
-
97% patients and family are based in the U.S.
-
70% of users view the Digital Health site on a mobile device
-
Feedback from usability studies was very different on mobile device vs. desktop
-
Users expressed strong preference for photos, rather than icons, on the landing page
-
Participants did not understand the term TytoCare
-
The limited number of options in the menu bothered participants
Scoping the Project
After analyzing the secondary research and completing a project kick-off meeting with the client, we narrowed the scope of the project by brainstorming the following problem statement:
How might we make the site more discoverable and accessible for patients and their families to better utilize Boston Children’s Digital Health offerings?
With this problem statement established, we aligned on the following design priorities:
Improve the information architecture and navigation of the site
Implement a responsive design and prioritize mobile users
Update the copy of services to make it more accessible
Sketches
After defining our problem statement and design priorities, we drew some sketches to ideate our vision for some of the screens. The sketches were quick and low-fidelity, but they enabled us to explore and communicate ideas, facilitate rapid iteration, collaborate well as a team, and identify any early design flaws before investing significant time and resources into more detailed prototypes or mockups.
Paper Prototype
After sketching out some ideas, I chose one design that I built into a physical paper prototype. The main benefit of this paper prototype was that it enabled us to test user interactions in a cost-effective manner (only used cardboard, paper, stickies, and pens!) . We were able to use this physical prototype to iterate quickly and cheaply before getting to a more resource-intensive stage of development.
Medium Fidelity Prototype
We then developed medium-fidelity wireframes to outline the basic structure and layout of the new Digital Health site, which allowed us to focus on the placement of key elements and overall content hierarchy. We made a clickable prototype in Figma with these wireframes that served as a blueprint for our team and client to visualize the fundamental structure of our designs before detailed UI elements were introduced.
Usability Testing
We conducted a mini usability test with a few participants using a medium-fidelity Figma prototype. This allowed us to validate our designs and note areas for iteration and improvement.
User feedback:
The cards do not feel clickable and the connection to the digital service offerings below them is not clear.
Before
After
Improvement:
Followed the Gestalt principle of figure/ground and leveraged the diagonal background to reinforce connection.
Before
After
User feedback:
The "Who is it for" and testimonial sections are providing redundant value.
Improvement:
Integrated the persona and testimonial to be in one flippable card design.
Information Architecture
Given one of the main priorities was to improve the information architecture and navigation of the site, we updated the hierarchy of the secondary pages to make them all consistent.
Not all digital offerings had a secondary page and description of the service
Added a secondary page for each digital offering to make it consistent
4. Outcome
High Fidelity UI & Prototype
The final deliverable, a high fidelity Figma clickable prototype, was presented to the Digital Health Experience team at Boston Children's.
Enhanced overall navigation with updated information architecture across the secondary pages.
Applied responsive design so that it renders on mobile and other devices' (e.g., tablet, desktop) breakpoints.
Refined copy and word-choice by simplifying language and including keywords for SEO (search engine optimization).
5. Key Takeaways
Agile Methodology
By leveraging user stories, creating medium-fidelity prototypes, and updating designs over multiple iterations we followed some of the core principles of the Agile methodology. This enabled us to work very efficiently as a team as we made consistent progress, remained open to incorporating new feedback, and delivered our end product quickly.
Peer Review
We presented our work-in-progress (WIP) designs on four different occasions to our professor and graduate school classmates. We sought their input on specific questions that emerged from the user research and asked for their expertise in certain areas on our medium fidelity designs. Peer review proved a great strategy for enhancing our work while simultaneously optimizing our client's dedicated time for deliverable reviews.
Business Alignment
This project indexed heavy on UI design and it would have been easy to produce beautiful mockups and then call it a day. However, our team was intentional about aligning our work to the business goals in order to show the value proposition of our ideas. By connecting every design decision back to a business priority of Boston Children's Hospital we did not lose sight of the ‘so what?’ that underpins every screen and user interaction in our final protoype.