UX/UI Mobile Response

January 2020


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.


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. 


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.


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. 





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 



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


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.



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. 


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.


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.


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.


  • Instagram
  • LinkedIn