City Of Chattanooga

Product: Official city website and CMS platform.
Role: Design Strategy, UX, UI, Information architect.
Scope: Responsive Website, CMS component system.
chattanooga.gov

With an outdated and poorly organized citizen facing platform, City of Chattanooga recruited CI&T to devise a modern, mobile-first solution.

Foundations

Through design thinking workshops with key city officials, the CI&T team identified the needs of constituents, city managers and other stakeholders. While the website's visual and technical outdatedness was apparent, I needed to thoroughly understand requirements and opportunities before proposing an effective solution.

Chattanooga’s website before redesign.

RESEARCH

Although CI&T wasn’t responsible for the site’s branding, I led a comparative analysis of U.S. and international municipal websites to engage stakeholders and explore their preferences.

We also conducted interviews to define key requirements and assessed the technical constraints of the chosen CMS.

We basically had 2 main user groups - The residents of Chattanooga, who service, questions, payments and informational needs, and City departments employees, who were responsible to keep the website alive and updated.

Research into 311 call data revealed constituents’ interests and relating discoverability issues, helping us prioritize areas for improvement in the redesign.

With stakeholder goals clarified, our product team, including content designers and data analysts indexed thousands of existing pages— to understand content relationships and hierarchy, and ensuring only the essential, up-to-date content was preserved.

Chattanooga’s open data project had a positive impact on the redesign. The large amounts of data collected helped us discover user patterns and interests that affected the site structure. The site itself was later incorporated into the redesign.

Chattanoogans

Information Architecture

When developing the new IA, I drew from my research into how cities of similar size structure their navigation and content hierarchy.

Stakeholder interviews and data revealed useful insights. For example, users expected to find parking violation payments under "Payments," but since it was one of the most frequently accessed features, we also placed it under “Quick Access” on the homepage.

The resulting sitemap introduced a “flat”, intuitive hierarchy. This not only improved navigation and content discoverability, but also reduced the number of templates and components the city needed to build and maintain.

Section of the site map. The entire sitemap included about 100 pages.

Wireframes

Once the overall structure of the site was defined, I moved on to designing the actual page layouts to accommodate content. Since city content managers would be maintaining the site through a CMS, I focused on simplifying their workflow and uncertainty by reducing the number of page types they needed to choose from.

I defined five core templates that covered around 90% of use cases. This not only streamlined development but also supported flexibility—each template allowed for modular components that could be added, removed, or customized as needed.

Components

With the basic templates defined, I analyzed existing content to identify recurring patterns that informed component design and hierarchy. By combining templates with modular components, we could support a wide range of page variations. To avoid overwhelming content managers, I created a focused subset of templates tailored to the most common page types.

Iteration and Validation

Core templates:

  1. Section Homepage

  2. Section header

  3. Search results

  4. Department home

  5. Article

We tested the wireframes and content structure directly within the CMS, allowing content experts to provide real-time feedback. This collaborative process helped us validate design decisions early and make necessary adjustments on the fly.

Despite delays in receiving branding materials from an external agency, our flexible approach allowed development to move forward as planned. Once those materials arrived, visual design iterations began. I contributed to the first round of refinement before transitioning to other projects.

This approach allowed us to develop content pages aligned with the user needs identified earlier. Using Bootstrap as our CMS enabled rapid, in-browser modeling of pages, making it easy for the product team to test and refine layouts in response to real-time stakeholder feedback.

Mobile interactions

Impact

The final product successfully meets the diverse needs of Chattanooga’s residents and city officials.

Leveraging the wireframes and information architecture, the city’s design team was able to quickly develop the visual UI and branding. This streamlined approach helped minimize both time and costs in launching the new website.

Improved usability and content discoverability

Streamlined content management

Faster implementation and reduced costs