A UX Case Study: Improving Usability through the Application of Nielsen’s Usability Heuristics

Even nonprofits need user friendly websites

Context

Upper Missouri Waterkeeper is an environmental nonprofit that uses a combination of strong science, community action, and legal expertise to defend the Upper Missouri River, its tributaries, and communities against threats to clean water and healthy rivers. They are in need of a website usability audit.

Scope: This project is about understanding the value of and practicing testing, as well as communicating recommendations from findings.

Objectives: Provide an assessment and recommendations as a result of a series of evaluations, to include the following:

• General usability and usefulness of the product features, overview of issues or failures in respect to its purpose
• Accessibility and compliance of the product and content
• Value, innovation and ability to reach the product goals

Constraints and Limitations:

1. A minimum of five moderated tests must be conducted
2. A Heuristics evaluation of the product is required
3. An accessibility review of the product must be conducted

Process

Process: Usability Testing, Heuristics Evaluation, Accessibility Review, Recommendations

Testing

Five moderated usability tests using Zoom were conducted. Here are the scenarios and task instructions I provided:

1. You have been wanting to find an environmental non-profit to support, but want to research multiple before sending in a donation.

Task: Find the main mission of Upper Missouri Waterkeeper.

2. After researching Upper Missouri Waterkeeper, you decided that you really connect with their mission and that you want to make a donation.

Task: Show me how you would make a donation.

3. After researching Upper Missouri Waterkeeper and learning more about the actions they can take, you realize that you have observed pollution and want to report it.

Task: Show me how you would report pollution.

4. Now you want to make sure that you never miss any news about the nonprofit.

Task: Show me how to sign up for the mailing list.

5. You also know that you check social media more often than your email, so you want to find out how to follow them.

Task: Show me how you would find them on social media from their website.

Findings, Insights, and Recommendations

Accessibility audit: The accessibility audit showed that overall the website provides most of what is needed for it to be accessible to all users, but when it comes to visual media they have areas where they can improve.

Heuristics Evaluation: The heuristics evaluation was conducted based on Nielsen’s usability heuristics outlined below.

The website is graded on a scale of 0–3; 0 being the worst and 3 being the best.

• Visibility of System Status: 3
• User Control and Freedom: 1
• Consistency and Standards: 2
• Error Prevention: 2
• Flexibility and Efficiency of Use: 1
• Help and Documentation: 2
• Recognize, Diagnose, and Recover from Errors: 2
• Aesthetic and Minimalist Design: 2
• Match between System and the Real World: 3
• Recognition rather than Recall: 3

Positive Findings:

1. Visibility of System Status: The main navigation is clearly labeled and easy to navigate. The various forms also have clear indicators to show how close the user is to completing the form.
2. Match between System and the Real World: The forms on the site followed paper forms that would have been used in person.
3. Aesthetic and Minimalist Design: The color scheme of the website made it easy for users to distinguish between sections.

Negative Findings:

1. Aesthetic and Minimalist Design:

Task: Find the main mission of Upper Missouri Waterkeeper.

Issue: The font is too close to the background color, which makes it difficult to read.

Recommendation: Change the font to a darker color to increase the contrast.

2. Consistency and Standards:

Task: Show me how you would make a donation. Show me how you would report pollution.

Issue: Each of the forms have different formats. The volunteer page had an email to contact, rather than a form to fill out.

Recommendation: Add a form to the volunteer page. Make all of the forms cohesive.

3. Flexibility and Efficiency of Use:

Task: Show me how to sign up for the mailing list

Issue: It took users too long to recognize that the mailing list was at the bottom of the webpage.

Recommendation: Place the mailing list signup at the top of the page.

4. Recognition Rather than Recall:

Task: Show me how you would make a donation. Show me how you would report pollution.

Issue: None of the users recognized the easy buttons at the top of the webpage that took users directly to the donation and pollution pages.

Recommendation: Make donation and pollution buttons bigger and bolder to make recognition easier.

5. Match Between System and Real World:

Task: Show me how you would find them on social media from their website.

Issue: The letter icon next to the other social media icons confused users. They thought it was the mailing list signup, but it actually opened up a window for you to write an email to the nonprofit. Users also weren’t sure if the icons would share the page or lead to their social media pages.

Recommendation: Change icon to include letter and pencil to show that it offers to compose an email. Add text next to icons that says “Follow Us!” to show users it will take them directly to the nonprofit social media pages.

6. User Control and Freedom:

Task: Show me how you would report pollution.

Issue: All of the form was text boxes, assuming the user would know exactly what to type.

Recommendation: Offer check boxes next to recommended answers to lower the barrier for reporting. Also, if the user is not knowledgeable about exactly what the pollution is, this would help them through the process.

Storyboard: Ideal User Experience

This storyboard outlines what would be the ideal experience for a user on the the Upper Missouri Waterkeeper website. The recommendations made will be made in order to recreate this type of successful user experience.

Ideal User Experience: The user sees pollution and reports it to Upper Missouri Waterkeeper. Then, they liked their experience so much using the website that they make a donation to the nonprofit.

Issue Prioritization:

1. Paragraph font
2. Form cohesion
3. Social Media Icons
4. Add volunteer form
5. Move mailing list signup
6. Header improvements
7. Improve report pollution form

Final Recommendations:

In order based on prioritization

1. Add a form to the volunteer page
2. Change the font to a darker color to increase the contrast
3. Offer check boxes next to recommended answers on the report pollution form
4. Make donation and pollution buttons bigger and bolder
5. Place the mailing list signup at the top of the page and add pop up
6. Make all of the forms cohesive
7. Change icon to include letter and pencil to show that it offers to compose an email. Add text next to icons that says “Follow Us!” to show users it will take them directly to the nonprofit social media pages.

Conclusion: Overall the site has a number of issues that once fixed could drastically improve the usability of the website. If my recommendations are followed, I believe that Upper Missouri Waterkeeper will see an increase in actions taken on their website.