Website Usability Audit Image

Usability Testing Report (Academic)

An academic team project to assess usability of the school’s local (Indiana) non-profit organization and provide design suggestions for the report

Background

Indiana Disability Resource FINDER

It is an organization for disabled persons and caregivers in Indiana to be able to find local resources for services, programs and articles. 

And we were tasked to review the goals and contents of the organization’s website and provide usability testing. 

Type of Project

This was an academic group project done in a usability report format. 

Team Members

  • Ellisa (myself)
  • Mai B.
  • Magan A.
  • Maryum S.
 

My Role

My role in the team was to make UI design suggestions based on other team members’ findings on usability needs

Tools

  • Figma
  • Zoom
  • Google Doc

01 - Discovery of Needs

Usability Testing was done with users with the following demographic: 

  • # of tested users4
  • age: 20-50
  • background: all of them had caregiver backgrounds
  • location: only 1 was in Indiana, and 3 others were from other states

Through the usability testing, the team identified a System Usability Score (SUS) of 52.5, which falls in the “Need Improvement” category

02 - Usability Issue Finds

There were specific tasks that users had trouble navigating or taking action on

1. Unexpected Feedback for "No Search Results"

No Search Result
  1.  When user searched for two keywords of “golf” AND “fishing” in the search bar, 0 result has shown.
  2. This also led to user clicking on “Expand My Search Results” button at the bottom to do a broader search of the keywords.

Design Suggestions

When No Search is Found
Figure 2.1 Search Filters are added at the Top

Rearranged the components so that it has proper content hierarchy where the “No exact matches found” phrase is the biggest and then the other attempts that the user could take are smaller to show the next importance.

Two Keywords Search
Figure 1.2 - Search result that contains either of the keywords

When user clicks on “Expand My Search Results”, this view will be shown where it shows search result for either of the keywords, which means either search result that contains keyword “golf” or “fishing” is shown

2. Misplaced Location of Month on Event Calendar

Menu Location

User was not aware of the ‘Month’ selection on the right hand side, so the user scrolled through the page without being able to successfully select a mont

Design Suggestion

New Menu Location
2.1 Search Filters are added at the Top

Placed the not only the ‘Month’ selection to the top of the page, but placed all of the other filters to the top of the page to allow users to easily filter down the events without the user needing to scroll down into the page

3. Toast Message disappears too quickly

Toast Message

User had trouble recognizing the toasts after they took an action, because the toast messages confirming their action disappeared too quickly. 

Design Suggestion

New Toast Message
3.1 Toast component with counter feature added

Design suggestion was made where the website properly uses a ‘Toast’ component with counter feature. The counter feature will help the user to visualize how much time is left before the Toast disappears from their view

4. Bookmark Action Button Not Standing Out

Original Bookmark

User did not recognize that ‘Bookmark’ was a button as it blends in with other information in the card.

Design Suggestion

Updated Button Action

 In the updated design, the ‘Bookmark’ stands out as a button compared to other informational texts in the card. And when the user clicks ‘Bookmark’, the button style changes into clicked state to easily show that the button was already clicked

03 - Final Thoughts

The design suggestions have been made without knowing the internal structure of the website and how it is set up. However, a closer look at creating design system so that the correct components (e.g. buttons, toasts, dropdown) would be one of the main goals to achieve

Scroll to Top