HepBMD: an educational hub for doctors, brings an underdiagnosed disease into focus.
Agency: Toolhouse
Background
Hepatitis B is a deadly and underdiagnosed disease that disproportionately affects some minority and immigrant populations. HepBMD.com is an educational hub to bring awareness to healthcare providers serving patients from those communities. It was full of useful information, statistics, and disease awareness information, but data showed a high bounce rate and a low page visit per session. The content was unnecessarily hidden, and there was excessive use of navigation to access the content. In close collaboration, my content strategy partner and I conducted a complete site redesign, information architecture, and content re-write process.
A Content audit and card sorting exercise
We began with a content audit, including content from outside the existing site. We identified some common categories of content, and with the guidance of the Account Director and Director of Digital Strategy, we conducted a card sorting exercise to establish the information architecture and site map.
A mobile-first approach to wireframes
I'm foolish and I'm funny and I'm needy. Am I needy? Are you sure I'm not needy? 'Cause I feel needy sometimes. That coat costs more than your house! Look, you are playing adults…with fully formed libidos, not 2 young men playing grab-ass in the shower. You go buy a tape recorder and record yourself for a whole day. I think you'll be surprised at some of your phrasing. Friend of mine from college. He also has a boat tho not called the Seaward.
Creating a visual language that puts the patient in center frame
There were few design constraints besides an established logo and color scheme. For that reason, I chose to explore mood boards to get both internal and client feedback on a look and feel that would capture healthcare providers' attention and place their vulnerable patients at the top of their minds.
While both mood options were well received, the team and the client chose option A. We wanted the healthcare provider to potentially recognize an active patient who may be at risk and overlooked. Because the nature of the portraits evoked a more personal and direct representation of the patient, option A was chosen.
Visuals that frame the patient who needs to be recognized
With client-approved wire frames and a visual aesthetic established with mood boards, I began applying the visual design to the content and establishing some data visualization patterns.
In collaboration with the content strategist, we created the concept of the animated “red box,” which is drawn over the patient photo as the page loads. The goal is to bring the health care provider’s attention to the idea that “the patient who needs to be screened for Hepatitis B could be the patient already sitting in your office. It could be the patient right in front of you.”
HepBMD.com: a data-rich information source that centers on the people behind the data who are historically overlooked
HepBMD.com is still full of dense clinical data, content, and guidelines for health care professionals. However, the content strategist and I worked to balance the dry, complex content with the human side of the disease and bring clarity and ease to understanding the nature of the deadly disease.
We organized the content in a more logical fashion and created easy-to-scan pages and navigation. To bring the content to life, I used ample photos of vulnerable patient populations, large at-a-glance data visualizations, use of white space, and recurring design patterns for similar content to create an experience for busy doctors that makes them pause and recognize that they may have vulnerable patients who need their attention.
Work contributed
- User experience strategy
- User experience design
- Visual design
- Motion Design
- Information Architecture
- Brand Design