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
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.
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.
