Clearing a Pathway for 9Health's Digital Tools

9Health approached us to address a few problems they had regarding their current website; streamlining the pathway to make a donation, redesigning the Find a Fair search page, & revising the 9Health homepage.

9Health Home Page

Clearing a Pathway for 9Health's Digital Tools

9Health approached us to address a few problems they had regarding their current website; streamlining the pathway to make a donation, redesigning the Find a Fair search page, & revising the 9Health homepage.

9Health Photo circa 1970

40 Years of Service

9Health is a non-profit dedicated to advancing health awareness by providing Coloradans with the tools they need to take responsibility for their own health. As the organization enters its 40th year, 9Health aims to expand beyond its origins as a health fair and into the digital arena

40 Years of Service

9Health is a non-profit dedicated to advancing health awareness by providing Coloradans with the tools they need to take responsibility for their own health. As the organization enters its 40th year, 9Health aims to expand beyond its origins as a health fair and into the digital arena

9Health Fair - Salud de la Feria

The Problem

In recent years, fair attendance has decreased, in turn resulting in a decrease in donations. 9Health approached us to help resolve this problem by examining and investigating their current website.

The Approach

Our approach was to evaluate the current website by conducting heuristic analysis and administer usability tests.  We tested the site by asking users to complete two tasks: 1) Make a donation. 2) and Find a fair to attend. We examined the points that hindered their ability to accomplish these tasks and proposed changes to the website. We also looked at Google Analytics and visited a couple fairs to see the bigger picture.

Below are our findings and proposed solutions.

The Approach

Our approach was to evaluate the current website by conducting heuristic analysis and administer usability tests.  We tested the site by asking users to complete two tasks: 1) Make a donation. 2) and Find a fair to attend. We examined the points that hindered their ability to accomplish these tasks and proposed changes to the website. We also looked at Google Analytics and visited a couple fairs to see the bigger picture.

Below are our findings and proposed solutions.

Current Website
Current 9Health Website

Make a Donation Pathway

Tracing the Donation Pathway

One of the biggest issues with the website is that it is difficult to make a donation. According to Google Analytics, the donation form was one of the least visited pages on the site with only 941 page views over two years.

When users were prompted to make a donation, they often scrolled all the way down to the widget at the bottom of home homepage. The donation widget sits around 5,300 pixels below the header.

Generally, if users didn’t scroll to the bottom of the home page to make a donation, they went through the site’s navigation menu, often going through an unnecessarily convoluted route. This required the user to click 2-3 extra times to arrive at the donation form.

From the menu, it was not very clear which menu items would bring users directly to the donation form.

Radio buttons stayed active when users input their own donation amount, causing confusion over how much is being donated.

Also, the user’s total amount is not displayed anywhere else on the page.  Users were not sure how much they are donating if they accidentally activated the radio buttons.

To best resolve the issue surrounding the donation form, we looked at a handful of other non-profits and examined how they incorporated donation flows into their websites. A couple of UX articles were helpful in determining the criteria we used to compare our selected non-profits.

12 Donation Page Best Practices From Study of Top Orgs (With Examples)

Charity website: a UX case study

Redesigning the Make a Donation Pathway

Our proposal to improve the donation user flow is to provide users with multiple opportunities to donate from the homepage.

  1. We included a donation button in the header so that the user has the ability to donate no matter where they are on the site.
  2. We also prioritized donations in the navigation, directly linking users to the donation form.

Revising the Donation Form

Using some of the best practices and other UI patters that we looked at, we also redesigned the donation form to make a more streamlined experience. We really wanted to make it as painless as possible for donations to be made to 9Health.

  1. We eliminated all elements that did not lead the user to making a donation; no headers, sidebars, or navigation. Just the logo to take the user back home.
  2. Included a blurb about where donations go and how they help 9Health.
  3. We added the ability to make recurring donations.
  4. Fixed the radio button errors.
  5. Added additional payment options.
  6. And incorporated total in check out button.
Donate Desktop-TOP-2
Donate Desktop-bottom-3

The results

In order to test our designs, we measured how long it took users to locate and make a donation on the current website and compared that to the amount of time it took users to complete the same task with our prototype.

When we had users complete the task of making a donation on the current site, it took them an average of 11.8 seconds. We were able to reduce that time to 2.8 seconds with our design.

Find A Fair Search Page

01.

Navigating to the Find a Fair Search Page

When prompted to “find a fair to attend,” users were more likely to scan through the navigation menu. Often, they clicked on “Attend a 9 Health Fair” menu item, instead of the “Find A Fair” item.

02.

Taking the Scenic Route

Clicking on “Attend a 9Health Fair” brings users to a page about the 9Health Fair. Some issues we identified with this page include:

  • “Screenings & Results” header is not reflected in navigation menu.
  • “Find a [9Health] Fair” button is below the fold.
  • A video about how to register for a fair was either ignored by users or drastically increased the amount of time it took them to complete their task. 

03.

Diagnosing the Find A Fair Search Page

In regards to the Find a Fair search function, our research indicated that users were having trouble effectively finding a fair to sign up for. One user described the process as “not intuitive.” We hypothesized that this might be because the page didn’t immediately populate with a list of the upcoming fairs. Finding a fair was further complicated by search results appearing below the fold.

04.

Searching For a Fair

Clicking on “See Fairs” would bring users further down the page, but upcoming fairs mostly remained below the fold. 

5 Mile Radius preset was generally not wide enough to generate results. Especially in rural areas.

When users searched by Screenings, they had to sift through 51 different types of screenings offered by 9Health Fair.

9Health Provides 51 Different Screenings

When a user wanted to search a fair by available screenings, they were inundated with 51 different screenings to choose from. Me and my partner, Jake, went through and tried to categorize the different screenings so as to make them more digestible. We separated them into 6 categories:

  • General Wellness
  • Screenings for Children
  • Physical Screenings
  • Heart & Blood Screenings
  • Mental/Physical Screenings
  • Misc. 

Revising the
Find a Fair Search Page

In an effort to make a better experience with finding a 9Health Fair to attend, we redesigned the Find A Fair search page.

  1. We eliminated the “See Fairs” button and prepopulated the page with a list of upcoming fairs.
  2. We attached the “Search for a Fair” search filter and the “Search for a Fair” results/”Upcoming Fairs” to the top of the page. We think it’d be best if the “Search for a Fair” sidebar remained anchored to the side, so it could always be accessible.
  3. We redesigned the search result cards to better prioritize information that we thought would affect the user’s decisions such as the Date, followed by the City, and fair type (Health Fair vs. Research Fair).
  4. We proposed a wider range for the zip code radius.
  5. We categorized the screenings to make them more digestible and replaced the dropdown with a series of check boxes.

The results

When we asked users to complete the task of finding a fair on the current 9health website, it took an average of 4 minutes and 21 seconds. Users completing the same task with our proposed solution, reduced the amount to an average of 45.7 seconds!

the
home page

While the 9Health homepage was not necessarily one of our primary concerns, it became increasingly clear that many of the issues surrounding our initial problems could be traced back to the navigation and the architecture of the site. We deemed it an important component of our project because it was going to be jumping off point from which our users would accomplish their goals: find a fair and make a donation.

To remedy this problem we decided to tackle the layout of the page as well as the site’s information architecture. One of the biggest changes we want to propose is the four large shortcut buttons that would allow users to accomplish their tasks immediately; whether they want to make donation, find a health fair to attend, sign up to volunteer, or review their health screenings.

Header: Screen Cap of Proposed Home Page