DISCOVERY

Human Health Project (HHP) is a non-profit which is built upon peer-to-peer health information, education, and support. Through its programs, its objective is to empower individuals locally and globally to manage their health.

HHP was founded in 2002 by Dr. Phil Harrington who had spent three years trying to find a diagnosis which sparked the idea for HHP. Today, the organization is made up of a small core staff with 80+ volunteers, 30+ board members and advisers, spread around the world.

Official website launched in December 2018. To learn more, open the website at: https://humanhealthproject.org

Meeting with Stakeholders and the teams

After meeting with Human Health Project's CEO, Product team and Marketing team, I gathered some insights related to their current challenges, goals, and what their users were currently experiencing with the website. After a few conversations with the non-profit, I was given the task of redesigning the donation process and helping users sign up for new challenges. My approach to the task starts with the User Design Canvas.

Business

A non-profit that helps people who struggle with their health issues to share their experiences of how to overcome their medical illnesses

Users

• Patients who have health difficulties and want to find the best treatment
  
• Patients who already overcame their health problems and want to share their data
  
• People who want to become Patient Advocacy volunteers and HHP volunteers
  

Problems

• The current Donate and Challenge pages cover a lot of text, so it makes new users feel overwhelmed with a lot of information
• The layout of the website is out of date, does not provide a clear navigation for the users, and is slow to load
• The look and feel is inconsistent with brand identity

Motives

• Learn more about Human Health project 
• Look at real world data
• Volunteer to join Patient Advocacy or be a part of Human Health Project team

Solutions

• Create a different layout, so all the text does not look so dense
• Use trending patterns such as card-based design to structure the page content
• Include a lot of people images to promote the community presence
• The donation call-to-action button is visible on the page, so users will attempt to complete the task

Screenshots from the old website

DEVELOP

Information Architecture

The goal of this design process is to structure the whole website, how pages are laid out, different levels of hierarchy within a website or application, and the organization of all the content to present clear information for the users of Human Health Project. My team worked on building out a site map for the whole website. I contributed to mapping out the different ways that users can make a donation, and how they can sign up for a challenge to raise money for the organization.

Features

Make a one-time donation or a monthly donation

The old donate page had a lot of text, and it's really hard fot the users to undertand the main goal of what they need to do. There is no clear section for the users to make monthly donations, and one-time donation. Besides that, Human Health Project doesn't use donate by mail, eBay and Amazon Smile as a main source of receiving donations anymore.

To solve this problem, I used card-based design to organize the layout and content on the page. I also included a clear call-to-action on each card to draw the user's attention and engage them in completing the task. I also removed the section for donate by mail and other alternative ways to donate based on the lack of use.

Sign up for the challenge by Volunteering

There are some problems with the old HHP challenge by volunteering:
There is no white space in between the text, so it made the users feel confused by reading all the information.
The yellow background is inconsistent with the HHP brand, and the page doesn't have clear navigation.

To solve this problem, I use a set of questions and answers to guide the users through the process of signing up for the challenge. I add a section to introduce the users with the challenge, explain the necessary steps to become a volunteer, and how they can sign up for it. In addition, I also organize the content by adding a primary color, and an adjacent color to separate the sections, and include a clear call to action button "Sign Up".

HIGH-FIDELITY PROTOTYPE

REFLECTION

Future Plans

• When my team works on the second webpage redesign process, we will move towards illustration icons, so the pages will become more user-friendly.
• HHP is planning to make a mobile version, so it will reach more users. The UX team will work on making the entire product from scratch.

Lessons Learned

• Communication is key when working with a big team to establish the flow. I made an effort to keep the team up-to-date with all the changes in the design process.

• I followed the color guide, typography, and design guidelines to be consistent between team members.

• When choosing the photos for the non-profit, I was required to use licensed images.

© NHUNG LE 2019. All rights reserved.