ComBoard

Timeline:
May – Oct 2024
Role:
Lead UXR & Design (solo)
Tool:
Figma

AAC app for a non-speaking high school student with cerebral palsy, used in mainstream classes.

View Prototype →
Animated screen recording showing the ComBoard prototype in use on an iPad

Understanding Users

Photo representing Ellie, the user research participant

This is 16 year old Ellie. She 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.

A sneak peak into how the design helped Ellie!

980% increased spellingFrom 2x/month to 5x/week
5/5 user preference1/5 (Tobii) and 3/5 (plexiglass board)

Ellie's Goals

  • Spontaneous communication
  • Enriched social interaction
  • Active class participation
  • Reduce physical strain

Ellie's Frustrations

  • Bulky, expensive solutions
  • Calibration lag for eye-tracking
  • Slow setup disrupts natural flow
  • Limited predictive vocabulary

Journey Map

Communicate a Thought

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.

1. Trigger — Need to Communicate
Tasks
Feels the need to ask a question or share an idea; signals with eye movements or gesture
Feeling
Urgent, Anxious
Improvement
Always available AAC that allows self initiation
2. Wait to be Noticed
Tasks
Wait quietly; vocal noises to get attention
Feeling
Helpless, Dependent
Improvement
Visual or audio cues built into app to alert when she has something to say
3. 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
Smart, predictive text
4. Classroom Participation
Tasks
Tobii blocks Ellie's face, E-TRAN is unwieldy; limited to aide-proposed options
Feeling
Frustrated, Excluded
Improvement
Eye-tracking technology; use of common device screens that don't block face

Defining the Challenge

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?

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, causing eye strain.
  • Many devices 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 for standard tablets and phones so communication partners can hold the device, preserving eye contact and social connection.

Keep visually minimalistic with limited colors, strong contrast, and clear grouping to reduce cognitive load.

Design Process

I prioritized getting a functional keyboard into Ellie's hands as fast as possible, deferring polish and settings in favor of early, frequent testing with the actual user.

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.

Early communication board design iteration showing category-based layout Second iteration of the communication board moving toward a keyboard layout

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.

Paper sketches of keyboard icons alongside early digital icon components in Figma

UI (Weeks 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.

Figma design file showing paper sketches and early digital component iterations for the ComBoard keyboard

Interaction, User Testing, Prototyping (Weeks 8–12)

ComBoard prototype showing the interaction flow and user testing setup

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.
Refined ComBoard UI from the Make-a-Thon showing improved screen space usage ComBoard settings and personalization options from the Make-a-Thon prototype ComBoard Make-a-Thon prototype showing selection feedback improvements
ComBoard Make-a-Thon iteration with Lucide icons and updated layout
View Figma Prototype →

Outcomes

A line graph showing device usage per month from May 2024 to June 2025. The student requested to use the Tobii device the least with a nearly horizontal line at zero, plexiglass board occasionally, and the digital ComBoard most often with a peak of 24 uses in January 2025. Plexiglass board usage decreased as digital board usage increased. There is a dip in ComBoard use during December 2024.

Goal #1 Result

80% increase in spelling instances — using ComBoard 5x/week by spring 2025 compared to 2x/month with plexiglass board.

Goal #2 Result

Method preferences: Tobii (1/5), Plexiglass board (3/5), ComBoard (5/5)

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. Components are organized by variant and state so that a developer can quickly inventory every UI element and map it to a code implementation.

What I Learned

One of the biggest takeaways from this project was learning when to leverage existing resources. I spent a lot of time creating custom icons, which delayed the completion of a functioning product and introduced visual inconsistencies — libraries like Lucide already had what I needed. I also gained a deeper appreciation for state management; it's not only extremely important but surprisingly complex, and poor implementation leads to messy code and a frustrating user experience. Finally, I learned that color choices go far beyond aesthetics. ComBoard went through several sets of brand colors before landing on a palette that actively supports the user experience, helping Ellie focus on selections by looking towards colors rather than trying to distinguish individual letters.

Scaling ComBoard

ComBoard was designed for Ellie, but the underlying problem — bulky, one-size-fits-all AAC tools that cause fatigue and limit social connection — affects millions of non-speaking individuals. The Make-a-Thon prototype took the first step toward scalability by introducing robust settings for layout, color themes, and input methods so the app can adapt to a wider range of motor and cognitive profiles. Looking ahead, scaling ComBoard means building a modular preset system where therapists or caregivers can configure key clusters, icon sets, and predictive vocabularies for each user without developer involvement. It also means supporting multiple input modalities — switch scanning, head tracking, and touchscreen alongside eye gaze — so the app isn't locked to a single access method. The long-term vision is an open platform where clinicians can share and refine presets across institutions, turning ComBoard from a tool built for one student into a flexible framework that any AAC user can make their own.

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-imagined 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 working 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 Collaboration

Publish as a website and as a downloadable app for Ellie to continue using with other communication partners.