Skip to content

Case Study • Senior Product Designer • Accela • 2022–2026

An essential permit portal, rebuilt while still in use.

I was hired to support Accela's 1990s-era permit portal used by hundreds of communities globally while simultaneously designing its replacement

  • NEW DESIGN SYSTEM Maintain the legacy DS while designing its replacement.
  • Legacy debt Decades of acquired surfaces, never integrated.
  • Legal floor Public agencies are required by law to meet WCAG AA.
  1. 2022 Joined Accela, lead designer for the legacy product
  2. 2023 Public Portal design system creation and planning
  3. 2024 AI-enabled 311 concept, demoed on stage at Accelarate, Accela's annual customer conference.
  4. 2025 Public Portal released in beta
  5. 2026 Public Portal general release and AI upload in beta

Under NDA.

Every artifact on this page is a reconstruction on USWDS. It shows the method, not Accela's code, components, or screens.

01 · Context2022

Who's waiting on this product.

Contractors, business owners, and homeowners, and the consequences of a stalled application for each.

Product
Public Portal and Public Portal Admin
Role
Lead designer · Jun 2022 – Jul 2026
Team
One designer (me), Product manager, dedicated UX researcher, one design-system engineer, Offshore development team

Accela's platform serves 600+ state and local agencies. Public Portal is where their residents show up: a contractor waiting on a permit, a business owner waiting on a license, a homeowner trying to find out why a review stalled.

Contractor

waiting on a permit

Delay = Can't start work.

Every day a permit sits in review has the potential to disrupt their livelihood.

Business owner

waiting on a license

Delay = Can't open.

Closing a street for a market, a block party, or sidewalk dining depends on a license issued before the date on the flyer. If the application stalls, the event, deposits, and staff hours are in jeopardy.

Homeowner

waiting on a review

Delay = Can't find out why.

A homeowner replacing a roof or adding a porch applies once a decade, not once a week. When a review stalls, the portal is the only place to learn why without making a day trip to a government office.

02 · Research2022

What my team found.

Advisory panels, on-site sessions, and dedicated UX research on the legacy portal.

I validated direction with dedicated UX researchers and took the work to the people who run these systems: customer advisory panels, conference sessions, and on-site visits at agencies. Here are a few examples of immediate findings I was required to address:

Finding 1

Poor registration and login experience.

Login and registration was a consistent source of customer frustration and agency support calls.

Finding 2

Poor error handling and feedback.

Errors flagged that something was wrong without saying what to do next.

Finding 3

One address per application.

No way to submit one application covering multiple addresses, parcels, or owners, so applicants filed the same thing several times.

For an applicant, each finding meant the same thing: a stalled permit, a call to the agency, or a trip to the counter. For a contractor waiting to start work, that is days of lost income.

03 · Shipped2022 – 2023

I fixed what was broken, shipped what was missing.

Here are some examples of inherited UX debt, a long-requested feature, and a quality-of-life feature I contributed to the portal.

Login and registration

Rebuilt from design-system components.

Inherited debt: dated UI and inconsistencies that undermined trust. Login and registration is often an applicant's first screen and the foundation of the experience, so a sign-in that feels broken undermines trust in every following step. I rebuilt both flows from design-system components, so the first screen sets the pattern moving forward.

LegacyPublic Portal
Errors and feedback

Every error says what to do.

Inherited debt: errors that flagged a problem without saying how to fix it. I designed the Validation and Required Fields patterns: each error names the field, says what to enter, and is announced to screen readers on submit.

LegacyPublic Portal
New capability · Multi-address, parcel, and owner applications

One application for several addresses, parcels, or owners.

Citizen Access tied each application to one address, one parcel, and one owner. I designed Public Portal applications to carry several of each in a single submission, so a contractor working across adjacent lots, or an owner with more than one property, applies once instead of repeating the same form.

LegacyPublic Portal
Design panel · Accessible branding

Accessibility standards baked into the admin UX

