Redesign of ADEQ Public-Facing Website
The challenge was to modernize a visually outdated and difficult-to-navigate government information site. The redesign focused on improving clarity, accessibility, and user engagement for the public-facing experience. To approach this challenge, I conducted a comprehensive UI audit of the legacy site to identify usability and design issues, restructured the content hierarchy to improve navigation and information flow, and developed a component-based layout system using atomic design principles, ensuring consistency and scalability across the site.
The Problem
The challenge was to modernize a visually outdated and difficult-to-navigate government information site. The redesign focused on improving clarity, accessibility, and user engagement for the public-facing experience.
To approach this challenge, I conducted a comprehensive UI audit of the legacy site to identify usability and design issues. Based on user needs, I restructured the content hierarchy to improve navigation and information flow. I developed a component-based layout system using atomic design principles, ensuring consistency and scalability across the site. ADA accessibility guidelines were applied to all UI elements to support inclusive design. Additionally, I simplified calls-to-action and reduced visual noise by implementing modern UI patterns, resulting in a more intuitive and engaging user experience.
The legacy site was visually outdated with poor navigation, inconsistent design patterns, lack of accessibility compliance, and cluttered layouts that made it difficult for users to find information and complete tasks.
The Process
UI Audit
Comprehensive Site Analysis
I conducted a comprehensive UI audit of the legacy site to identify usability and design issues. The audit revealed critical problems with visual hierarchy, content organization, and accessibility compliance.
✓ Mapped content hierarchy to understand information flow
✓ Identified usability issues and navigation problems
✓ Analyzed accessibility compliance gaps
✓ Identified visual clutter and inconsistent design patterns
[Placeholder: UI Audit Findings]
Design System
Component-Based Layout
I created a streamlined design system and a set of components to enhance workflow efficiency. Although the scope was limited to a single homepage, establishing a design system ensured consistency throughout the design and allowed for scalability if needed. The system included essential components like buttons, typography styles, form elements, and grid structures, which were built with flexibility in mind.
By using reusable components, I minimized the need for recreating elements from scratch, speeding up the design and iteration process. This approach also helped maintain visual consistency across the page, ensuring that spacing, color, and typography adhered to the established guidelines. The use of a design system, even for a one-page project, allowed me to efficiently manage updates, align with accessibility standards, and ensure a cohesive user experience.
✓ Atomic design principles for component structure
✓ Reusable components for buttons, forms, and layouts
✓ Consistent spacing and typography guidelines
[Placeholder: Design System Components]
Typography
Public Sans Selection
I chose Public Sans as the typeface for this homepage redesign because it provides the perfect balance of readability, accessibility, and versatility, which are essential for an inclusive user experience. Public Sans was specifically designed by the United States Web Design System (USWDS) with accessibility as a core focus, adhering to the Web Content Accessibility Guidelines (WCAG).
Developed with Accessibility in Mind: Designed by USWDS with WCAG compliance
Large x-Height: Enhances readability, especially for users with visual impairments
Wide Letter Spacing: Generous kerning improves character distinction
High Contrast: Meets WCAG contrast ratio guidelines (4.5:1 for normal text, 3:1 for large text)
Government Standard: Official USWDS typeface for consistent government website experience
[Placeholder: Typography System]
Color Palette
Enhanced for Accessibility
To address the challenges with the existing color palette, I enhanced the design by incorporating more neutral colors to improve color contrast and readability, ensuring the text remains accessible to all users, especially those with visual impairments. The neutral tones were carefully selected to create a clear and accessible visual experience, meeting WCAG guidelines for contrast ratios.
In addition, I curated the use of accent colors strategically to establish a stronger visual hierarchy, guiding users' attention to key areas and actions on the page. By balancing bold and subtle hues, the design now offers a more intuitive flow, making it easier for users to navigate and understand the content while maintaining a visually pleasing and accessible interface.
[Placeholder: Color Palette Grid]
Before & After Improvements
Key Enhancements
Improved Visual Hierarchy
Before: Heavy use of banners and tiles with little variation in type hierarchy made it harder to scan.
After: Clearer section titles, uniform paddings, and a defined rhythm between headings, body text, and CTAs improve scannability.
Cleaner and More Cohesive UI
Before: Visually cluttered with mismatched padding, inconsistent font weights, and awkward spacing.
After: Smoothed visual layout using consistent color blocks and a grid system that aligns content sections, increasing visual harmony.
Enhanced Call-to-Action Buttons
Before: "Learn More" and similar CTAs lacked emphasis and visual weight.
After: Buttons now follow a uniform style (rounded corners, filled vs outlined styles) and are more prominent, making it easier for users to understand next steps.
Streamlined Navigation
Before: Top nav and floating buttons (e.g. "Quick Pay Now") competed for attention.
After: Consolidated with subtle hover effects, a reduced top-level nav, and collapsible elements that keep the interface clean.
Content Grouping & Prioritization
Before: Sections like "Online Services" and "Environmental Issues" were mixed in a visually disorganized layout.
After: Each section is grouped with a color block or card layout that makes it easy to understand what belongs together and what actions are relevant.
[Placeholder: Before/After Comparison Screenshots]
The Solution
The redesigned ADEQ homepage introduces clearer section titles, uniform paddings, and a defined rhythm between headings, body text, and CTAs, dramatically improving scannability and visual hierarchy. The refreshed layout transforms the cluttered legacy site into a modern, accessible government website that guides users efficiently through information.
The refreshed design uses consistent color blocks and a grid system that aligns content sections, creating visual harmony throughout the page. By eliminating mismatched padding, inconsistent font weights, and awkward spacing, the interface now presents information in a cleaner, more cohesive manner that reduces cognitive load for users.
Call-to-action buttons now follow a uniform style with rounded corners and clear filled vs outlined styles, making them more prominent and actionable. This enhancement helps users quickly understand next steps and improves the overall user flow, addressing the previous issue where CTAs lacked emphasis and visual weight.
Navigation has been streamlined by consolidating competing elements, adding subtle hover effects, reducing top-level nav complexity, and implementing collapsible elements like accordions. This approach eliminates visual competition between navigation elements and keeps the interface clean and focused, improving the user's ability to navigate efficiently.
Content is now properly grouped with color blocks and card layouts, making it immediately clear what information belongs together and which actions are relevant. Sections like 'Online Services' and 'Environmental Issues' are now visually distinct and organized, addressing the previous disorganized layout that mixed different content types without clear separation.
The design system built with atomic design principles ensures consistency and scalability. All UI elements comply with ADA accessibility guidelines, featuring improved color contrast, larger touch targets, cleaner fonts, and WCAG-compliant typography. The use of Public Sans, the official USWDS typeface, ensures accessibility standards are met while maintaining a professional government website aesthetic.
Retrospective
What would I do differently?
This project demonstrated the critical importance of establishing a design system early, even for single-page projects. The component-based approach using atomic design principles not only sped up the design process but also ensured consistency and scalability. Key learnings include the value of comprehensive UI audits in identifying usability issues, the necessity of ADA compliance for government websites, and how strategic use of typography (Public Sans) and color can dramatically improve accessibility. The before/after comparisons clearly show how addressing visual hierarchy, consistency, and accessibility can transform a cluttered, difficult-to-navigate site into an intuitive, user-friendly experience. The project reinforced that government websites have a responsibility to be accessible to all users, and design decisions must prioritize inclusivity alongside aesthetics. Creating reusable components and maintaining a design system from the start prevents future inconsistencies and makes future updates more efficient.
Technical Constraints
Technical constraints included strict ADA/WCAG compliance requirements that influenced every design decision, from color contrast ratios to typography choices. Government website standards required adherence to USWDS guidelines and specific accessibility regulations. The scope was limited to a single homepage, which meant establishing a design system that could scale was important but had to be balanced with project scope. Government procurement processes and approval workflows required thorough documentation and design rationale for all decisions. Browser compatibility across government systems needed consideration, as many users may still use older browsers. The existing content structure and government branding guidelines placed some constraints on creative freedom. Additionally, ensuring the design would work across different devices and screen sizes while maintaining accessibility standards required careful testing and iteration.