Human Health Project: Health Data For All
Project Overview
The Human Health Project, founded in 2002 by Dr. Phil Harrington, provides donation-based, peer-to-peer programs whereby people can help each other with their health issues, thus reducing inequities in health outcomes. All work is done on a volunteer basis and conducted remotely. The organization’s new product, IMPACT, was to be introduced at an international conference in Dublin, and subsequently promoted on the website.
Goals
Evaluate the heuristics of the current site and make improvements to existing pages.
Redesign and restructure the current website to promote the upcoming IMPACT product.
Encourage corporate partnerships and fundraising efforts through the website.
role
My Role: UX Director / Lead UX Designer
Team: Katherine Gorman (graphic designer), Julian Park (UX designer)
tools
Sketch, Photoshop, Zeplin, InVision, Slack
Our Process
Discover & Define: Understand the scope of the project, identify key metrics to measure for effectiveness of the site, and identify HHP’s primary users.
Design & Deliver: Modify the website using wire-framing and prototyping tools, seek the feedback and approval of stakeholders, and pass on designs to development team by a strict deadline.
Discover & Define
determining the scope
When I joined HHP, I learned that the project was run remotely and dependent upon volunteers. This presented a challenge, as people are sometimes slow to respond or dropped out of the project altogether (two designers left within a couple of weeks). The organization was launching a new product, IMPACT, that had three core tenets:
Patient Advocacy Training
Real-World Data
Patient Education Services
Identifying our users
After speaking with the stakeholders to understand who the core users are, and their specific needs, I determined the purpose of each page, and how to design accordingly. Our core users are divided into three groups:
Patients: these are the primary users - HHP wants to provide these users access to information and services, where they might not otherwise have any, to help them navigate their health issues.
Patient Advocates: people who are interested in providing services to patients in need, either to care for loved ones or out of the goodness of their hearts.
Partners: these are representatives from companies and/or organizations who are seeking to partner with HHP to provide financial support, access to data, or other resources.
site analytics
The Analytics team reported that:
July 2019 had the highest number of sessions to-date
Session duration is the lowest it's been thus far this year (00:00:52)
Bounce rate has increased (63%), though July 2019 was similar to previous months
Percentage of users coming from social media is the lowest it's been all year (0.09%)
These numbers indicate that, although word is spreading about the organization, users visit the site, and do not devote much time or attention to viewing it or exploring the value of its services. I understood that, in addition to promoting IMPACT, I need to make the site easier to navigate and clarify its mission.
Secondary research
I created a shared document to evaluate potential user pain points in the current site’s design so we could ideate potential solutions to implement in our redesign. Key takeaways included:
The goal of the organization and the IMPACT program need to be clearly articulated
Make CTAs, text, navigation, and other elements consistent
Enable users to navigate between pages without having to click back to the home page
Restructure the hierarchy of information about the new product and other services
The existing design of the website’s home page.
Information Architecture
Initially, there was confusion amongst team members as to which pages we were creating, revising, or leaving alone. I created a site map to focus our direction and color-coded it by adding pages in green that we needed to create, boxes in red to illustrate existing pages that we were redesigning, and crossed out pages that were to be removed in the upcoming version 1.7 of the site.
Design & Deliver
Initial WirefrAMES: Homepage
I created wireframes of the home page, knowing that if we could determine the general layout and functionality, the rest of the pages would follow a similar format. I submitted my first iteration to the stakeholders and design team for comments and feedback. I highlighted some of the primary design updates in the annotation shown to the right.
This artifact would not only help establish a path forward for our design team, but it allow enabled us to get alignment with our stakeholders.
style guide
As I examined the organization’s assets, I found several different documents in various different folders that outlined some branding guidelines. Given that there is a relatively high turn-over rate of volunteers, I felt having a single unified style guide may help establish consistency not only in this new version, but in future iterations, as well. I created this style guide to establish:
Consistency with CTA’s, and converting the pill shape into a rectangular button
Color palettes, including new colors suggested by the graphic designer
Re-examining the typography choices and choosing weights that were more legible
Further Iterations: Homepage
As I iterated on the homepage, I added placeholder imagery, knowing that it would ultimately be updated. Based upon stakeholder feedback, I not only worked on the look and feel of the page but the copy as well. One theme that I wanted to express is that HHP puts the needs of its users first, and wanted the images to feel realistic while providing context.
As I finalized the design of the home page, I created designs for the rest of the pages much more efficiently. I established the habit of uploading the pages for feedback from stakeholders, which was logged in a shared document, and iterating quickly as I moved on to additional pages, which sped the process along.
Impact Overview
The overview of the IMPACT product is to be featured on the What We Do page. I was tasked with creating this page to explain the three tenants of the product, along with paths to further information for each. In contrast to the existing site, which only featured two separate and unrelated pages, this page established the product as being a more cohesive entity and allows users to explore it further. Key considerations at this stage include:
The addition of breadcrumb navigation.
More comprehensive copy explaining each of the tenants, along with clear CTA’s to the subsequent pages.
Removing the survey and including access to their results.
Retaining information about Becoming A Partner within these pages to continue promoting partnerships.
Further promotion of the General Health Survey to help the organization continue to accumulate data.
Including links to the other tenants within each page to encourage users to explore without backtracking through pages.
data visualization
One of HHP’s core tenants is accumulating and sharing Real World Data, and making it accessible to help guide people to make more informed health decisions. In its initial version, it gathered results from its users through surveys around the topics of Lupus and Migraines. Ultimately, its goal is to create a platform that not only gathers data from various sources (including partnerships with other organizations), but also displays the data in real time.
In v1.7 of the website, our job was to organize screenshots of existing results as placeholders for where future live data will be. My teammate, Julian, created the side navigation bar to allow users to find the category they were looking for, and I organized the 80+ possible variations of the pages. While it is outside the scope of this current project, I would like to revisit how users can navigate through the data in future versions.
High Fidelity mockup
All told, we created over 100 pages, which represent almost the entire site. I created a clickable prototype via InVision and used this to gain alignment with our developer and the stakeholders. As each page was approved, I loaded them to Zeplin for the developer to inspect and build while keeping in contact with him as he wrote the code.
Conclusion
next steps
Due to the time and budget constraints, in addition to the remote nature of the project and lack of available users, unfortunately, this redesign lacked substantial user testing. If given more time, I would like to test the newly designed experience with real users and gauge the effectiveness of our solutions.
Having said that, there are some next steps for version 1.8 (the follow-up to our redesign):
Re-structure the global navigation and footer for more clear labels, efficient groupings, and hierarchy
Create an easier way to navigate the various pages of data, such as utilizing a faceted navigation system, rather than the side menu of categories
As the product develops, and there will be various tiers available depending upon how much money a user or organization contributes the appropriate membership requirements and flows need to be considered
personal takeaways
For me, this project was significant. Not only did it give me the chance to contribute to an organization whose mission I believed in, but also gave me the opportunity to work in a leadership capacity. I was appointed UX Director early on in the project because I was proactive and offered action-based solutions. Some of my key takeaways from this experience include:
Get the ball rolling: By just creating a document, like the Heuristic Evaluation or a shared document to leave design feedback, people are more likely to offer their input. I found that because this project is remote and volunteer, it is not necessarily a priority for people during the week, but if you give them a platform to share their thoughts or take action, they will follow up.
Get organized: The style guide, for instance, was a document that needed to be used by designers within the organization, for this project and future projects to come. Designing a website with consistent elements, especially with remote teams, is a challenge. By creating a single go-to resource for everybody, I offered a way to mitigate the problem.
Get aligned: It is important to keep the lines of communication open. Coming into this project, I had a lot of questions, but if I had been afraid to speak up and ask, our team would have lost direction. It is necessary for people to communicate with each other along the way and seek help rather than guess or make assumptions, and have to pick up the pieces after the fact.