In the Spring of 2022, the 40th Ward of Chicago announced a $100,000 Arts and Access Grant as part of Chicago’s micro-grant program aimed at enhancing local communities. 80% of funding would go towards Open Government grants, increasing access to government services, and 20% toward Cultural Programming to highlight the Ward’s burgeoning arts community that Alder Vasquez envisions as a Lincoln Ave North Arts District.
We were awarded a grant to redesign the existing website which was suffering from some technical debt (page builder, anyone?), a lack of structure and out of date content. Oh, and lots of accessibility errors.
Focus on Accessibility and Usability
Our goals for the 40th Ward website were to prioritize accessibility and work to make content findable, useful, and actionable.
Hold your assumptions, let’s do some user testing!
I had some Opinions(TM) about issues and challenges based on my own experience trying to find information (and inspecting the code) on the existing 40th Ward website. But, I wanted to hear from people who might be using this site as a primary source of information in real life. The 40th Ward Office put out a call for testers (and I re-read Steve Krug’s book “Rocket Surgery Made Easy” and several other seminal tomes). User testing was really fun and I’d like to do more and get better at this. Some quotes from actual people:
I wouldn’t expect that to be here.”
I might go back and skim this (content) again just to make sure I haven’t missed something but I would find this to be a dead end. I might be inclined to give up on the 40th Ward website and try another city site.”
I don’t see the information I need. I would probably just email or call the office.
I also attempted a Top Tasks survey but I’m afraid I didn’t have enough data or the skills to do this properly – pretty sure I know just enough to do it horribly wrong. I used HotJar to set up a very simple feedback form on the existing site asking only, “What is the most important issue or concern to you in the 40th Ward?”. Reported priorities were more or less aligned with interactions the Ward office experienced with residents and businesses: safety, parking, zoning and construction, affordable housing.
We also encountered lots of accessibility issues. Most frequent were color contrast failures and an overall lack of page structure. But there were a few other fun issues like zoom being disabled (theme-related) and underlined text that was not a link.
Disclaimer: I am not an accessibility expert. I try to learn from people in the field (books, webinars, MeetUps, courses) and follow best practices (WCAG Guidelines).
In addition to testing with WebAIM and AXE browser extensions, we also purchased the Accessibility Checker by Equalize Digital. I’m hoping that this plugin will also assist the client in learning about accessibility and helping them to maintain good habits.
We contracted WeCo Accessibility to do manual testing of both the original and the new website. Overall, the majority of accessibility issues faced in the original site had to do with color contrast, missing alt text on images, and missing or out of order headings. This seems to be true for many client sites and can be easily addressed with a little attention and time. There are some aspects of third-party tools that were beyond our control.
Design Research
We explored other websites for ward offices in the City of Chicago as well as the City of Chicago site for structural inspiration and naming ideas. Gov.uk and WhiteHouse.gov, as well as The United Stated Web Design System (USWDS), provided more inspiration.
We chose Public Sans, designed by USWDS, as our typeface for it’s readability. A shorter line-length and larger font-size is also implemented on the redesigned site.
Minor Challenge: Teal
The major brand color established for the 40th Ward was “Troublesome Teal”. You know, that mid-hue blue-ish green that defies a strong contrast ratio? Teal can also become a bit lethargic without other secondary colors to perk it up. Active on Canva creating graphics for newsletters and social media, the 40th Ward team had an expanded palette which we fine-tuned and restricted for their digital presence.
This shifted a bit in the browser as design progressed.
I looked into optimal contrast for readability. Rather than black text on a white background, I chose a muted color for both. It’s subtle but reduces the glari-ness felt by reading high-contrast text. As a mature reader, this is totally something that benefits me.
Content Development
Intuitive Navigation, Connected Content
In thinking about the site structure and navigation, we wanted to establish a clear, findable path to city services. The existing separation by audience type, “Individual Resources” and “Business Resources”, felt like an ad-hoc distinction to try to make content fit somewhere. When new content was needed, a new page was created and added to the menu. Over time, this generated a navigation jumble which made things harder to find.
Following the lead of the government websites mentioned above, and sage advice not to organize content by audience, we opted for a streamlined navigation item labelled, “Topics and Services”. This contains child pages that correspond to all (or most) of the city departments that the 40th Ward Office helps neighbors to navigate and access. Some liberties were taken with page labels to try to avoid organization-centric names in favor of what our audience might call things or look for.
I also wanted to go old-school with link colors and show that a link has been visited. Good ‘ol browser defaults!
In developing content we worked to follow plain language guidelines to avoid jargon, use shorter sentences, and generally keep information organized.
After a content inventory, multiple staff interviews, and extensive Googling, existing page content was updated and new content was created to reflect the scope of services provided by the ward office. The blog was also overhauled. Categories were updated to align with “Topics and Services” and the Search & Filter plugin was added to help people find content.
Significantly, we made sure the search function worked and improved our search results pages.
Before:
After:
A few new content features included:
- Custom post type for Streetscape Projects
- Custom post type for Staff
WordPress and the Site Editor
A WordPress-powered website, I needed to decide whether to go classic or site editor in this redesign – and landed on hybrid. I’m comfortable with my existing tools and like the flexibility of _S as a base. Using theme.json still has a big, positive impact though. I see a reduction of CSS used in my stylesheets and it’s very nice to be able to have the editor experience match the front-end experience for clients. I think some projects are perfect for the new site editor – in this case, hybrid was a better fit (for me).
Check out the new site: https://40thward.org
For a look at where we started from, visit this Way-back Machine link!