WEBSITE UX/UI DESIGN
City of Everett
Creating a virtual City Hall for the residents of Everett, MA
Residents of Everett, Massachusetts visit City Hall to apply for permits, inquire about local programming, pay parking tickets, access public records, and more. While many of these tasks can be completed online, residents routinely choose to visit City Hall because the existing website is difficult to use and navigate.
Project overview
Neuron worked with the City to improve the usability of their online presence, increase discoverability of available services, and bring the site’s design in line with contemporary principles.
We produced an improved information architecture (IA), simplified navigation, a detailed design system, and a new content strategy, allowing citizens to complete tasks with ease and reduce burdensome visits to City Hall.
Improved information architecture
Task completion is made easy by limiting the number of layers in the site’s architecture and putting key tasks directly on the surface.
In the end unique pages on the site were reduced from 396 to 63. To do this we drastically shallowed the experience and created three primary page types:
Inside Homepages
>
These pages are treated like brochures or guides, and are created for all secondary navigation items. Currently, 71 percent of visitors enter the Everett website via interior pages.
Transaction Pages
>
These pages are used to focus the user on the task at hand. Borrowing from practices more commonly found in e-commerce design, the site’s new transactional flows eliminate distractions and break the process up into smaller steps.
As task completion is the primary goal of the site, the user must either fulfill the steps required to complete the task and exit the modality or abandon the task altogether.
<
Endpoint Pages
Endpoint pages are the deepest level of the site where detailed content and actionable affordances are provided. These pages also present associated information based on context and user intent.
Quick access to key tasks
By incorporating a new ‘wizard’ tool, we provided quick access to key tasks, creating an interaction that feels fast and intuitive.
Data-driven, iterative design
Prototypes were tested at the comparative, exploratory, assessment, and validation stages. Our goal was to minimize the time required to access the most common tasks. With each round of user testing, task completion rates improved, ultimately achieving 99%+ success.
WCAG Accessible, by default
The new WCAG AA compliant design system brings the City’s website in line with contemporary standards.
Rather than wait to validate accessibility during development, we leveraged a number of tools and simulators in the visual design phase. Early testing things like color contrast, graphics, and text size helped us identify any areas for improvement well before a single line of code was written.
Easy transactional flows
Borrowing from practices more commonly found in e-commerce design, the site’s new transactional flows eliminate distractions and break the process up into smaller steps.
A comprehensive design system
We produced a detailed design system to bring the City’s digital services in line with contemporary design standards. This included a comprehensive component and template library to support the site’s continued success.
Armed with our detailed documentation on when and how to use different design elements, pages styles, or content types, City staff will be empowered to maintain and build upon the new site without compromising accessibility, aesthetics, or user experience.
Ready to build
The new site is currently being developed by the City’s in-house team.
Coding this kit of parts with the standards designed for each element will make the creation and maintenance of pages easier for the City’s development and content production teams.
