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
INDIRECT COMPETITORS
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
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.
DESIGN PROCESS & APPROACH
NAVIGATION
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.
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.
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.
