Phoenix.gov
Redesigning phoenix.gov to organize content around the needs of residents, improve accessibility, streamline access to city services, and enhance information discoverability.
Role
Backend Dev
Frontend Dev
UX Design
UI Design
Client
PHX
Programs
AEM
Figma
IntelliJ
Time
1 Year
Top Level Categories
The first-click data in the tree test indicates that users can intuitively navigate the top-level categories in our new proposed sitemap.
Tree test conducted with 92 participants on Phoenix.gov
Residents
Task
Imagine you've just moved into a new home and need to set up your water service. Where on the site would you find that?
Correct First Click
Businesses
Task
You're an entrepreneur planning to open a new storefront and need to check the commercial zoning laws. Where on the site would you find this information?
Correct First Click
Transportation
Task
As a person with a disability, you require an accessible ride service within the City. Where on the site would you find information about the service?
Correct First Click
Discover Phoenix
Task
You're interested in playing golf this weekend. Where on the site would you find that to book a tee time?
Correct First Click
Government
Task
If you're looking to learn about the initiatives led by the mayor, where would you search on the City's website?
Correct First Click
Executive Summary
-
The new top-level categories are performing well overall.
-
Lower success and directness scores on several tasks indicate a need to adjust the sitemap to enhance clarity of some subcategory and page labels.
-
Users sometimes navigated to logical but incorrect sections, suggesting the benefit of incorporating cross-linking or a "Did You Mean?" feature on certain pages to guide users more effectively.
By anchoring our design in real user stories, Reingold embraces a user-centric approach that ensures every feature is crafted around genuine needs and narratives.
What We Did
Three activities to ground the work in user reality
Click each item to learn more
Strategic Objectives
To ensure that essential City services are highlighted and easily accessible, we leveraged analytics and search intent data to inform the new sitemap and information architecture.
By breaking down departmental silos, we aim to provide a less siloed user experience, while still retaining important resources and information for City departments.
The new sitemap is designed to equally serve both residents and visitors, providing a unified experience when accessing information on transportation, parks, recreation, events, arts, and culture.
Top Level Categories
The Residents section serves as a centralized hub for most essential services. It offers a streamlined experience for managing utility payments, reporting local issues, finding housing options, and accessing vital community resources such as police, fire, emergency preparedness, and support services.
The Businesses section is dedicated exclusively to City services and resources related to business operations. It streamlines access to permits, licensing, and a variety of services designed specifically to support Phoenix's business community.
This section maps the City's transit options, highlights street closures, lists public transportation choices, and provides pedestrian and cyclist resources. It's persona-agnostic, serving both visitors and residents equally.
Task Analysis
Imagine you've just moved into a new home and need to set up your water service. Where would you find information to get this started?
- Home › Residents › Water & Sewer › Start, Stop, or Transfer Water Service
- Home › Government › All City Departments › Water Services
No change needed for this page.
You've noticed your garbage bin is cracked and needs replacing. Where would you go to request a new one?
- Home › Residents › Trash & Recycling › Request a Container
- Home › Government › All City Departments › Public Works
No change needed for this page.
Your grandmother is coming to live with you, and you want to look into local support services for her. Where would you look?
- Home › Residents › Benefits & Support › Senior Services
Consider relabeling Benefits & Support to something more understandable. This new section is intended to provide collection of resources for human services or underserved Phoenicians.
Note: A necessary amendment was made mid-way due to the identification of a labeling error. Once the error was corrected, of the 47 participants who completed the test, 29 successfully navigated to the correct destination. This correction improved the user success rate, bringing it to approximately 61.7% for the latter part of the test.
UI Design System
Foundations & Components
The official design language for phoenix.gov — built for accessibility, consistency, and the residents of Phoenix.
A dark-first palette anchored by deep navy backgrounds, a primary action blue, and a cyan accent for headings. Six category colors give contextual meaning to Explore CTAs.
Public Sans — a neutral, accessible sans-serif designed for government digital services. Hero headings render in cyan on dark backgrounds; all other headings are white.
4px base grid. All values are multiples of 4, providing a consistent, predictable rhythm across all layouts and components.
| Token | Value | Usage |
|---|---|---|
| --dur-fast | 150ms | Hover color changes, icon states |
| --dur-base | 250ms | Button hover, nav highlights |
| --dur-slow | 400ms | Accordion expand, panel slide |
| --dur-entrance | 600–800ms | Page-load fade-in animations |
| --ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Elements entering the screen |
| --ease-in | cubic-bezier(0.4, 0, 1, 1) | Elements leaving the screen |
| stagger-delay | +100ms per child | List / card entrance animations |
| bounce | 1.8s ease infinite | Scroll-hint arrow pulse |
Three-layer system: utility bar (quick links), main header (logo + search + controls + language/mode toggle), and primary nav with mega-menu dropdowns.
Blue is the primary action color. Outline and ghost serve secondary roles. Category colors appear only on Explore card CTAs.
Dark surface inputs with a blue focus ring for WCAG-compliant keyboard navigation. Error states use red; helper text sits beneath in muted tone.
Full-bleed image cards with a category-colored CTA overlaid at the bottom-left. Used exclusively in the "Explore Phoenix" section. Each content type maps to a fixed brand color.
| Category | Color | Token |
|---|---|---|
| City Parks | #C01E6E | --magenta-500 |
| Golf | #1B7FE0 | --blue-500 |
| Hiking and Trails | #E06848 | --coral-500 |
| Major Events | #10B8C8 | --teal-500 |
| Arts, Culture & Nature | #C01E6E | --magenta-500 |
| Visit Phoenix | #C99A10 | --amber-500 |
Quick-access links for the four most-used resident services. Outlined icons in a semi-transparent blue circle, blue underlined link title, and a short description below.
Pay your City Services Bill or other bill, fine, or fee.
Request services using myPHX311.
Find your collection day or schedule bulk pickup.
Pools, trails, community centers, and more.
Two-column news layout: a featured card (left) with a maroon overlay label, and a compact news list (right) with thumbnail, headline, date, and category dot. Paired with carousel controls.
Share your input on how federal funds should be used to support community programs and services across Phoenix.
Learn More & Take Survey →