Your Texas Benefits

UI
UX
Design Systems

the client

Your Texas Benefits is a service provided by Texas Health and Human Services (HHS) that aids qualifying Texans with financial relief. Through Your Texas Benefits services, Texans can apply for and manage benefits from SNAP, TANF, and Medicaid programs.

the challenge

Our design team was tasked with re-designing the entirety of the Your Texas Benefits mobile app and launch the new version within a 6 month timeframe. The scope of the project included leveraging the previous functionality of the app, while also designing for the integration of a major new feature that allowed users to manage their EBT finances. Our efforts aimed to mitigate case-worker workload, focus on agency cost savings, fraud prevention, and enable independence for users.

my role

  • Led & directed two feature teams made up of 6 junior designers and 2 senior level designers.
  • Worked closely with client stakeholders through review cycles by presenting solutions, capturing feedback, and collaborating through design iterations.
  • Represented the design team by aligning with project management, development, and project leadership on strategy, design sprints, and resource allocation.

How we did

12%

increase in renewal completion

We enabled users to customize their own form experiences, increasing completion rates.

2x

EBT card feature engagement

Activity with EBT card features (card freeze, manage PIN) doubled within two months of first release.

Discovery

previous research

One year prior to our redesign project, another Deloitte Digital team engaged with Texas Health and Human Services department to conduct in-depth discovery work aimed to influence HHS’s decisions on YTB’s features on a service level. self-service successes, pain points, and future needs for the Your Texas Benefits website and mobile application

Findings from the research included details on the self-service successes, pain points, and future needs for the Your Texas Benefits mobile application, and included synthesis like modes and mindsets that helped inform our decisions.

tree testing

Our goal for our preliminary work was to gain insight into how clients would locate and interact with Lone Star Card features within our Your Texas Benefits design prototype and validate our initial information architecture.

The biggest feature we were designing for was the integration of EBT functionality into app, and we needed to gain quick insight into how clients would locate and interact with those features. To do this, we ran tree testing with users over Zoom sessions to test flows against each-other so we could determine optimal paths.

11

test conducted

38

tester journeys

6

themes identified

identified areas of improvement

Labeling of bottom nav tabs, links, and content areas within FAQs

  • Labeling of bottom nav tabs, links, and content areas within FAQs.
  • Find-ability of top nav icons.
  • Understanding task objective, too broad

“I think it was confusing because I thought the FAQs were about the app and not the Lone Star Card.”

- Benefits recipient

“In my natural flow, I would not click Help or top navigation”

- Benefits recipient

EBT Integration

lo-fidelity Usability testing

human centered design iteration

Documenting testing journeys gave us data on areas clicked on and paths taken before user completes the task, Which tasks had a clear path or were confusing within the IA, & Identifying any missing steps.

Below shows screens from our lo-fidelity clickable prototype created in Figma for our EBT integration, we ran usability testing with 5 users

8

test conducted

38

tester journeys

6

themes identified

SESSION TAKEAWAYS

Documenting testing journeys gave us data on areas clicked on and paths taken before user completes the task, Which tasks had a clear path or were confusing within the IA and Identifying any missing steps.

Below shows screens from our lo-fidelity clickable prototype created in Figma for our EBT integration, we ran usability testing with.

1

Revise bottom navigation icons and descriptions.

2

Make the Lone Star Card/Balance amount clickable and take users to view more information.

3

Maximize the relevant information that appears on the Lone Star Card landing page.

4

Reduce screen real estate of “Upcoming Deposits”.

5

Implement contextual help to assist users along a particular flow

"If it can keep a history of where you buy groceries, how much you spent, you can keep track of benefits better."

- Benefits recipient

"I need to see on either tab when you would be getting your next deposit. When you have four mouths to feed, planning schedules for shopping is a big deal."

- Benefits recipient

Renewal Flow

Progressive disclosure

Early in our work we quickly came to terms with just how wide of a demographic Your Texas Benefits serves, and not only how many different kinds users have different arrays of needs, but how even the same user's needs can shift each time they interact with an app through the course of them receiving benefits over several months or even years.

In the previous version of the app, users renewed their benefits through a form-based wizard. For our redesign, a solution we provided while leveraging the wizard was to look for opportunities to enable users to choose how they would like report a change to their case, as opposed to throwing all users into the same flow regardless of their preference.

Enabling users to choose their own path

From research we identified a subset of users, usually newer users, that wanted to be as granular as possible with the information they were providing in order to secure their benefits to the best of their ability. For those users we gave the option, “Walk me through the different kinds of changes."

Another subset of users, usually those who have been receiving benefits for some time and know the system better would rather get to the changes they need to make and get bogged down with longer than necessary flow. For those users we gave the option “I know what changes I need to report. I’ll pick changes I want to report from a list”.

The client’s contract did not allocate testing for this portion of the project, so we looked to modes and mindsets for validation, along with internal test and reviews with the client.

UX PATTERNS

designing for scalability

Over the decades Your Texas Benefits has relied on paper forms has a means to obtain information from citizens. With a component and template-based approach to layout and styling we designed for our current needs while also bearing in mind how to future proof our design system for form generation that is flexible enough to work within a future state CMS.

Design system and annotations

The method to assure UI would be used correctly within the scope of our own project, as well as in future instances of YTB iteration, was to provide detailed annotations for all of our UI. To do this I set up a design system repo using Invision DSM to serve as the source of truth for all UI annotations.

This repository proved to be very effective for developer collaboration, onboarding for new designers,

strategy for implementation

The was design system for the mobile app was derived from the previous work that I led for YTB’s Renewals project. As a piece of preliminary work for the mobile app, I decided to fork our design system into two child systems to house components for each the mobile work and web work respectively. Each child system inherited styles from a parent system that featured only our foundational styling (color, typography, grid system) and basic components (buttons, iconography, input fields, selections).

Web examples

foundational component examples