UX/UI Design

Designing a Scalable, Accessible Public Housing Website

Role: Senior UX Designer
Product: Public-facing website & CMS
Context: Public-sector, policy and accessibility requirements


Overview

Supporting Access to Critical Housing Information

Akron Metropolitan Housing Authority (AMHA) serves residents, landlords, and community partners through a range of housing programs and public services. Their website needed to support diverse audiences, meet strict accessibility requirements, and remain easy to maintain by non-technical staff.

The project focused on redesigning AMHA’s public website to improve usability, content organization, and ease of ongoing maintenance for internal staff.


The Challenge

Balancing Accessibility, Scale, and Ongoing Content Management

AMHA's RFP identified the need to restructure their existing site architecture while accommodating a large volume of content. As a federally-funded housing authority, the site was required to meet ADA/WCAG compliance standards. Key challenges included:

  • Serving diverse audiences (residents, landlords, applicants, staff) with competing needs within a single information system

  • Restructuring a wide, shallow IA shaped by policy and legacy content without losing critical information

  • Meeting mandatory ADA/WCAG compliance requirements across all templates

  • Enabling non-technical AMHA staff to manage and update content independently using WordPress

  • Designing a scalable page-building system that would allow current and future editors to create new pages without design support

Critical forms and documents were duplicated across multiple menus, making it unclear where users should look.


Role & Scope

Defining Structure, Templates, and Interaction Patterns

I worked as the lead UX designer within a collaborative agency team. Our content lead created the sitemap, which I reviewed and used as the foundation for my design work. My responsibilities included designing page templates, creating specifications for development, and defining navigation and wayfinding elements like homepage quick links. I worked with developers to determine which templates would be built as fixed page types versus flexible page builder assemblies using our styled block system.

Final sitemap — restructured to eliminate the duplicated navigation paths shown above.


Key UX Decisions

Design Decisions Focused on Access, Consistency, and Long-Term Use

The following sections detail key design decisions that shaped the final system.

Navigation

Helping Users Find What They Need Quickly

Building on the information architecture defined by the content team, I designed a homepage quick links toolbar to give users easy access to priority tasks. I presented two approaches: task-based versus audience-based groupings. After client review, we implemented the task-based approach with six quick links.

Task-based vs. audience-based quick-links — the client selected the task-based approach for its cross-audience simplicity.

Templates

Structuring Pages to Support Growth Over Time

Beyond navigation, the underlying page structure required equal attention. I designed 16 custom page templates to address AMHA’s specific content needs, along side a comprehensive library of reusable content blocks—such as accordions, clickable cards, and media components—designed to work consistently across templates.

Many AMHA programs shared similar structural requirements but needed flexibility to accommodate distinct program details, eligibility information, and supporting content. To support this, I designed a modular program page template built from repeatable content blocks, allowing non-technical staff to assemble pages by mixing and matching sections while maintaining visual hierarchy and consistency across the site.

This system balanced brand cohesion with editorial flexibility, reduced long-term maintenance overhead, and enabled internal teams to manage evolving content without ongoing design support.

Interactive housing locator map

Filterable program directory

Program Detail Page

Editors & CMS

Supporting Ongoing Content Maintenance by Non-Technical Staff

Because the site would be maintained internally by non-technical staff, I prioritized consistent and predictable layouts. Page templates, spacing rules, and component options were designed to guide editors toward accessible, on-brand outcomes without requiring design expertise. Content blocks included pre-set heading hierarchies to ensure proper document structure, and component constraints reinforced accessibility standards automatically.

A sample of reusable blocks — mixed and matched by editors to assemble new pages without design support.

Accessibility

Accessibility as a Core Design Consideration

Accessibility was a foundational requirement throughout the project. I made design decisions to account for contrast, hierarchy, and readability, and built templates to support keyboard navigation and screen readers. The goal was to ensure that all users—including those relying on assistive technologies—could access critical housing information.

Verified WCAG contrast ratios (AA and AAA) across brand colors and UI components, alongside interactive states (hover, focus, disabled, error) designed for both mouse and keyboard navigation.


Handoff & Outcomes

Delivering a System Built for Long-Term Ownership

I worked directly with developers during handoff, providing detailed design specifications and clarifying component behavior. The final deliverable was a fully editable website built on WordPress CMS, enabling AMHA staff to manage content independently after launch.

Spec example: Button components — five interactive states with exact fill, stroke, and typography values, documented across light and dark backgrounds for developer handoff.


Reflection

Designing Systems That Can Be Maintained, Not Just Launched

This project is set to launch May 2026. Success will be determined by how reliably the system serves users and staff over time. This project reinforced the importance of designing systems that support clear access to information, governance, and long-term sustainability in public-sector environments.

Next
Next

Cal Poly CBA