CASE STUDY:
Designing an Inclusive Utility Account Portal for the City of Seattle

Role:
Senior Product Designer and Business Analyst

Problem:
Seattle residents faced difficulty accessing and managing utility services online due to fragmented systems and a lack of accessibility features.


Action:
Led UX research and design for a unified, WCAG-compliant self-service portal. Conducted interviews, accessibility testing (including with visually impaired users), and iterative usability studies to ensure inclusivity and ease of use. Collaborated across departments to define requirements and optimize task flows.


Result:
Delivered an accessible, user-focused portal that enabled residents to easily pay bills, manage water, sewer, and garbage services, and access financial support features—improving service equity and digital access for all Seattle utility customers.

Summary

As Lead UX Designer and Researcher, I partnered with the City of Seattle’s IT Department, City Light, and Seattle Public Utilities to design a unified, WCAG-compliant self-service portal that enables residents to manage utility services—including billing, payment plans, and property management—with ease and accessibility. Through in-depth user research, accessibility audits, and cross-departmental collaboration, we uncovered key pain points and co-created solutions tailored to a diverse public audience, including seniors, low-income households, and visually impaired users. The resulting mobile-first, role-based platform now serves as a model for inclusive digital services in municipal government.

  • Understanding a Diverse Public Audience

    Working with the City of Seattle's IT Department, City Light, and Seattle Public Utilities, we set out to replace fragmented legacy systems with a unified, WCAG-compliant self-service portal for all utility customers in the Greater Seattle Area. The first step was to deeply understand the needs, limitations, and behaviors of the city’s diverse user base—including low-income households, renters, landlords, senior citizens, and visually impaired users.

    Key activities:

    • Stakeholder interviews with internal departments and service reps

    • User interviews with residents across neighborhoods and demographics

    • Accessibility audits in partnership with visually impaired users

    • Journey mapping to surface key user goals and emotional pain points

    We uncovered barriers such as inaccessible interfaces, lack of mobile responsiveness, and confusing payment and account management workflows—especially for users with limited tech proficiency or disabilities.

    Deliverables:
    Empathy Maps, Accessibility Testing Plans, Journey Maps, Stakeholder Alignment Decks

  • Clarifying User and System Needs

    With research insights in hand, we synthesized user feedback and system constraints into a clear set of problem statements and user personas. These helped focus the scope on the most critical user tasks and accessibility challenges.

    Core user needs identified:

    • Pay bills without logging in every time

    • Access flexible payment plans (e.g. for financial hardship)

    • Navigate content and features with screen readers or keyboard-only inputs

    • Seamlessly manage water, sewer, garbage, and escrow services in one place

    • Support third-party account access for landlords or authorized agents

    Problem statement:

    How might we design a user-focused portal that ensures all Seattle residents—regardless of age, ability, or digital literacy—can independently manage their utility services with clarity and confidence?

    Deliverables:
    User Personas, Problem Statements, Feature Requirements Matrix, WCAG Compliance Checklist

  • Co-Creating Solutions with Users

    With defined goals, we facilitated ideation workshops across departments to brainstorm and prioritize features and content structure. Using insights from the Empathize and Define stages, we explored ideas that balanced user needs with technical feasibility and compliance.

    Key concepts included:

    • Role-based access, allowing landlords to manage multiple properties

    • Streamlined bill pay flows with optional guest checkout

    • Context-aware tooltips and progressive disclosure for forms

    • Multilingual support and icon-based navigation

    • Mobile-first layouts with scalable fonts and high-contrast elements

    We mapped these concepts to common scenarios and layered in support for underserved user groups.

    Deliverables:
    Concept Maps, Service Blueprints, Feature Prioritization Matrix, User Flows

  • Bringing the Experience to Life

    I created responsive wireframes and annotated layouts in Figma to visualize how the portal would function across devices and screen sizes. Special care was taken to ensure that color contrast, form labeling, and keyboard navigation adhered to WCAG 2.1 AA standards.

    Prototypes included:

    • Payment interface with dropdown payment options and hardship plans

    • Account dashboard with services summary and support links

    • Escrow and landowner-agent views with role-specific permissions

    • Accessibility mode with toggles for font size, contrast, and screen reader hints

    Deliverables:
    Responsive Wireframes, UI Annotations, Mobile Interaction Flows, WCAG Prototyping Standards

  • Validating Accessibility and Usability

    The prototypes were tested through a combination of:

    • Remotely moderated usability sessions with residents from varied demographics

    • Screen reader compatibility testing with assistive technology users

    • Feedback cycles with City stakeholders and accessibility consultants

    Findings showed:

    • Users appreciated simplified navigation and mobile responsiveness

    • Accessibility enhancements significantly improved confidence among disabled users

    • Role-based dashboards reduced errors and support requests for landlords

    • Clearer labeling and visual hierarchy reduced task completion time across all groups

    All feedback was incorporated into the final design recommendations, and the portal launched as a fully WCAG-compliant, inclusive digital service—providing essential utility access for thousands of Seattle residents.

    Deliverables:
    Usability Findings Report, Accessibility Test Results, Revised UI Recommendations, Launch Readiness Checklist

Impact

This project delivered an accessible, modern utility portal that empowers residents to manage their services with ease and dignity. The platform now serves as a model for digital equity and inclusive design in municipal services.

Next

Microsoft