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 users: 4
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"
When user searched for two keywords of “golf” AND “fishing” in the search bar, 0 result has shown.
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
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.
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
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
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
User had trouble recognizing the toasts after they took an action, because the toast messages confirming their action disappeared too quickly.
Design Suggestion
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
User did not recognize that ‘Bookmark’ was a button as it blends in with other information in the card.
Design Suggestion
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