UX Process Annotation · Senior UX / Product Portfolio

English Learner
Family Toolkit

Turning four static federal PDFs into a secure, multilingual mobile toolkit for underserved English learner families. Now shipped and in public use, available in Arabic, Chinese, English, and Spanish.

Project
Family Toolkit Mobile App
Client / Sector
NCELA · Federal / U.S. Dept. of Education
Role
UX Strategist & Product Design Lead
Deliverables
Interactive prototype, proof of concept, user research, wireframes
Status
Live · Google Play & App Store
01 · Interactive Prototype
02 · Proof of Concept
03 · User Research
04 · Wireframes
01
Deliverable · Interactive Prototype

The Tested,
Clickable Product

Round two. A live, interactive prototype built after user testing and folded into the package handed to developers. Tap through the flow a family actually takes, from choosing a language to reaching the toolkit content that started as four static PDFs.

Deliverable 01 · Interactive Prototype
Experience the Flow,
Don't Just Read It

The same philosophy as the proof of concept, now backed by research. Testers and stakeholders could move through the real flow instead of imagining it, which is what made the feedback in this round specific enough to act on.

This build shipped as part of the developer handoff, so what programmers received was a working reference, not a description.

↗ Open Full Screen
What the Prototype Walks Through
Stage 01
Discover & Arrive
Stage 02
Secure Entry
Stage 03
Choose Language
Stage 04
Read the Toolkit
Stage 05
Get Support
Stage 06
Save & Return
Open Prototype
horizonsplash.com · ELFT_Interactive_Prototype.html
Design Rationale

Tap-Through, Not Tell

A working prototype let people experience the flow instead of hearing it described. That is the same move that won the proof of concept, repeated once research told us what to build. Feedback got sharper because the thing being tested was real.

What to Look For

Language Before Everything

The prototype front-loads language choice. A family that cannot read the content has no reason to go further, so the flow settles that first and clears the barrier before it can stop anyone.

What to Look For

Secure, Low-Friction Entry

Access is protected without turning the front door into a gate. Watch how the entry stage handles security for a low-trust audience without stacking up steps that would cost the very patrons the mandate set out to reach.

02
Deliverable · Proof of Concept

Prove the Idea
Before Asking for Budget

The mandate was one line. Do more outreach, reach more patrons, especially the underserved. I answered it with a working concept, not a slide deck. Five Sketch screens that executives could walk through, screen by screen, before a dollar was committed.

View Deliverable
poc01–poc05.png
Design Intent

Show, Don't Pitch

I built the concept in Sketch and navigated executives through each screen live. I explained the purpose of every screen and the decisions a user would face. The proposal stopped being a discussion. It became a product they could see and tap.

Why This First

De-risking an Ambiguous Mandate

The ask was vague. Reach more underserved patrons with only four PDFs to work from. A proof of concept turned that ambiguity into something concrete enough to fund. A mobile app was the means, not the goal. Experience and efficiency were the goal.

Constraint

Two Hard Problems, Named Early

Getting the information to families securely, and making it accessible across languages. Both were surfaced inside the concept, so stakeholder buy-in came with eyes open rather than as a promise to solve them later.

03
Deliverable · User Research

Testing First, Then
Personas and Journey

Once funded, we recruited and tested real users. The personas and journey map here are outputs of that testing, not guesses that came before it. Testing came first. Everything after it is evidence.

Method · User Testing Screens
What We Put in Front of Users

These eight screens were the instruments for moderated testing, built to study behavior and sentiment: how families read the content, how they searched, and how they handle a mobile app in general. They were made to learn from, not to ship.

The launched app diverged from them. Compliance review and stakeholder needs drove many changes on the way to development, so these are research artifacts, not a preview of the final UI.

View Deliverable
01home–06resourcesearchresults.png
Output · Personas
The People Behind the Mandate

Testing produced personas grounded in how these families actually live, read, and access information, not in how we assumed they did.

Newcomer Families
Multilingual Caregivers
Underserved Patrons
Family Toolkit personas built from surveys and user testing

Loads from horizonsplash.com

Research Output · Personas
Built From Testing,
Not Assumption

The concept earned the budget. The research told us who we were actually building for. Each persona was defined by what the toolkit had to do for that family and by the barrier standing in the way, whether that was language, trust, or access.

↗ Open Full Size
View Deliverable
elftprofile.png
Method

Research After Funding

Personas came out of surveys and user testing conducted once the project was funded, not from a whiteboard. Recruiting and testing real patrons anchored every later decision in evidence instead of instinct.

Core Need

Language Is the First Barrier

Accessibility here was not a checkbox. If a family cannot read the toolkit in their language, the outreach fails before it starts. That constraint cut across every persona and shaped the app's first real decision point.

Core Need

Access Has to Feel Safe

These families weigh trust carefully. Delivering sensitive information to them securely was a design requirement, not an afterthought, and it shaped how each persona's path through the app was built.

Output · User & Platform Journey
From First Open to Trusted Resource

The same testing mapped what a family does and needs across the flow, from first open to the moment they return, and where each stage carried a trust, language, or clarity risk.

Stage 1 · Arrive
01
Discover
Stage 2 · Access
02
Secure Entry
Stage 3 · Language
03
Choose Language
Stage 4 · Content
04
Read Toolkit
Stage 5 · Support
05
Get Help
Stage 6 · Return
06
Save & Return
User and platform journey map for the Family Toolkit app

Loads from horizonsplash.com

Research Output · User & Platform Journey
Map the Risk,
Design the Fix

The journey pairs the family's path with the platform's job at each stage. Where a stage carried a trust or comprehension risk, that risk was translated directly into a screen-level decision around pacing, reassurance, or language.

↗ Open Full Size
View Deliverable
elftjourney.png
Design Intent

Language Choice Comes First

Language selection sits near the front of the journey, not buried in settings. A family that cannot read the content has no reason to continue. Putting the choice up front removes the barrier before it can stop anyone.

Key Risk

Security Without Friction

Secure access was non-negotiable, but heavy security kills adoption for a low-trust audience. The journey isolates the access stage so protection could be added without turning entry into an obstacle course.

Opportunity

Built to Return To

The toolkit is reference material, not a one-time read. The journey ends on Save & Return so families can come back to the exact resource they need, which is the behavior that turns outreach into ongoing value.

04
Deliverable · Wireframes

Wireframes That
Became the Build

These wireframes translated the tested concept into structure. They fed a live, interactive prototype in round two, and shipped as part of the package handed to developers and programmers, with stakeholders kept inside the loop through sign-off.

Family Toolkit wireframe 1

Loads from horizonsplash.com

Wireframe 01
Entry & Language
Family Toolkit wireframe 2

Loads from horizonsplash.com

Wireframe 02
Toolkit & Content
Family Toolkit wireframe 3

Loads from horizonsplash.com

Wireframe 03
Support & Return
View Deliverable
elftWF01–elftWF03.png
Method

Tested Concept to Buildable Spec

The wireframes took what testing validated and gave it structure. This was round two after the proof of concept. More data, a more acceptable version, and a layout developers could build against without guessing intent.

Handoff

Made for Developers

The live interactive prototype and these wireframes went into the handoff package for developers and programmers. Nothing about the build was left to interpretation, and stakeholder sign-off stayed part of the circle throughout.

Outcome · Shipped

It Went Live

The EL Family Toolkit shipped as a public app for the U.S. Department of Education, built by Manhattan Strategy Group. The live product carries the design system and visual assets I built from the original screens and flow, now in families' hands in four languages.