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.