DSD

Contact Me

GovTech Site Redesign

Overview
The Problem
Solution
UX/UI Designs
Results
Learned

Project Overview

The existing site's visual language worked against it. Dense software screenshots used as hero imagery, inconsistent typographic scale across pages, and a color system with no clear hierarchy created an experience that felt cluttered and dated.

The redesign started with a compositional audit, identifying every page where layout structure was burying the key message or sending users toward a dead end. The design direction shifted toward open breathing layouts with a consistent typographic hierarchy, a clear scale relationship between display headlines, subheads, and body text, alongside custom illustration that gave the brand warmth and community character that screenshots never could.

Details

Client: Citizenserve

Type of Business: GovTech SaaS

Audience: Mid-Size Cities | Community Development Directors

Project Type: Website Redesign

Role: Art Director | Designer | Conversion Strategist | Illustrator

Collaborated With: Account Manager | Designer | MarTech

Tools Used

Figma: Sitemap Visual, Wireframe, Mockups

Claude: Site crawl, Copy help

Screaming Frog: Site crawl

Breakdance for Wordpress: Page builder

Goal

Create a clearer, more intuitive digital experience that better reflects the communities Citizenserve serves while guiding municipal decision-makers through a simplified path to understand the product and convert without friction.

The Problem

The existing site had repetitive content across service pages, making it hard to distinguish offerings or understand key differences. Supporting resources like demos, videos, testimonials, and reviews were scattered and lacked clear organization. There was also no defined conversion strategy, with multiple calls to action all leading to a single contact page and creating a confusing user journey.

Obstacles

  • The client was unsure upfront about what they wanted
  • They often wanted to compare their design needs to companies outside their industry with different audiences
  • Required more steps and reasoning behind design decisions
  • Site required some URL restructuring to close endless user navigating in circles
  • Color balancing and placement of illustrations

Details

Solution

Thought Process

Our Approach

Present multiple concepts to help surface preferences

Clean up site structure to stop users from looping through pages

Visual walkthroughs made bigger UX changes easier to understand

Stayed responsive with quick follow-ups and answers

Walk through design decisions instead of just presenting them

Reduce friction throughout the site and especially at major decision points

Increase trust signals throughout

Principles Applied

Designed around user needs and pain points instead of just visual preference

Created clearer conversion-focused funnels based on where users were in their journey

Simplified content and layouts to make information easier to scan and understand

Improved visual hierarchy with spacing, contrast, and focused calls to action

Ensured pages were easier to navigate on all screen sizes with clearer user paths

UX/UI Design

The UI kit established the typographic scale, spacing rhythm, and color rules every page would be built from. Heading sizes were set on a strict modular scale so the hierarchy communicated structural meaning through the layout rather than being applied inconsistently across templates. Button states, link colors, and alert tones were drawn from a constrained color palette that met accessibility contrast standards while keeping the visual experience clean and uncluttered throughout.

Sitemap

Simplified navigation and created clearer paths through the site. This helped in particular in defining conversion paths.

Wireframes

Helped define layout structure and improve user flow before visual design.

UI Kit

Established a consistent visual system for colors, typography, buttons, and reusable components.

Illustrations

The illustration system was built on a consistent compositional logic. Each scene uses a horizon line, foreground detail, and architectural elements to ground the viewer in a specific community without depicting any one real place. The color palette was pulled directly from the brand's primary tones so the illustrations function as structural elements within the layout rather than decorative additions.

Results

  • More visitors moved past the homepage and explored deeper service and resource pages
  • The new structure made it easier for users to understand offerings and compare services
  • Better conversion performance due to clearer paths and funnels
  • Feedback highlighted faster access to key information with less confusion or repetition

Final Outcome

What Did We Learn

  • We often see adding a step as adding time, but adding a step can mean more clarity to the client and long-term project efficiency
  • Use AI to convert hand-drawn sitemaps or wireframes
  • Let challenges lead to innovation moments and not roadblocks
  • Utilizing multiple post types and unique categories helped bring clarity to the site structure

Interested in working together?

Contact Me Today