Case Study · 2024 · Civic Tech
Reimagining the Seattle Youth Portal
How four months of research and information architecture work took an unlaunched government portal from a 52 to a 75 on the System Usability Scale — and turned a city's structure into a teenager's tool.
Role
Lead Product Designer
Duration
4 Months
Screens
30 +
Client
City of Seattle
52
75
SUS Score · pre- and post-redesign
Driving product strategy to transform a highly complex civic portal from "unusable" to an industry-standard benchmark. In just four months, I managed the end-to-end UX architecture and partnered with engineering to securely ship a + 23 point usability lift.
01- The Problem
The city had built a portal nobody wanted to use.
The City of Seattle had finished a youth resource portal but hadn't shipped it. Internal usability testing scored 52 out of 100 on SUS — well below the 68-point threshold for software considered usable. The portal was organized around government departments: Parks & Rec, Education, Public Safety, Environment. Teens couldn't find anything.
Before launching, the city needed to know: is the structure broken, or is the audience wrong? My team was brought in to find out.
02- Insight
Twenty trends surfaced from teen interviews. Four reshaped everything.
We interviewed 14- to 20-year-olds across Seattle, including non-traditional students working outside the standard education path. Twenty themes emerged from affinity mapping. Four mattered:
i.
Teens want programs tailored to their needs — not generic listings.
ii.
The traditional education system doesn't serve everyone equally.
iii.
Mental health resources are needed outside school walls.
iv.
Mentorship is the most-requested missing piece.
The original portal was organized around the city's structure. Teens think in terms of their own outcomes. That single reframing — from government org chart to user goals — drove every downstream decision.
03- The Design
Seven government categories collapsed into three goal-oriented ones.
The redesign didn't start in Figma — it started in a card sort. Before drawing a single screen, we needed to know whether the existing structure could be rescued or whether it had to go. The card sort answered the question in the first session: teens consistently grouped programs by what they wanted to do, not by which department ran them.
From there, the design work was structural. Three decisions did most of the heavy lifting
01 · The IA pivot
Seven government departments became three intent-based categories. The mapping wasn't clean — most old buckets fed into more than one new one — but the framing finally matched how teens described what they were looking for.
Before · government org chart
Parks & Recreation
Education
Public Safety
Environment
Health
Arts & Culture
Workforce Development
After · Teen Intent
Build Your Future
Absorbed → Education · Workforce Dev · career-track Arts
Resources
Absorbed → Health · Public Safety · Environment
Opportunties
Absorbed → Education · Workforce Dev · career-track Arts
02 · The Persona
Alyssa, 16, low-income, looking for direction became the litmus test for every screen. If a decision didn't make her path clearer, it didn't ship.
Fig. 01. Home — the three-category navigation lives above the fold, with featured programs surfacing based on quick interest filters.
- Three Decisions That Mattered Most
i.
Intent-First navigation
Three categories named after teen goals, not city departments. The biggest single contributor to the SUS lift.
.ii
The Alyssa Filter
Every screen tested against the persona. If it didn't serve her use case, it didn't ship to the prototype.
iii.
Mobile first
Teens browse on phones. Desktop became the secondary target — a reversal of the original brief.
Fig. 02 Build Your Future — category landing with filtering by age, interest, and time commitment.
Fig. 02 Build Your Future — category landing with filtering by age, interest, and time commitment.
Fig. 02 Build Your Future — category landing with filtering by age, interest, and time commitment.
03- The Design
Seven government categories collapsed into three goal-oriented ones.
The redesign didn't start in Figma — it started in a card sort. Before drawing a single screen, we needed to know whether the existing structure could be rescued or whether it had to go. The card sort answered the question in the first session: teens consistently grouped programs by what they wanted to do, not by which department ran them.
From there, the design work was structural. Three decisions did most of the heavy lifting
Decision 01 · The IA pivot
Seven government departments became three intent-based categories. The mapping wasn't clean — most old buckets fed into more than one new one — but the framing finally matched how teens described what they were looking for.
Before · government org chart
After · Teen Intent
Build Your Future
Absorbed → Education · Workforce Dev · career-track Arts
Resources
Absorbed → Health · Public Safety · Environment
Opportunties
Absorbed → Education · Workforce Dev · career-track Arts
Decision 02 · Naming With Rationale
Category names were drawn directly from interview transcripts. Each one beat out a more institutional alternative for a specific reason — and those reasons mattered, because every name had to read to a 16-year-old in under two seconds.
Build Your Future
Pulled from a participant: "I want to figure out what I'm good at." Frames the category as forward motion, not credentialing.
Rejected: Career & Education
Reads institutional. Teens described school as something happening to them, not something they were choosing.
Resources
Plain, neutral, and load-bearing. Holds mental health, housing, food access, and safety information without categorizing any of it as crisis-only
Rejected: Support
Felt like an emergency button. We needed teens to browse, not flinch.
Opportunites
Pulled from a participant: "I want a list of things I can sign up for." Action-shaped, low-commitment, scannable.
Rejected: Programs
Sounded like compliance. Teens used "programs" to describe court-mandated obligations.