Budget App
ComBoard
Svetim Logos
View all 1-Pagers
About Me
Resume
Budget App
Budget App
ComBoard
ComBoard
Svetim Logos
Svetim Logos
Lidia's Logo; a two tone teal "L" shape with an orange arc over the right side create a capital "D" shape.
ComBoard
May - Oct 2024
Lead UXR & Design (solo)
Figma
AAC app for a non-speaking high school student with cerebral palsy, used in mainstream classes
Problem: Tobii device and plexiglass board cause eye strain due to small focus targets and reliance on fine motor control. They are unwieldy, block her face, and limit options for eye-based communication in most environments.
Impact:
980% increased spelling (2x/month 🡢 5x/week)
5/5 user preference vs 1/5 (Tobii) and 3/5 (plexiglass board)
Animated preview of creating a budget in three taps on the desktop site
Content
Understanding Users
Name
Ellie
Age
16
Education
High School
Hometown
Seattle, WA
Family
Two Siblings
Occupation
Student

User Story

Ellie communicates primarily with left-right eye movements and interpretation support from an adult aide. Existing AAC solutions cause eye strain and exacerbate social friction. A personalized, pocket-sized, predictive, eye-tracking app would boost spontaneous, independent communication, allowing her to connect socially and learn without barriers.

Problem Statement: Student with cerebral palsy needs a lightweight, intuitive communication app. Current bulky and slow AAC tools cause physical strain and limit communication. She wants to chat with friends, participate in class, and prepare for college without barriers.

Goals
Frustrations
Spontaneous communication
Enriched social interaction
Bulky, expensive solutions
Slow setup disrupts natural flow
Active class participation
Calibration lag for eye-tracking
Reduce physical strain
Limited predictive vocabulary
Goals
Spontaneous communication
Bulky, expensive solutions
Active class participation
Reduce physical strain
Frustrations
Enriched social interaction
Calibration lag for eye-tracking
Slow setup disrupts natural flow
Limited predictive vocabulary
Journey Map: Communicate a Thought

Summary:
Ellie is frustrated and exhausted by current communication methods that further create distance between her and her aspirations. She wants to communicate independently and in real time.

Trigger: Need to Communicate
Tasks
Feeling
Improvement Opportunities
Ellie feels the need to ask a question or share an idea
Urgent
Always available AAC that allows self initiation
Signals with eye movements or gesture
Anxious
Trigger: Need to Communicate
Tasks
Ellie feels the need to ask a question or share an idea
Signals with eye movements or gesture
Feeling
Urgent
Anxious
Improvement Opportunities
Always available AAC that allows self initiation
Wait to be Noticed
Tasks
Feeling
Improvement Opportunities
Wait quietly
Helpless
Visual or audio cues built into app to alert when she has something to say
Vocal noises to get attention
Dependant
Wait to be Noticed
Tasks
Wait quietly
Vocal noises to get attention
Feeling
Helpless
Dependant
Improvement Opportunities
Visual or audio cues built into app to alert when she has something to say
Interpretation Attempt
Tasks
Feeling
Improvement Opportunities
Aide interprets intent through body language and eye gaze
Embarrassed
Smart, predictive text
Possibly set up bulky Tobii or plexiglass E-TRAN
Impatient
Interpretation Attempt
Tasks
Aide interprets intent through body language and eye gaze
Possibly set up bulky Tobii or plexiglass E-TRAN
Feeling
Embarrassed
Impatient
Improvement Opportunities
Smart, predictive text
Classroom Participation
Tasks
Feeling
Improvement Opportunities
Tobii blocks Ellie's face, E-TRAN is unweildy
Frustrated
Eye-tracking technology
Ellie is limited to aide-proposed options
Excluded
Use of common device screens that don't block face
Classroom Participation
Tasks
Tobii blocks Ellie's face, E-TRAN is unweildy
Ellie is limited to aide-proposed options
Feeling
Frustrated
Excluded
Improvement Opportunities
Eye-tracking technology
Use of common device screens that don't block face

Defining the Challenge & Goals

How might we design an AAC app that minimizes eye strain, integrates AI for predictive text and smart gaze tracking, and adapts to the unique needs of the individual so that they can communicate efficiently and independently without obscuring their face?

Goals

Goal #1: Double instances of spelling to communicate from 2x/month (spring 2024) to 4x/month (spring 2025)

Goal #2: User preference rating at least 20% higher than other methods

Accessibility Decisions

Key Research Insights and design decisions arrived at through recurring user interviews and a competitive audit of available AAC tools.

User Constraints
Communication boards have limited word categories and lack spelling options for free expression.
Many devices are cluttered and require fine motor control to select options, causing eye strain.
Many devices and tools limit social interaction by blocking the user's face and view.
Design Decisions
Create a keyboard that integrates predictive text.
Cluster letters and add phoneme keys (e.g. "TH") to reduce small eye movements and mis-triggered selections, lowering motor demands.
Introduce an animated "clear" state that removes unused keys after each selection to reduce clutter and allow eyes to rest.
Design the interface for standard tablets and phones so communication partners can hold the device instead of blocking the individual's face, preserving eye contact and social connection.
Keep the design visually minimalistic with limited colors, strong contrast, and clear grouping to reduce cognitive load.

