City of Dearborn Website Readability and Accessibility
At-a-Glance
I worked with the City of Dearborn through the Citizen Interaction Design course at the University of Michigan with four other graduate students. We designed an interactive style guide and internal readability tool to improve the overall city website’s readability and accessibility.
Timeline
4 Months
My Role
Researcher & designer
Collaboration
4 Graduate Students
Platform
Figma
The Problem
This project aims to enhance the readability and accessibility of the city’s website, ensuring they can easily access the resources and services they need to thrive in their community. Many residents struggle to quickly locate critical information, like the housing application process, due to a lack of user-friendly design and intuitive navigation on the website, hindering their access to essential city services.
The City of Dearborn is not only redesigning the entire website from scratch but also placing significant emphasis on improving its content. Their most significant challenge centers around ensuring the content's readability, aiming to align with accessibility guidelines and achieve a readability score equivalent to an 8th-grade level. The project's objectives include the development of design readability guidelines, the establishment of standards for the website's online user experience, and an enhanced focus on accessibility.
Solution Overview
We produced two solutions for our client: tailored Accessibility and Readability Guidelines and an internal readability tool. The interactive guidelines offer Dearborn's internal staff a comprehensive resource for optimizing digital content. Rooted in industry standards, these guidelines cover text, images, visual hierarchy, hyperlinks, and readability. Featuring Dearborn-specific examples, they provide practical advice and are available in PDF and interactive formats. Easy to use and regularly updated, the guidelines empower staff to enhance the city's online presence.
Our readability tool chrome extension, presented as a Figma prototype, streamlines content simplification and translation. With a three-step process, it generates an 8th-grade reading level version of text, supports audio for low vision users, and offers language translation. Integrated with the Accessibility and Readability Guidelines, it provides a practical way to implement suggestions in real-time.
Stakeholder & User Interviews
Firstly, we met with our City of Dearborn stakeholders to discuss the problem in depth. This meeting led us to consider our users and who our problem impacts the most, which would be Dearborn residents and city employees.
From meetings with our client and interviews with city government staff and senior residents, we found several unmet needs of the current Dearborn website that motivated us to come up with the design solutions.
29.85% of citizens are Arab Americans, whose first language is not English.
7.5% of citizens have disabilities, which may include low vision.
Over 50% of senior users expressed the font size on the website is too small.
The recommended 8th-Grade reading level is not achieved by the current website.
Sketches
The stakeholders expressed the need for a style guide. With this in mind, we proposed two ideas of potential design solutions to the stakeholders: a readability tool along with an interactive style guide. To portray the readability tool, we created a storyboard and sketches.
After we presented these assets, stakeholders wanted to pivot our readability solution to an internal tool instead to pair along with the accessibility style guide. By creating for the internal team, employees can make sure the content they are creating or updating is within readability and accessibility guidelines before it is seen by residents.
Wireframes
User right-clicks on their highlighted text
Drop down appears with ‘Simplify Text’ option
Pop-up window appears with the simplified text (8th grade reading level)
User clicks ‘ARB’ to translate simplified text to Arabic. Text can also be translated to Spanish
Prototype
User Testing
We visited the Dearborn senior event center to conduct the prototype testing with senior citizens and members of the city faculty. While our style guide and tool is designed for internal use by city employees, we also sought additional insights from seniors to better comprehend their utilization of the website and their interactions with city resources.
Analysis
Understanding simplified text and seamless tool navigation:
Participants comprehended simplified text effectively.
Participants found tool navigation easy; highlighted text and right-click functions were straightforward.
Simplifying heavy jargon language:
Acknowledged the challenge of residents understanding legal terms and processes; recognized the tool's potential to alleviate this difficulty.
Employee benefits:
Identified the tool as helpful for employees handling contracts, housing and other common resident processes.
Streamlining communication:
Highlighted the need to streamline communication between departments; noted instances of having to explain concepts over the phone due to resident confusion.
Design Changes
Voice option for reading aloud:
Recommended adding a voice option for reading text aloud.
Text enlargement option:
Suggested incorporating an option to enlarge text for improved readability.
Editing capability within window:
Proposed allowing edits directly within the tool's window for enhanced user convenience.
Final Protoypes
Readability Tool
Accessibility Style Guide
City of Dearborn Expo
At the end of the semester, the team got to attend the City of Dearborn Exposition to present our final project. The event included a formal presentation to the community partners, stakeholders, and a panel of experts. There was also a poster session in which we got to talk with the public about our project and display a poster on our final product.
Impact
The solutions we offered are for internal use but create a positive ripple effect, bringing significant changes for the clerks, city, and residents.
Municipal clerks, armed with innovative accessibility and readability guidelines, possess a valuable tool. This ensures that the website and content are understandable for all Dearborn residents, reducing complexities and allowing staff to focus on critical matters, enhancing communication and trust.
For the city, implementing clear accessibility and style guidelines streamlines operations and promotes seamless information sharing, fostering trust and positivity among residents.
Residents, encompassing the elderly, individuals with disabilities, and those with English as a second language, will experience the advantages of a website that is both user-friendly and inclusive. Recognition and inclusion by the City of Dearborn play a pivotal role in fostering trust in government and enhancing service effectiveness.
Next steps
Based on input from industry professionals, achieving the tool's basic functionality could take one week with a full-time entry-level developer. Time and personnel requirements depend on performance needs and scalability. Budget considerations require discussion with the city's IT department.
For successful implementation, the city needs a software developer and a product manager/designer familiar with users, both stakeholders in our partnership.
Success metrics involve tracking tool usage, monitoring frequency, and collecting feedback at 2, 4, and 8 weeks post-launch to gauge adoption, usage patterns, and overall impact.
Currently, we are continuing to advise the City of Dearborn team and developers and work with them to implement the tools.