HEALTH HIPPO

UX/UI Mobile Response

January 2020

BACKGROUND

Health Hippo​ is an alternative source of clear, trustworthy health information created for making better healthcare decisions. The approach provides a fast, simple way for consumers to tap into timely, relevant, and reliable medical information built on the views of many medical experts and in-depth research.

CHALLENGE

Health Hippo believes consumers should have access to essential information that empowers them to be the best advocate for their health. Sifting through and validating medical information is daunting and requires clinical understanding and expertise. Consumers are looking for clear health information at their fingertips, in 10 mins or less. 

SOLUTION

Design a mobile responsive user interface for Heath Hippo, and enhance visual interest, intuitive navigation, and overall user experience. The site should be engaging and intuitive to differentiate the brand, optimized for use on mobile devices, and appeal to a diverse audience of users.

RESEARCH 

The digital health sector is a rapidly growing industry reaching a high in 2019, topping $5 billion. Technology paves the way for health brands to go directly to consumers. The Health Hippo landscape assessment consisted of domain research and competitive analysis, which gave insight into current aesthetic trends, brand presence, and overall user experience of existing industry leaders. 

DIRECT COMPETITORS

5e62c9467f3b4325cbe1c4e7_s.png

INDIRECT COMPETITORS

5e62c9be37d2d78510e3aa0b_asdfasf.png

RESEARCH INSIGHTS

HIEARCHY

Establish a visual hierarchy to organize and provide easy-to-read segments of text-based information

Utilize casual stock images or illustrations to create relevant, credible, and relatable visuals 

IMAGERY

COLOR

Implement padding and white space, with pops of bold color for a clean and compelling visual layout 

kkkkbnb.png
Vector-1.png
Vector-2.png

WIREFRAMES

The wireframe process allows for the opportunity to walk through the structure of the design without getting sidetracked by design elements such as colors and images. The translation of desktop features needed to be resized and implemented into an easy to understand mobile screen. This simple display of information allows for users to take action and accomplish tasks more efficiently. The goal of this wireframe was to create legible and intuitive features for the user to navigate.

Conditions Page 1.png
Doctor Rating Card.png
Resource Card.png
Rating Card.png

DESIGN PROCESS & APPROACH

NAVIGATION

INSIGHT

The usability testing of wireframes with drawer navigation revealed that 70% of the consumers found the Hamburger Nav bar intuitive, recognizable, and expected with mobile interfaces. By increasing the font size and redesigning the card to be more prominent, the in-section navigation was preferred and allowed users to navigate its content.

For users to properly explore Health Hippo’s condition information, the mobile design needed to be intuitive and have an accessible, consistent navigation system to quickly access various health conditions pages. Additionally, in-section content navigation had to be redesigned as an interactable list to fit the mobile layout. 

IMAGERY

Given the importance of images and illustrations in this site, it was essential to properly re-evaluate and improve upon the platform’s visuals to attract, engage, and convey trustworthiness amongst users. The exploration of visual options of anatomical illustrations and casual stock images should be conducted to discover which visuals direction would enhance content credibility and engagement.

3.3.png
3.2.png
3.1.png
INSIGHT

85% of users expressed the desire to have stock images for the Conditions pages vs. illustration as they were more precise and more relatable. Additionally, users requested more images and visuals overall to improved understanding of complex health conditions. The use of images which are branded by Health Hippo colors/logo and in context (especially the hero images) will enhance a trustworthy and professional feel.

IN-SECTION ARTICLE FEATURES

Health Hippo provides a stoplight color-coded system to help users differentiate between trustworthy and false information. This feature is a key differentiator from other competitors. Additionally, the layout of Supplemental Resource, which includes infographics, illustrations, and videos to enhance articles’ health content, should be effectively displayed. As a result, the call-to-action button was removed for the mobile design of Supplemental Resources to ensure they are accessible, prominent, and understandable for users.

Theis.png
THIS.png
INSIGHT

Multiple rounds of testing revealed that 90% suggested removing the "On/Off button” for the Stoplight Rating feature as it more clearly signified source credibility.  This change and in addition to Supplemental Resources improved readability and enhanced the understanding and engagement of the article.

CONCLUSION

Given the sensitivity and importance of “The Chat to Doctor” feature, the site should contain comprehensive HIPAA information to assure users that their personal health information will be protected.

 

As a final and crucial step, a design system was created, capturing each interface element into a cohesive and single space for future designers to reference to maintain consistency in the Health Hippo mobile responsive site. 

5e62b89b7f3b43be4ae15bea_Hero CS1 HH 1x.