Inherited debt: any color anywhere, plus a custom CSS field with no failsafes. Agencies white-label their portals from the Design panel in Public Portal Admin. I designed color configuration around real-time contrast feedback: each brand color is checked against the text it carries as it's chosen, accessible shades are suggested, and a combination that fails WCAG AA can't be saved or applied. Custom CSS is gone, so agency branding stays inside the system's accessibility guarantees.

LegacyPublic Portal

04 · System2023

A new design system with flexibility and simplicity

30 components, 6 patterns, 50 Storybook stories, kept in sync between Figma and code.

I initially designed the components and patterns in Figma, generated the tokens, and owned the sync between Figma and the codebase. Later, I began shipping token, pattern, and story changes as PRs. The design-system engineer implemented the components in the codebase, with my review as the gate.

My contributions

Token map · colorprimitive → semantic → component
PrimitiveSemanticComponent blue-40#7ab0e6 action.primary button.primary.bg blue-20#b9d5f2 action.primary.hover button.primary.bg:hover cream-5#efe6d6 text.primary label.text red-40#e0776b status.error input.error.border green-40#8fd18a status.success badge.stable apricot-40#EB9C7A border.focus *.focus.outline
  1. 1 · Tokens

    Designed the admin Design panel, with accessibility built in.

    I generated the primitive, semantic, and component tokens and designed the admin Design panel agencies use to brand their portal. Contrast was checked at the semantic tier, so Public Portal and Admin inherited it, and the panel validated customer-provided colors and identified those that failed before they could ship.

  2. 2 · Anatomy

    Guidance for how feedback is written and where it goes.

    I inventoried the existing validation scenarios and error content, then tested with customers. From that I set guidance for how feedback is formatted and where it is consistently placed. The inventory lived in Figma, where it was visible to everyone and easy to maintain.

  3. 3 · Deprecation

    PickList replaced with a custom table.

    The design system relied on a third-party library for its base components. When the library's only option failed in testing, I designed a replacement and the engineer built it. PickList was one of those calls: I replaced it with a table of removable rows.

  4. 4 · Docs page

    Every component and its usage mapped across the organization

    Regardless of its placement or usage, each component contained links to documentation in its various forms. By using the Jira plugin and Figma's Enterprise features, I was able to link component designs directly to relevant stories in various systems.

05 · AI2024 – 2026

From early concept to AI-enabled prototypes

My engineering background is why I ended up building Accela's first AI prototypes.

The 311 mobile app concept demoed on stage at Accelarate 2024, Accela's annual customer conference, was my first foray into AI design. Using video and custom animations, I built a realistic depiction of a camera-assisted workflow: a resident files a report from one photo instead of a form.

While that initial demo was created using Figma, my next set of demos were production-grade code, supported by modern databases, and integrated with LLM APIs. Claude Code handled the environment setup and scaffolding. Twenty years of front-end work is why the prototypes held up under review.

01 · Concept · 2024Camera-assisted 311 reporting
Pothole · 94%
New 311 reportType: Pothole · auto-filledLocation: 1400 Euclid AveSubmit report
  • Figma
  • Video + custom animation
  • Accelarate 2024 stage demo
02 · Prototypes · 2025 – 2026Production-grade, data-backed demos
Interfaceworking UI
Application logicroutes, auth, state
Databasereal records
LLM APImodel calls
Built with Claude Code
  • Real code
  • Modern databases
  • LLM APIs

From a designed demo to prototypes that run on real data.

Patterns residents already know

Status, confidence, and disagreement, modeled on the AI tools residents already use.

Before placing anything, I audited how Gemini, Claude, ChatGPT, and embedded assistants like YouTube Studio's show a model's status, its confidence, and a way to disagree. Those references lived in Figma beside the components and were kept current, so every placement had a source to point at.

  • Gemini
  • Claude
  • ChatGPT
  • YouTube Studio
  • Figma reference library
  • Public Portal flag + banner

06 · Trade-offs2023 – 2026

Working with engineering, not around it.