Outcomes

Goal #1: 80% increase in spelling instances using ComBoard 5x/week by spring 2025 on aide's phone and student's school tablet compared to 2x/month spelling instances when relying on heavy, bulky, plexiglass board.  

Goal #2: Method preferences were scored by the user Tobii (1/5), Plexiglass board (3/5), ComBoard (5/5)

A line graph shows device usage per month from may 2024 to june 2025. The student requested to use tobii device the least and the line is nearly horizontal at zero, her plexiglass board occasionally, and the digital comboard most often and the line graph shows a peak of 24 uses in jan 2025. Plexiglass board usage decreased as digital board usage increased.  There is a dip in com board use during dec 2024.

Based on observational data. Mid-summer 2024, the student began consistently choosing to use the digital ComBoard over the plexiglass. Once school started, this became the exclusive choice for spelling tasks in school, but it is my understanding that the plexiglass solution was still used at home.

Design Process

Ideation & Drafting (week 1)

Draft 1 was a communication board on google slides. Ellie would use eye gaze to select a category and her aide would click it leading to a new page with more options. This is a common format for communication boards.

This design is limited and not scalable as I would have to manually add each category and word option.

I switched to a keyboard design that puts more power back in the hands of the user.
Animated preview of creating a budget in three taps on the desktop siteAnimated preview of creating a budget in three taps on the desktop site

Custom Designing Icons (week 2)

After learning that Ellie struggles with spelling, we decided that small icons on each key of the board would help.

I sketched my ideas on paper and used that to create illustrations in Figma.

I tested layouts with Ellie to decide how to balance letters, icons, and white space.  

A11y-Color contrast checker plug in on figma says "all texts meet AAA color contrast requirements"

UI (week 3 - 7)

A page from the figma design file shows a picture of the original paper and pen sketches for keyboard icons and an early iteration of the digital components.

Interaction, User Testing, Prototyping (week 8-12)

A11y-Color contrast checker plug in on figma says "all texts meet AAA color contrast requirements"

Make-a-thon!

In July of 2025, Figma Make became available! This drove me into a second round of prototyping to build more robust settings to personalize to a greater range of AAC users' needs.
I integrated predictive text, text-to-speech, and speech to text.
I refined the UI to make better use of screen space.
I switched from custom to Lucide icons for consistency.
I improved selection feedback with scaling and highlighting.

Sticker Sheet

Every button, tile, and card layout, along with their interaction states, used in both the mobile and desktop designs. This sticker sheet makes modifying and personalizing the ComBoard hassle-free, allowing me to continuously provide the student with a tool that best suits her needs as she is able to communicate them to me over time.  

Learnings

I spent a lot of time creating custom icons. In hindsight, this was not the best use of my efforts - it delayed the completion of a functioning product and introduced inconsistencies into the design. Lucide, and other sources and design systems, already exist with libraries of icons readily available, making it only necessary to create custom icons when what I need doesn't already exist (like the "owl" icon I wanted).
I learned that state management is not only extremely important, but actually quite complicated. Poor state management leads to messy and confusing code and introduces friction to the user experience.
Color choices go far beyond aesthetic beauty! This is sort of obvious, but it is always good to reinforce that fact through experience. ComBoard went through several sets of brand colors before landing on a set that I feel supports the user experience by helping them focus on their selections by looking towards colors rather than individual letters. The Figma Make prototype includes a set of alternate color themes too, allowing the user to create a personalized experience that suits their preferences and address color-blind needs.

Next Steps

Mobile Layout & Text Field

Improve mobile layout; the utility buttons are cramped, creating an accessibility obstacle; the text field needs to be re-imaged to support focused spelling, sentence tracking, and predictive text options.

Update
This improvement was implemented in the Figma Make prototype.

Robust Personalization

Designing several more "presets" and work with other developers to find the best way to put power in the hands of users to personalize the layout and function to fit their unique needs.

Update
Presets and robust settings were implemented in the Figma Make prototype.

Eye-Gaze Tracking Technology

I attempted to integrate Webgazer into the Figma Make prototype, but the calibration needs a lot of work before it is actually useful. I will continue to research and find alternate software and hardware solutions.

More User Interviews & Usability Study

Interview 5 additional individuals who use AAC devices to understand their needs and let them guide further design decisions. Later, moderated usability studies will guide iteration.  

Dev Collab

Publish as a website and as a downloadable app for Ellie to continue using with other communication partners.
Previous
Budget App
UX Research/Design
Next
Always open to new connections, engaging conversation, and opportunities in the accessibility and education space!
Designed by Lidia Ochoa; Powered by Webflow
2025 UXbyLidiaOchoa. All rights reserved.