City of Chicago Web Update & Design System
Activities & Roles:
UX research and synthesis
Information architecture analysis
Ideation and prototyping
Usability testing
Final homepage design
Programs Used:
Adobe Illustrator
Adobe XD
Figma
Team:
James Chesterfield
Overview
In partnership with the City of Chicago, our class of nine students was tasked with an open-ended design problem: How might we create a more resident-focused digital experience for the city website? Additionally, we were to supplement and complete the city’s design system.
Students were separated into three groups to tackle different problem. Each group would have to design user flows, webpage mocks, and design system components for one of the three major improvement areas:
Paying city fines
Getting a city job
Requesting or reporting something with the city
Our group was responsible for the Requesting/Reporting improvement area.
The Problem Space
By 2019, the City of Chicago’s website no longer represented the current administration’s values and had outgrown its current structure, creating a visitor experience that was confusing, frustrating, and time-consuming. The site featured nearly 500 navigation options, no content prioritization, confusing focus, and no user direction.
The city’s design director involved our groups to perform all the research, testing, and design work to create a unified and completed aesthetic, optimize the information architecture, and create a digital narrative that would expand to other city sites.
The City of Chicago homepage as in November 2019 with confusing focus, complex main nav, and lack of user direction.
Research
Our team focused on creating the general body of research to understand the site’s information architecture. This would help us also determine a more precise scope. Our work included reviewing the current administration’s goals, qualitative and quantitative data analysis, a design system component gap analysis, a WCAG accessibility review, and a navigation (information architecture) analysis.
Qualitative Research Methods
Secondary Research - Reviewed trends in civic tech to understand how digital services are used in governments and how they inform design choices.
Competitive Analysis - Compared and contrasted other city websites to help make informed decisions about potential end solutions.
Task Flows - Determined high-level steps/flows that users take to accomplish specific goals.
Navigation Analysis - Deconstructed the entire navigation to help categorize content, understand actions, and determine audience.
Quantitative Research Methods
Accessibility Review
Internal/External Search - Analyzed Google Analytics from internal site searches.
Landing Pages - Analyzed Google Analytics entry pages to help categorize and prioritize content.
Chi 311 Requests - Reviewed public data showing all Chi 311 requests to help further prioritize content.
WCAG Accessibility Check - Reviewed current design system to check for color/contrast failures and other potential issues.
Determining Homepage Information Architecture
A significant part of our work was determining what the home page would look like. To determine this, we had to use data to determine what and how much content should go on the homepage and what order that content should be in.
Our analysis of homepage content and its priority can be found here.
Research Findings
Our research provided us with a clear landscape of the issues affecting the site, what content should be prioritized, and how the information architecture should be changed. The findings can be summarized as follows:
Saturated in content, old and new
Visitors are overwhelmed with the amount of content the website holds, including outdated content.Multiple ways to accomplish the same thing
There is no single streamlined process to complete a task. Instead, visitors are prompted with multiple options, creating confusion.Unclear directions
The current website includes too much content on why things are a certain way, rather than actionable steps on what to do about something.Inconsistent visual design
There are dozens of city websites, and no unified design across them despite many cross-links, creating a confusing and overwhelming experience.
Solution
Our primary concern was effective information architecture. Our design solutions had to ensure the right user type got the right amount of information at the right time. To that end, we knew the homepage needed a massive overhaul to reduce content and better direct users. We also wanted to create user-specific pages to best direct the needs of very different user types. Our group’s solutions came down to two major deliverables:
Creation of User “Hubs” - An approach to information architecture whereby users are directed to specific site areas based on their user type, showing only information/actions applicable to them and reducing content overload.
Homepage Redesign - A page that, based on search data, provides immediate resolution to the top website actions (e.g. pay a parking ticket) while reinforcing the new approach to information architecture and effectively directing users. An effective design of this page will dramatically reduce users’ time spent searching for information and overall frustration.
Design & Testing
Both the homepage and user “hubs” went through multiple iterations. We engaged in usability testing after each iteration, gaining feedback on how to modify the designs for better use. In the end, we went through about 20 feedback sessions in addition to review sessions in class.
Some designs changed dramatically as we realized flaws in many of our designs, such as having multiple search bars and placement issues with the “hubs”. However, in the end we were able to dramatically reduce site complexity while also organizing content so that users could easily locate needed information and actions.
“I don’t go to the website to wander; I go to do a specific task...”
-Usability tester commenting on the homepage design mock
“Welcome me, and then just let me do
what I need to do.”
- Usability tester commenting on the
homepage design mock
Designing & Iterating the Webpages
Homepage Iterations
Initial homepage sketch showing initial “hubs” concept and action “buckets.”
Low-to-mid fidelity wireframe after applying search data with expanded action ‘bucket” quantity and “hubs” as main nav.
High-fidelity mock featuring final “hubs” in navigation and five action “buckets,” along with latest news articles from the city.
Resident “Hub” Iterations
Low-to-mid fidelity wireframe featuring primary content search, dynamic popular services, and dynamic popular requests.
High fidelity mock featuring primary content search, dynamic trending content area, and trending topics.
Content Design
Written content was based heavily on internal and external search terms. Due to the diversity of residents and reasons for coming to the site, the language had to be user-focused over generic, simple and straightforward, and free of jargon or complex terms.
For example:
Intentional use of layperson terms and easy directions towards portals for each user type
Search-driven terminology based on what terms people are actually searching for
Welcoming and personal language like “Information just for you” or “Welcome home to Chicago”
Language that considers user’s intentions instead of city’s demands, such as “Respond to a ticket” vs “Pay ticket" when a user seeks to contest the ticket
Use of redirect notices to inform users linking to affiliated sites with non-standard visual design
Final Designs
After user feedback and testing, we arrived at the final designs for our group’s piece of the project - the homepage and user “hubs”. Using the design system, we would create hubs for each major user type, including residents, businesses, and visitors, allowing a separation of content to ensure clear, accessible information that’s just right for each user type.
Final Homepage
The new homepage represents a more visually-appealing, welcoming page with a renewed commitment to those who use it. It places residents first, without alienating other user types or ignoring administration needs. It provides resolutions to the top actions taken on the site, news articles that the city can raise to homepage as needed, a reinforcement of the user “hubs,” and a home for administration information.
Based on search data analysis, it’s estimated that the new homepage will resolve up to 81% of immediate user needs, while also welcoming and more efficiently directing everyone who enters the website. The page provides the following benefits:
Emphasizes a more welcoming tone and commitment to Chicago’s residents, visitors, and businesses.
Simplifies how visitors navigate the site.
Limits the number of options in navigation and interactive elements.
Eliminates options to give a less overwhelming experience.
Surfaces top requested resources while still marketing Chicago’s vision.
Showcases the mayor’s office without making it front and center (overshadowing immediate user needs, i.e. citizens first).
Final Resident “Hub”
The final “resident hub” is dedicated to immediately solving resident needs. Top requested services and resources are prioritized at the top of the page giving quick access to get in and out. Additional resources and tasks are organized by clearly-defined topics meant to create an intuitive navigational experience where visitors can recognize where to find information they need. It also keeps visual clutter low while being friendly. The page provides the following benefits:
Organizes by clearly-defined topics that are intuitive to any visitor of the site.
Serves the residents by providing information that is most valuable to them first and allows them to quickly complete popular tasks.
Speaks in a language and tone that is easily understood and can be acted upon.
Positions information consistently on the page to create a cohesive experience throughout the website.
Eliminates visual clutter by balancing photography with city-defined icons.
Final Business “Hub”
As there was a significant number of business-related tasks not applicable to residents, a separate business hub was also needed. The business “hub” copies the format of the resident “hub” but provides dynamic content pertinent only to businesses using business language to best serve that user type. This page showcases how the design system and use of design patterns can easily be scaled to new pages to create a cohesive experience. The page provides the following benefits:
Utilizes design system components to create a cohesive experience.
Visualizes with imagery that is inclusive and represents all.
Speaks in a language that shows that Chicago is a welcoming, transparent, and ethical city to do business in.
Promotes Chicago in a way that aligns with the values of the new administration, such as putting citizens first.
Design System Additions
As per the requirements of the project, our team also added, adjusted, refined, and created additional states for a variety of current and new design components to help complete the Chicago Design System. These items will directly aid the city in creating a standard visual aesthetic that is accessible, modern, and easy to replicate as the city changes.
2 horizontal dividers
7 card styles
A redirect notice for outside links
Completion of all text link states
A modal window
Auto-suggest for search bars
2 single-select drop-down styles
Outcome
On March 4, 2020, the Mayor and other city officials unveiled the new Chicago Design System that, alongside other organizations, we directly contributed to. I was invited to attend this ceremony.
The new design system and brand identity will be rolled out over the next years.
DePaul University students, teachers, and Chicago city employees at the design system unveiling on March 4, 2020. All worked together to build the new design system and brand guidelines.
Mayor Lori Lightfoot at the design system unveiling, alongside city officials, news media, and designers from organizations including DePaul University.
A thank you stand-up at the unveiling event referencing the work of our class at DePaul University.
The Chicago city website in February 2021, with updated main navigation listings based directly on our work, as well as hero banner content created by me.