Health Hippo


About the Project

Health Hippo is a consumer-facing website that aims to offer a trustworthy alternative to the plethora of vaguely worded and questionably-researched content of popular medical sites. The Health Hippo gives you what you need to do know about a particular health condition in 10 minutes.

Team: 4 people
Goals: to develop a mobile version of Health Hippo website.
My Role: resources page and dropdown menu for the conditions page


How is Health Hippo Different?

Users know instantly what has strong evidence behind every color

Health Hippo provides users 3 to 5 of the best Citations.

Also, Health Hippo gives you a Health Hippo score for each health condition.

Health Hippo was the first client project for me. When I first time heard about it I immediately decided that Health Hippo is for me because I have a medical degree. The product has a website and our priority task was to create a responsive design.


The problem

Our priority was to develop a mobile version of the Health Hippo site because our client could not launch the project without a responsive design.


Design Principles

Consistency

Consistency helps to reduce the learning time for a product since user gets familiar with the given experience.

Feedback

Feedback communicates the results of any interaction, making it both visible and understandable.

Professional

Providing the right amount of information, neither too much nor too little.

Proximity

The process of ensuring related design elements are placed together. Any unrelated items, should be spaced apart. 

The Solution

Once all of the testing for the hi-fidelity screens came back positively, we focused on developing a high fidelity prototype, and on creating a simple and functional layout that was eye-catching and soothing to users. 


How was the solution reached?

Domain research and Competitive analyses

The first step was to make domain research and competitive analysis.We wanted to figure out what website in trend, what colors, typography, and iconography they use

User Interviews

The most important step in the process was conducting user interviews.
During the User Interviews of this project, we set out to define what Health Hippo means to users, and how they enact it. We wanted to find what were the most important features in the Health Hippo and what could be improved. 

Mid-Fidelity Screens

Our first goal was to develop mid-fidelity wireframes which we could test with users based on our ideas. Our concept was to create several most important features for responsive design. The main goal was to make rough screen layouts, show users how we see this application and test them.

Fact verification toggle

Users found that fact verification spotlight is very useful and adds credibility, therefore they couldn’t see the reason why the fact verification toggle would be off. Spotlight feature - not destructing to read 

Rating Card

We created a mobile version of the Rating Card and found that users prefer to leave the map structure the same as on the desktop version of the site

Hamburger menu VS Bread Crumbs menu

We tested  Hamburger navigation and Bread Crumbs menu. After user interview we gathered insight that users prefer Hamburger menu over Bread Crumbs, because it's intuitive and convenient for mobile version

 Hamburger menu

Bread Crumbs menu

Inline Resources VS Floating Button

For Resources page we created 2 examples of screens: first with inline resources where we can check resources with button “Show Diagram” and “Close Diagram”, second with floating button where we can find resources in Carousell. We tried to learn what users prefer to see and which option is more useful. We found insight that users prefer to see resources inline, Floating button not obvious for them.

Inline Resources

Floating Button

Hi-Fidelity Screens

Once all of the the testing for the mid-fidelity wireframes came back positively we focused on developing a high fidelity prototype. We focused on creating a simple and functional layout that was both eye catching and soothing to users.

Home Page

We tried to learn how easy for users to search the Home Page. We learned that users need direct access to the conditions.

Hamburger menu

Also for Navigation bar we created Hamburger menu. We tried to learn how easy for users to navigate the application.

In-Section Navigation

We tested In-Section Navigation in order to understand whether users need direct access to state views.

Resources page

We created Resources always present because users didn’t find the button “Show Resources” useful. Inline Resources are well perceived by users and make reading easier, engaging, helpful, intuitive

Spotlight feature

After user reviews, we left the evidence always on, and got final insights that this future adds trustworthy to the site.

Take Action Card

We tested Take Action Card. We tried to understand is this card readable, understandable and relevant.


How we tested illustrations Vs pictures?

Pictures

First we tested pictures. We learned pictures are
  • Effective
  • Familiar
  • Professional

Illustrations

Also we tested illustrations and gathered insights:
  • Too medical
  • Outdated
  • Unclear


Future recommendations

Based on the user testing and our expertise we suggest: 

Stoplight rating should be more prominent and need more explanations since they are the key differentiators from other health related websites. Just the Confidence score on its own could be a UX project.

Images that are up to date, branded by Health Hippo colors/logo, in context (especially the Hero images) so they are trustworthy, reliable and believable. 

Main Takeaways

It was a great experience for me to made responsive website design. It helped me to get experience in developing this type of site,  how to work with a real project, how to work as a team on one project.


Key Points

  • My personal point of pride in this project is the examples of images which we implemented since it was modified and tested with users in order to find the best option.
  • The design we developed was based on our users. We wanted to develop a product where people will trust medical articles with the ability to quickly search for health conditions


What did I learn?

I learned that Health hippo is trustworthy, clear and reliable website. It is a broad space for those, who want to know about health conditions everything. 

In doing this project I learned so much as a team. As a team we learned to fully lean into the UI process.

It was truly an eye opening experience and a project I am proud to say I was able to be a part of.