City Of Chattanooga
Product: Official city website and CMS platform.
Type: Municipal/Government
Role: Design Strategy, UX, UI, Information architect.
Scope: Responsive Website, CMS component system.
Skills: Research, User research, Comparative research, Design Sprints, Product design.
Client: City of Chattanooga, TN (at CI&T)
Website: 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
The project began by running design thinking workshops with key city officials. These sessions aimed to uncover the diverse needs of the constituents, content managers and city stakeholders.
It was obvious that the website was visually and technologically outdated, but I needed to have a better understanding of the requirements, issues and opportunities before I could offer a valid solution.
Chattanooga’s website before redesign.
RESEARCH
Although CI&T was not responsible for the project’s visual branding, in order to get stakeholders excited and to gauge their inclinations, I created and presented a thorough comparative research of many US and international municipal website designs.
Personal interviews refined our insights into the specific requirements for the new website. We also set out to understand the technical aspects of the chosen CMS platform.
With a clear understanding of stakeholder needs, my attention shifted to the site’s hierarchical organization. Along with content designers and analysts, I began to meticulously index the thousands of webpages. We wanted to ensure no critical information was lost during the redesign, and also, understand the connections between information areas, and to scope component creation.
Additionally, we used Google Analytics to understand what users are looking for on the site, and in combination with 311 call statistics, we uncovered discoverability issues to be resolved.
Information Architecture
When starting to conceptualize a new IA, I also leaned into finding from my research, where I explored how cities of similar size around the world manage their navigation scheme and hierarchy.
Using the insights from stakeholder interviews and quantitative research, I was able to determine which activities and features belong together and which should be highlighted or linked from more then one location. For example, user expected to fined parking violation payments Under payments, but, since it was one of the most common features on the site, It should also be available under “quick access” from the home page.
The development of a new sitemap introduced an intuitive and "flat" hierarchy, that presented the benefits of easier navigation, exposing content for discoverability, and minimized the variety of needed tamplates and components needed to be built and maintained by the city.
Section of the site map. The entire sitemap included about 100 pages.
Wireframes
After understanding the overall structure of the website and the way pages are connected to each other, I started designing the actual pages that will accommodate the site's content. Since the city content managers were responsible to maintain the content via their CMS, I tried to make it easier for them to choose which template the need to use by minimizing the amount of main types of pages available.
I identified 5 page templates that cover 9o% of use cases. Limiting the template types has an additional benefit of lower development effort, but the content and structure for these templates was still flexible, since the internal components could be added, removed or edited.
Components
After defining the basic templates, I analyzed existing content for pattern. These guided component building and their hierarchy. By mixing and matching templates and components, we could create endless page variations. To prevent choice overload, I designed a subset of templates with components tailored to the most common page types.
This allowed us to continue developing content pages tailored to user needs identified earlier. The use of Bootstrap as our CMS enabled rapid live modeling of pages, ensuring that the product team could test and adjust layouts and content swiftly in response to stakeholder feedback.
Validation
The developed wireframes and content organization were put to the test via the CMS. This way, we were able to collect feedback from content experts in real-time. Although faced with the unexpected hurdle of delayed branding materials (via external agency), our ability to adapt ensured that development could proceed.
After this step, iteration work on the design and branding could begin. I only participated in one itiration before moving on to other projects.
Final design using wireframes. The website was designed by Chattanooga’s design team.
Outcomes
The final product meets the diverse needs of Chattanooga's residents and officials.
Using the wireframes and AI, Chattanooga’s designers were ale to quickly create UI design and branding, and minimize time and costs to bring the new site online.