Three decisions where UX principles and engineering constraints met in the middle.

AI-status banner

I designed a reusable AI banner to communicate status. The initial implementation was not readable at human speed.

Principle
Operational transparency (Buell & Norton, 2011): people trust a wait more when they can see the work behind it.
Together
In its initial implementation, status text advanced at machine speed and couldn't be read. Rather than slow the system down, engineering and I agreed on a minimum dwell time, specified once at the design-system level so every status surface inherited it.
OUTCOME
Status text now advances at reading speed on every surface that uses the banner.

Status text advanced at machine speed; the fix was a minimum dwell time.

Upload drawer

A drawer in design, inline in production.

Principle
Preserve context: applicants shouldn't lose their place in a long application to upload a file. A side drawer tested well in high-fidelity, logic-bearing prototypes.
Together
A drawer didn't fit the page architecture. I separated the interaction applicants depend on, the page-level recovery model, from the container around it, and we moved the steps inline.
Outcome
The recovery model shipped as designed; only the container changed.

Designed as a drawer, shipped inline; the recovery model is the same in both.

Consistency

Small inconsistencies, real cost to trust.

Principle
People read inconsistency as unreliability. Mismatched spacing, alignment, and corner radii break learned patterns and make an interface feel less trustworthy. For residents handing a government their personal and payment details, that doubt costs completions and support calls.
Together
Taken one at a time, a 4px offset or a mismatched radius looked too small to prioritize. I brought side-by-side comparisons from our own header and navigation to engineering, framed around what customers perceive rather than pixel accuracy, and we agreed to route spacing and radius values through design tokens instead of hard-coding them.
Outcome
Visual QA went into the definition of done.

Each difference is a few pixels. Together, they generate suspicion and doubt.

07 · Production2025 – Present

From Photoshop to pull requests.

How much my design process has changed, and how close design now sits to production

It's wild to remember my early days as a designer: generating designs in Photoshop, hand-coding in a text editor, and manually configuring environments in a CLI. Even at Accela, until recently, my work stopped at a handoff. I designed in Figma, Code Connect mapped components to code, and the design-system engineer built them.

Toward the end of 2025 that all but disappeared. Configuring environments and other engineering overhead that would have previously required consultation with a developer could now be handled by an agent.

Before · design hands off
Figma
I design the component.
Code Connect
Maps Figma to code.
Engineer
Rebuilds it in code.
Storybook
Documented after the fact.
Now · design ships
Claude Code
I work in the code.
Design system
Tokens, components, stories.
Pull request
Reviewed by engineering.
Production code
The live app.

No handoff. Engineering review still applies.

Before · Code Connect

Figma components mapped to production code.

Engineers inspecting a Figma frame saw the real component and its props, not a redraw of one. Drift between the two surfaced immediately.

Pull requests

Weekly PRs to production, reviewed by engineering.

Claude Code was my working environment. Every week, token changes, pattern fixes, and story updates went in as PRs subject to the same review as any engineer's.

Playwright

Used before every PR.

I used it to check states and flows I had designed before opening a PR. Making it a gate was engineering's call, and they had a suite of their own.

08 · OutcomesToday

What shipped, in public.

General release and agency launches.

  • General release
    Public Portal reached general release in 2026.
    Source: Accela
  • Rollout
    Public Portal's adoption continues to grow with weekly go-lives since January 2026.
  • City of Cleveland
    Cleveland's Public Portal launched January 13, 2026, covering construction permits, rental registrations, business licenses, lead-safe certificates, and parade permits.
    “Applicants now have one clear place to submit plans, track reviews, and stay informed.”Director of Building and Housing, City of Cleveland
    Source: City of Cleveland
  • Accessibility
    Accela describes Public Portal as “designed to enable conformance to WCAG 2.1 & 2.2 Level AA standards.”
    Source: Accela
  • Design system
    30 components, 6 patterns, and 50 stories, in use across Public Portal and Public Portal Admin.

Reconstructions, not Accela IP.