Town of Carrboro Case Study
Link to full report:
Presentation slides:
The town of Carrboro website is a platform for locals to find resources and information regarding the town. This can range from trash pickup schedules to even music events and business resources.
Five students from MEJO 581 at UNC Chapel Hill designed and conducted Usability Tests supervised by Professor Laura Ruel. The mode we focused on was the mobile version of their website.
Purpose
The overall purpose of our usability tests is to gauge whether visitors and residents of Carrboro can easily navigate the homepage and respective links. Our end goal for this usability test is to gather relevant information to aid a redesign and better organize the structure for https://www.townofcarrboro.org/
Users and Audience
A pre-test questionnaire was conducted through Google Forms collecting demographic information about each participant. Seven people participated in this study with 3 Asian or Pacific Islander participants, 3 White participants, and 1 Black/African-American participant. All participants were in their 20s and had completed high school with the majority of participants having some college level education.
Based on an initial assumption of more time spent = better navigation, data about age and time spent were collected:
Since the town of Carrboro is centered around a smaller local community, one point we focused on was whether users have interest in community events. These are our findings:
Roles and Responsibility
With many of the work done throughout the project being interchangeable, I contributed to:
creating moderator scripts and forms, recruiting users, conducting usability tests, analyzing findings, synthesizing findings, writing the report and presenting the final slides.
Goals
This study had 2 primary goals in assessing the usability of The Town of Carrboro Website:
-
To determine the usability and efficiency of the website navigation starting from the home page.
-
To determine if computer formats were consistent and accessible in mobile format
Process
We conducted a study to test how 7 volunteer participants would interact with the Town of Carrboro website. Testing occurred during the week of September 13th, 2021.
Each individual test was administered on a mobile device using either Safari or Chrome as the browser. Testing lasted approximately 40 minutes and was screen recorded for analyzing and note checking. The format of the usability test were influenced by the research of Jakob Nielsen, Steve Krug, and Professor Laura Ruel.
The test consisted of:​
-
​consent form
-
pre-test questionnaire
-
3-minute free observation period
-
8-10 assigned tasks
-
post-test questionnaire
-
post-test interview
Sample of the assigned tasks:
​
-
As a new resident of Carrboro, you are confused about what days to put out your trash for collection. How would you find the trash schedule?
-
You and your friend just recently moved to the town of Carrboro and want to check out what events are happening this weekend. Using this website, find what events are happening and determine whether it contains the information to fulfill your inquiries.
Findings
Our findings show that the experience was not positive, with many of our issues revolving around the homepage. We reported 1 catastrophic problem, 2 major problems, and 3 minor problems.
Catastrophic Problem
Catastrophic Problem #1: Organization of Navigation system
• Menu Bar: Users spent a lot of time on the menu bar, but found quite some difficulty finding the information they needed through this navigation tool.
• “If [the tabs] were road signs, I wouldn’t get to my destination” -User.
Recommendations:
• Condense headers in the menu bar so related pages fit under one header to reduce clutter
• Add relevant new headers in the menu bar to reduce confusion for users when navigating to different pages. Use words or phrases that clearly direct the users to the respective information and resources they seek.
Original:
Redesign:
A user searches for the trash schedule on menu, but can’t seem to find a menu header that would have the schedule.
Adding “Transportation” clearly indicates that a bus schedule could be found here. Condensing related “Maps” topics reduces clutter
Major Problems
Major Problem #1: Lots of Information on homepage/ scrolling
• “The home page is oversaturated with material and is a little overwhelming. The overall layout requires you to scroll a lot. The purpose of a home page should be like a table of contents” -User.
• Scale of 1-5, five users rated both “layout of information” & “interface” on the homepage a 3 or lower.
​
• The categories of pages, ex: frequently asked questions could be found at:
1) bottom of the home page
2) quick links (also at the bottom of the home page)
3) “How Do I… ?” tab in menu
Recommendations:
• Rearrange vertical visual elements to horizontal
• Have only “Frequently Asked Questions” in one location (preferably at the bottom)
Original:
Redesign:
Major Problem #2: Mobile device responsiveness
• Homepage video cuts off on the screen; users need to scroll or click to view
• Upper Hamburger Menu Dropdown is too small; surrounding area led to refreshing the page or viewing the town updates
Recommendations:
• Resize video & other large visuals: adjust the dimensions to fit the standard mobile device (responsive web design)
• Change hamburger menu bar to button: button in the corner that expands when clicked on; consider "fix position when scrolling" to increased navigation accessibility.
Video formatted
for desktop layout:
Minor Problems
Minor Problem #1: Design and Aesthetics
• Town Updates banner doesn't match with the designs
• More important features typically go at the top (search bar, hamburger menu, homepage icon, etc)
Recommendations:
• Town Updates pop-up
• Additional Town Updates Button (for future reference)
Original:
Redesign:
Minor Problem #2: Unexpected External Links
• Some of our users experienced external links during our user testing which took users away from the main website unexpectedly, creating friction to the ease of use.
• Additionally, some users found slow loading links and missing pages while exploring the tabs.
Recommendations:
• Implement better coding frameworks to reduce load time for the computer
• Weekly or monthly checks on each embedded link
Missing Link:
Minor Problem #3: Overall Cognitive Overload
• Across the mobile site/screen, there is a lot of information that meets the eye. Prioritizing and organizing the information, especially on higher trafficked pages, would greatly improve the overall experience for any user.
Recommendations:
• Gather more data from further usability testing after implementing changes, to determine which pages should be prioritized
• Encourage users to not default to the "How Do I... ?" page with easier navigation for the information they are seeking.
Results
After presenting our slides to the town website manager in class, she acknowledged most of our feedback and although some things, such as the town updates banner, could not be changed due to third party dependency, the other recommendations will be highly considered when they revise the website!