City of Ann Arbor Website Refresh
Improving citizen engagement on a municipal website.
CLIENT
City of Ann Arbor
TEAM
Three UX Researchers
One Information Architect
ROLE
UX Researcher
DURATION
Twelve Weeks (Remote)
TOOLS
Google Analytics, Qualtrics, Figma
CHALLENGE
How might we help website visitors locate the information they are looking for?
The City of Ann Arbor maintains a municipal government website that stores a broad collection of information, such as, public records, services, amenities, and an array of other functions- which hadn't been updated since the early 2010s. The following questions were used to guide our research:
-
What are the key goals or motivations of website users?
-
Are users successful in achieving those goals? How do users go about finding information?
-
What do users like or dislike about the website? Do users prefer other information channels?
SOLUTION
Working with the client we identified the following project goals:
-
Provide recommendations to improve the website's information architecture and usability.
-
Identify methods for making the website's information more engaging and relatable to its users.
-
Write a transparent report that allows the city to independently reevaluate website usability in the future
Methods
COMPARATIVE ANALYSIS
A comparative analysis was conducted to identify strength and weaknesses of similar websites. Eight websites were examined; most were similar websites within the state of Michigan. Five main themes among the features we examined including: navigation, appearance, content, accessibility, and transparency. Our biggest takeaway was that other websites possessed higher quality navigation and visual design.
USER FEEDBACK
The website includes a "was this page helpful?" feature on the bottom of each page. To get a general understanding of feedback submitted, we examined comments submitted using this feature by users in order to identify any patterns. From our examination, we noticed the largest percent of comments mentioned the lack of information or not being able to locate what they were looking for. However, our team acknowledged that dissatisfied users were more likely to leave comments.
GOOGLE ANALYTICS
We also received access to the website's Google Analytics, where we were able to investigate user behavior, particularly entry points to the website, user flows within the website, and bounce rates. One takeaway was that the usage of the sites current search function was extremely low among visitors (2.63%).
HEURISTIC EVALUATION
Using Nielsen's usability heuristics, we carried out a thorough heuristic evaluation of the website, listing questions to address issues pertaining to each heuristic. This exercise indicated that the website suffered from a poor content hierarchy, consistency, and accessibility.
35
RESPONSES
CITZENS
OF ANN ARBOR
feel that the city's website has poor navigation and isn't easy or intuitive
to use
CITZENS
OF ANN ARBOR
don't find the city's website visual
appealing
INFORMATION
is the number one reason that citizens visit the City of Ann Arbor website. Followed by property information and recreational information.
VOTING
SURVEY
We issued a public survey to the citizens of Ann Arbor, distributed through the City's communication channels as well as through UMSI mailing lists. We received 35 responses. From the survey, we again found that navigation and visual design were major complaints. Users tended to bookmark specific pages or search externally instead of navigating within the website.
USABILITY TESTING
We conducted usability testing with 5 participants. These were conducted remotely due to COVID-19 precautions. Each participant was asked to complete 5 tasks, then interviewed regarding their experience. Next, they were given a System Usability Scale (SUS) survey to complete, and the resulting data was used to obtain a quantitative SUS Score. The website received an SUS score of 53.5, indicating a D grade in usability.
Outcomes
FINDINGS
Users have difficulty finding or navigating information.
Confusion regarding navigation and information architecture had been frequently mention in the website's feedback tool, in the user survey, and in usability testing.
Users find the website visually out-of-date.
The user survey, comparative analysis, and heuristic evaluation all found opportunities to modernize the visual look and feel of the website. In addition, users expressed the desire to see more personalization of the website to better reflect the Ann Arbor community identity.
Website language is inaccessible to users.
Users as well as the heuristic evaluation found that website content frequently utilized jargon and language that were too "bureaucratic" and failed to be resident-oriented (instead of City employee-oriented).
Content is inconsistent among departments.
It had been noted that content hierarchy, quality, and length varied considerably among separate department pages.
RECOMMENDATIONS
Improve information architecture and navigation.
This should be done by reorganizing pages to be resident-oriented, clearer in language, highlighting the search function, and reducing navigation options (for example, focusing solely on a single navbar for site-wide navigation and a single sidebar for department navigation).
Increase visibility of key information.
We recommended that soft limits be set on the length of words or content per page, a clear content hierarchy, and the implementation of lists and accordions where possible.
Reflect resident needs in content and language.
The City should consider using simpler, more colloquial language to direct users and inserting local photography as much as possible.
Improve use of space, color, and imagery.
To improve the website user experience, we recommended that content be distributed across wider spaces (particularly on larger viewports) while redundant content columns be removed and consolidated. Visually, a more constrained color palette would better highlight important information.
Standardize content presentation and guidelines.
To address process gaps and inconsistency among departments, the IT deparment should more frequently and strongly audit department pages and enforce content guidelines. They could also identify or build high quality example pages to be followed.
PROTOTYPE
In addition to our final report, we included wireframes and a prototype based on our findings. We also, supplemented our prototype with a documentation explaining the rational of our design choices.
1
Placing the emergency alert at the top of the page demonstrates its importance and increases Its visibility
2
Placing options for language translation and text size at the top of the page improves accessibility
3
Using clear, neutral language in the navbar increases recognition for users
4
Keeping the navbar 'sticky' to the top of the screen improves navigation and reduces scroll
5
Increasing the size of the search bar and placing in a prominent location on the home page increases its visibility to users
6
Implementing a prominent image banner increases opportunities to showcase city photography and increase visual appeal
7
Placing social media links in a single, noticeable location reduces clutter and could improve user interaction
8
Icons can be used to visually highlight key sources of information for users
9
Increase page content width to display more content without cluttering the layout
10
Layer continuously updated content to display more information while also maximizing page space
POSTER PRESENTATION
At the end of the project we participated in a poster fair to showcase our work to the client and other individuals interested in our work. Below is the poster used to demonstrate our project.
