Project Overview
The Department of City Planning’s website informs the public about NYC’s land use review process, active projects, events, planning resources, and access to data tools and datasets. With over 500 pages managed by multiple stakeholders, the project began as a homepage redesign but quickly expanded to include the entire site.
Goal
Modernize the public-facing government website to address changing user needs and increase user trust.
High-Level Impacts
-
Uncovered key user needs and pain points, enabling more informed, user-centered decisions.
-
Redesigned navigation for clarity and efficiency, aligned with best practices.
-
Introduced a modern, consistent UI, UX, and interaction design focused on usability and trust.
Scope
Website Redesign
Role
UX Research, UI Design, UX Design, Interaction Design
Team
Phase 1 (Research & Discovery): 2 Product Designers, 2 Design Interns, 2 Product Managers, 1 Product Owner in Communications
Phase 2 (Design & Development): 1 Product Designer, 1 Web Design Contractor, 1 Web Developer, 2 Content Migrators, 1 BA, 2 Project Managers, 1 Stakeholder/Product Owner
Duration
11 Months (May 2023 - March 2024)
Problem
The executive team felt the website no longer reflected the agency’s image, and long-standing user feedback pointed to a confusing and overwhelming structure that made information hard to find.
Interface Inventory & Design Audit
To better understand the current state of the UI on the site, my co-designer and I guided our interns to conduct an Interface Inventory and a Design Audit.
Interface Inventory
Done by our Design Interns
Design Audit
Done by our Design Interns
From these exercises, the team learned:
-
Multiple navigation bars created a confusing experience and increased friction in finding information.
-
Content was grouped with equal hierarchy, burying high-priority information like zoning behind less relevant links.
-
Inconsistent styles, misaligned elements, and cluttered spacing disrupted visual clarity and user focus.
-
Low color contrast in key areas—like the hero and multi-column sections—impacted readability and accessibility.
User Interviews Research Synthesis
Working with our data analytics officer, we used Path Analytics to identify the most common paths.
Findings:
-
Users visit the website in search of specific information and bookmark what they need because they don’t want to navigate through the homepage
-
Internal and external users seek different types of information, but all content is presented with equal visual weight, increasing confusion.
-
Users find the site overwhelming and uninviting due to inaccessible language and assumed prior knowledge of the topics DCP discusses.
User Interviews
My co-designer and I conducted 21 user interviews, alternating between being the interviewer and the note-taker. We interviewed 4 different kinds of users:
Data Analytics
Working with our data analytics officer, we used Path Analytics to identify the most common paths.We identified a point of concern:
42.5% or 39,000 user sessions drop off on the home page
We wanted to understand why.
Research & Discovery
Information Architecture
Card Sort Exercise
The resulting navigation structure after our card sorting exercise.
We were able to minimize the number of navigation links from 279 pages & subpages to 33 pages & subpages, making sure the deepest users had to go for information was a Level 3 (three clicks or less).
As we entered Phase 2 of the project with a new team configuration, I led a card sorting exercise to help the team align and make sense of the site’s hundreds of pages. We also made sure to utilize our Data Analytics for the most visited pages.
Ideation
The different pages of the website had varying levels of design complexity. For many of them, I started with sketching.
This sketch is when I was working through possible design options for the About Us landing page.
Resources
We tasked our interns with an initial wireframe exploration for the Resources pages (formerly “Data & Tools”). This section in our website houses all our datasets, applications, maps, etc. and had to be treated differently than other Level 2 Landing pages.
In Phase II, I developed the high-fidelity wireframes, building on their early concepts to refine the UI and UX, address diverse user needs, and ensure alignment with the design system. These pages were among the most complex, with a distinct user base and specialized content that we needed to parse through and recategorize.
Resources Landing Pages
During the Information Architecture phase, we decided to update the initial name of this section from "Data & Tools" to "Resources" to better describe what the section housed which was four types of resources: Web Apps, Data, Static Maps, and Geocoding.
Resources Level 3 Content Page
Although Web Apps link to an external page as an endpoint, other Level 2 sections within Resources lead to a Level 3 Content Page.
Content Structure (L1 - L3)
It was essential to have a consistent structure for both Level 2 landing pages and Level 3 content pages. We considered Level 2 to be the landing pages for when a user clicked an item on the navigation bar, and Level 3 to be the content page when you clicked into information within a Level 2 landing page.
Here is an example of what Level 2 and Level 3 look like when a user clicks "About Us" from the navigation bar:
.png)
Home Page
The final homepage design went through various initial explorations from a Web Design consultant that I later continued, finalized, and refined to be more aligned with user research.
Design Considerations
I designed the high-fidelity screens with key considerations to support scalability, usability, and long-term maintenance:
-
Agnostic components
-
Designed UI elements to be reusable across different pages and contexts
-
Simplified implementation and future updates for content and web teams
-
-
3-clicks-or-less navigation
-
Prioritized shallow information architecture to keep key content within three clicks
-
-
Clear affordances and content discovery
-
Made the page structure and content obvious
-
Included search and filtering tools where appropriate to support findability
-
Design & Iterations
I designed all high-fidelity screens for web and mobile, but focused on web in the case study, as 78.8% of engaged user sessions were on desktop.
Design File
Results
After finalizing the high-fidelity designs, I handed them off to the team. As of Q2 2025, the website is live. If I were still working on the project, my next steps would be to support QAing the designs to ensure the implemented design reflects the intended visuals.