City of Ann Arbor

Improving citizen engagement on a municipal website

My student team engaged with our client, the City of Ann Arbor, and local citizens in a website usability evaluation and redesign project as a part of the UMSI Citizen Interaction Design program. We delivered robust recommendations that eventually informed the website’s relaunch in August 2023.

Client

City of Ann Arbor

Roles

UX Designer

Timeline

June - August 2020

Above: Final prototype, home page.

Above: Final prototype, navigation menu.

Above: Final prototype, department page.

Context

Engaging with a city

The City of Ann Arbor's IT department engaged the University of Michigan School of Information (UMSI)’s Citizen Interaction Design program to conduct usability studies of the City of Ann Arbor's website, which had not seen major updates since 2013.  My team of 4 UMSI students worked with the client and 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 again in the future.

• 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 again in the future.

Process

Digging into a city’s usability issues

Below is a list of various UX research methods we conducted to uncover issues and opportunities with the website. I was most involved in running the user survey, heuristic evaluation and, usability testing. I also supported my teammates with the other methods.

Above: Comparative analysis with other municipal websites.

Above: Google Analytics findings.

Above: Excerpt of survey results.

All in all, we were able to summarize our research findings into the following:

• Users had difficulty finding or navigating information. Confusion regarding navigation and information architecture was frequently mentioned in the website's feedback tool, in the user survey, and in usability testing.

• Users found the website visually out-of-date. The user survey, comparative analysis, and heuristic evaluation all mentioned the desire for a modernized look and feel. In addition, users wanted the website to better reflect Ann Arbor’s community/identity.

• Website language was inaccessible to users. In the user survey and heuristic evaluation, it was found that website content frequently utilized jargon and language that were too complex, "bureaucratic", and failed to be resident-oriented (instead of employee-oriented).

• Content was inconsistent among departments. It had been noted that content hierarchy, quality, and length varied considerably among separate department pages.

• Users had difficulty finding or navigating information. Confusion regarding navigation and information architecture was frequently mentioned in the website's feedback tool, in the user survey, and in usability testing.

• Users found the website visually out-of-date. The user survey, comparative analysis, and heuristic evaluation all mentioned the desire for a modernized look and feel. In addition, users wanted the website to better reflect Ann Arbor’s community/identity.

• Website language was inaccessible to users. In the user survey and heuristic evaluation, it was found that website content frequently utilized jargon and language that were too complex, "bureaucratic", and failed to be resident-oriented (instead of employee-oriented).

• Content was inconsistent among departments. It had been noted that content hierarchy, quality, and length varied considerably among separate department pages.

Outlining a recipe for improvement

Based on our major research findings, we delivered the following recommendations:

• Improve information architecture and navigation. Organize pages to be resident-oriented, be clearer in language, highlight the search function, and reduce navigation options (for example, focus on a single top navbar for sitewide navigation and a single sidebar for department navigation).

• Increase visibility of key information. Soft limits should be set on the length of words or content per page, establish a clear content hierarchy, and implement lists and accordions where possible.

• Reflect resident needs in content and language. Use simpler, more colloquial language to direct users and insert local photography as much as possible.

• Improve use of space, color, and imagery. Content should 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 department 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.

• Improve information architecture and navigation. Organize pages to be resident-oriented, be clearer in language, highlight the search function, and reduce navigation options (for example, focus on a single top navbar for sitewide navigation and a single sidebar for department navigation).

• Increase visibility of key information. Soft limits should be set on the length of words or content per page, establish a clear content hierarchy, and implement lists and accordions where possible.

• Reflect resident needs in content and language. Use simpler, more colloquial language to direct users and insert local photography as much as possible.

• Improve use of space, color, and imagery. Content should 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 department 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.

To supplement our final report, we also wireframed the website in Figma, incorporating the recommendations we outlined. Due to the sheer quantity of pages on the website, we limited our wireframing to the home page and a representative department page (in this case, Parks and Recreation).

To fulfill our project goals, it was important that we communicated the evidence behind each design choice. This was represented by numbered keys in the deliverable. Excerpts are shown below.

Finally, we presented the results of our project to stakeholders as well as at the UMSI Poster Fair. I took the lead on elevating the wireframes in Figma to a high fidelity prototype, inserting icons and images, implementing a potential color palette (based off the green on the City's logo), and polishing padding and layout.

Outcomes

Reflecting on working with citizenry

The COVID-19 situation introduced several complications to our project; engagement with citizens and stakeholders were limited to remote interactions, and research recruitment was done digitally. Usability testing was conducted through video conferencing and screen-sharing, impeding observations of facial cues and body language. These barriers also meant that we may have excluded citizens with limited technological access or savvy.

Personally, I was most highly involved in the user survey, heuristic evaluation, usability testing, and wireframing. The biggest lesson I took home was the importance of tying specific design choices to research evidence. This was an emphasized request from our client, and I believe that proactively noting this in our deliverables only strengthened the quality of our final design and recommendations.

Given more time with this project, I believe we would have benefited from extended user testing with our wireframes and prototype. The feedback from the additional testing and subsequent iterations could've served to further validate and improve our recommendations.

2023 update: Website relaunch

On August 1st 2023, the City of Ann Arbor announced and rolled out an overhaul to its public website. The website was redesigned by a consulting firm called Interpersonal Frequency.

I heard through the grapevine that our materials were supplied to the firm to supplement their own UX research and design process, though it remains unclear just how much a student project could have influenced their work. Regardless, it was affirming to see that the final, updated website shared several design cues that we ourselves had suggested, such as:

• Implementing a responsive design that better handled a wider range of viewports.

• Simplifying the types and range of navigation options in ways that better anticipated citizen needs.

• Building in more spaces and elements that showcase photography of the City.

• Utilizing a color palette that better highlighted important information and aligned with the City’s branding.

• Implementing a responsive design that better handled a wider range of viewports.

• Simplifying the types and range of navigation options in ways that better anticipated citizen needs.

• Building in more spaces and elements that showcase photography of the City.

• Utilizing a color palette that better highlighted important information and aligned with the City’s branding.