Traverse Logo
Assistance and Discounts Income Filter
Hero screens image

Project Type:
New Component/Feature

Team:
Lead UX Designer: Jenny Chen
UX Designer: Zhen Zhen McMahon

Tools:
UXPin, Office 365, MURAL

Outcome:
Shipped feature: eligibility filter, won 2 awards, callout in CTO newsletter

Project Brief

Reviews section of homepage mockup
Reviews section of homepage mockup

STARTING POINT

Affordable Seattle Audit

Assistance and Discounts was designed to replace Affordable Seattle. The main issues were:

Affordable Seattle Program Page

Affordable Seattle Programs List

Assistance and Discounts MVP Program Page

Unmoderated Usability Testing

The team also performed unmoderated usability tests to evaluate the efficacy of the information architecture, clarity of program cards, and more. Participants were Seattle residents and also:

  • Community Outreach Coordinators who help eligible residents determine what programs they may be eligible for
  • Students
  • People with disabilities/caretakers
  • Older adults or caretakers of older adults
  • Anyone receiving/have received government assistance (Food stamps, Medicare, etc.)
  • Immigrants and refugees
  • Social workers
  • Homeless people

Takeaways

Person speaking icon

People largely understood the purpose of the page: that it contained programs that they may be eligible for based on income and demographic thresholds.

Human psychology icon

People were unsure about how to find information for specific programs.

Robot head icon

A quicker method of checking individual eligibility was desired, reading the charts to determine eligibility was unclear to most participants.

IDEATION AND ITERATION

Design Progression of the Eligibility Calculator/Filter

I presented our competitive analysis to the Digital Engagement team (consisting of User Experience, Production, and Development) and conducted a cross-team sketching session. Each person shared out their design, and we voted on aspects that we found effective.

Based on the sketching session, I designed low-fi mockups of the filter and calculator.

Design Progression

Tested Design

I iterated and refined based on feedback from my UX team. I then worked with developers to review technical feasibility, use cases, and edge cases we'd need to plan for.

Desktop Filter

Traverse Prototype: Main Map Screens

Detail Page Filter

Traverse Prototype: Waypoint Screens

Adapting for Mobile

Traverse Prototype: Downloading Maps Screens

Minimum Viable Prototype - QA

Due to a tight timeline, we decided to run usability tests within our QA environment so we could launch quickly.

USABILITY TESTING

Usability Testing

I created a usability test script based on our design objectives and 'how might we' questions. We conducted moderated usability testing via the Userlytics platform. We conducted 4 tests using the desktop prototype, and 3 test using the mobile prototype. Participant screening criteria was the same as earlier tests.

Usability Task Flows

Flow #1 - Using the filter on the landing page and then the detail page

Flow #2 - Using the filter on the detail page right away

Flow #3 - Using the filter on the landing page and resetting the filter

Flow #4 - Using the income filter and binary filters on the landing page

Usability Test Findings - Key Patterns

Map icon

All 7 participants interacted with the filter immediately after starting the task. Users were also able to determine eligibility quickly.

Success checkmark icon

2 participants reported expecting loading feedback to reflect the filter  applied. Some also reported expecting the page to jump down to the results once loading was complete.

Magnifying glass search icon

5 out of 7 participants reported  preferring the image card version of the programs list. Among them were 3 participants who spoke languages other than English who reported the image cards helped them take the information in quicker.

Warning or caution icon

2 participants reported expecting to see the filter results sorted by category similarly to the full programs list organization.

Routes icon

3 out of 7 participants reported not realizing the detail page filter was pre-populated with the details they added on the full programs page until prompted.

Labels and organization icon

3 participants reported they would use the keyword search to find what they were looking for. However, upon using it, they reported the experience was difficult, unclear, or perhaps inaccurate.

Iterations, Creating V2

We went ahead and implemented low effort or high impact design changes. We're continuing to track and provide recommendations for further optimizations that can be rolled out progressively.

Prototype Revisions: Labeling Changes

PROJECT WRAP UP

Next Steps

We’re tracking items that were either high-effort or low-impact for the initial release. Additionally, we're gathering feedback for further improvements:

I kept analytics from Affordable Seattle (the old site) to compare with traffic on Assistance and Discounts once it is allowed sufficient ramp up time. The Innovation and Performance team also provided me with data on applications received each month from 2021 through 2024. I found the 6-month average for the period directly before we launched Assistance and Discounts, and the 6 months post-launch and found applications received increased from 499 to 1,180.

While this initiative is complex and this data boils outcomes down to one business-based metric that cannot be owned solely by my team's design work; such a significant increase in average enrollments in the period directly after launch in conjunction with successful usability tested designs shows me that our work to improve these content offerings and customizability surely had a positive influence on conversions.

What I learned...

Designing a high-impact, user-facing component and page has been incredibly rewarding, especially knowing my work helps citizens find relief in our high-cost city.

As a designer, I’m always an advocate for users. In this project, I navigated stakeholder priorities that sometimes conflicted with user needs. I gained valuable experience in finding compromises that met business goals without sacrificing usability. However, there were times when we stood firm to maintain the design's usability and equitability.

Receiving recognition through the GovX and Smart Cities awards was gratifying. We also received internal recognition: My CTO also shared a story in a newsletter, contrasting his mother’s frustrating experience using a cumbersome website to her positive experience using our Assistance and Discounts page, which she found intuitive. In the future, I hope to continue working on projects that make a real impact for users.

View Live site