Diagnosing UX Problems on 9Health's Website
9Health is a non-profit dedicated to advancing health awareness and providing Coloradans with the tools they need to take responsibility for their health. With over 40 years of service, 9Health wants to reevaluate the role their online presence plays in achieving their mission. They approached us to diagnose some of the UX problems with their current website so they could carry that research over to their forthcoming redesign.
In recent years, fair attendance has decreased, in turn resulting in a decrease in donations. Our objective was to see how the current website may have contributed to this loss and remedy it.
I worked with a team of aspiring UX/UI designers. Having the most experience in UX/UI, I assisted the project manager in making sure we were on task and that we were actually solving the problems we set out to solve.
Our approach was to evaluate the current website by conducting a 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 of fairs to see the bigger picture.
Below are our findings and proposed solutions.
Make a Donation Pathway
Investigating the Make a 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 users'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.Link to .pdf
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.
- We included a global donation button in the header so that the user has the ability to donate no matter where they are on the site.
- 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 patterns 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.
- 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.
- Included a blurb about where donations go and how they help 9Health.
- We added the ability to make recurring donations.
- Fixed the radio button errors.
- Added additional payment options.
- And incorporated total in check out button.
In order to validate our designs, we measured how long it took users to 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
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 it item.
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.
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.
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
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.
- We eliminated the "See Fairs" button and prepopulated the page with a list of upcoming fairs.
- 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.
- 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).
- We proposed a wider range for the zip code radius.
- We categorized the screenings to make them more digestible and replaced the dropdown with a series of check boxes.
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
Reorganizing 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.