Braillerunner

Gamifying the experience of learning Braille

Platform: Mobile

Role:  UX/UI Designer, User Researcher, Art Direction, Composer

Project Type: Design, Research, Audio UX

Industry: Edtech, Accessibility, Gaming

Tools:  Figma, Descript, Zoom, Photoshop, Logic Pro X

View Prototype

Summary:
A playful typing game for the Braille keyboard

Braillerunner is a fun, fast-paced mobile game that teaches users how to type on a Braille keyboard. The experience is visually rooted in a 90s Sega Genesis / Game Boy style design, which is meant to recall the experience of learning to type on a QWERTY keyboard during elementary and middle school.

Read More About Braillerunner

I designed an End-To-End experience - from explaining the history of Braille and the mechanics of Braille typing, to practice exercises that build muscle memory and test their newfound skills. The experience culminates in the “Braillerun” module, in which the user types full words in a fast-paced rapid-fire environment. Each individual lesson builds on the skills taught in the previous one, adding new letters, punctuation, and contractions to create a complete Unified English Braille learning experience. We interviewed teachers (of both the visually impaired and sighted students) and multiple language learners to get their feedback on using apps to learn new things.

The target demographics for Braille Runner are:

  1. Sighted users who are already familiar with Braille but would like to refresh or sharpen their skills (like Teachers of the Visually Impaired or other Blindness / Low Vision professionals)

  1. Sighted siblings, parents, or friends of blind people who are brand new to Braille but interested in learning. Or anybody in general who is curious about learning Braille themselves!

  1. People with progressive vision loss who may not need to be able to read Braille right now (and might not want to for a variety of reasons), but could benefit from having learned its basic principles now.

Your Braillerun is about to begin!
Are you ready?

Background:

I spent over 10 years in the blindness ane low vision non-profit sector at the LightHouse for the Blind and Visually Impaired. Toward the end of my tenure, I joined in the organization’s Media and Accessible Design Lab - where we produced Braille and tactile maps and graphics.

There I started learning to read and type Braille using UEBonline. I got hooked - it brought me back to my elementary school days learning to type on a QWERTY Keyboard in the computer lab using tools like Microtype and Mario Teaches Typing. Gamified learning like this pushed my friends and I to improve our skills.

Microtype (1992)

UEBonline (2025)

What is Braille typing?

A Braille keyboard uses six buttons that correspond to the six dots in the braille cell. When more than one button at a time is pressed, the keyboard triggers all of those dots simultaneously.

Invented in the early 1950s, the Perkins Braille typewriter is still widely used today. The two sets of three keys surrounding the center button are used to type individual letters.

A modern, affordable Bluetooth Braille display by Orbit Research. The two sets of three top buttons mirror the Perkins input keys.

This is what Braille Screen Input looks like on iOS

An early proof-of-concept mockup we made to test the visual distribution of both Braille typing buttons and other graphical elements.

The Problem:

Educational resources for learning Braille typing on iOS are surprisingly limited.

Several thoroughly gamified practice tools (like UEBonline and Accessibyte) are effective, research-backed tools for learning Braille, but avoid using BSI (Braille Screen input) on iOS directly. Instead, they focus on the desktop and external keyboard typing experience.

The ones that do teach typing on iOS rely on existing Voiceover and Braille skills - they don’t start you from scratch.

Competitor Analysis:
Comprehensive but not mobile, mobile but not comprehensive.

We explored five different tools with the goal of finding a mobile tool that teaches the user how to type on a Braille keyboard from scratch on a touch screen. We didn't find one.

Braillebuzz

Mbraille

Braille Typing

Read the Full Report

User Interviews:
Learning can be fun

Panel Size

5 Participants

We interviewed 5 people including a Teacher of the Visually Impaired, a game concept artist, and people who have learned other languages such as Spanish and American Sign Language.

Alt Text Affinity Map

Click to view the full affinity map

Mode

20-40 minute interviews

Discussing their existing Braille knowledge, any learning tools they have used in the past, their experience learning to type on a QWERTY keyboard, and their relationship with phone or computer games (past or present).

Key takeaways:

Braille isn’t used as routinely in the day-to-day work of Teachers of the Visually Impaired as one might expect.

  • As a result, some TVIs might appreciate tools that help them keep their Braille skills sharp in an easy and fun way. At the same time, most feel that they don’t have time for professional development (but they spend plenty of time on their phones), so a light, bite-sized mobile experience could be a good fit for their needs.

Play Drives Fluency

  • Users responded positively to a Braille learning game, especially one personalized to students’ interests (e.g., names, favorite animals) and featuring competitive elements like leaderboards or WPM tracking. They noted that gamified practice builds muscle memory and fluency—much like learning QWERTY typing. Games make skill-building accessible, engaging, and easy to integrate into daily phone use.

Some people were a little confused about the concept - how would you learn Braille without actually feeling it?

  • Most sighted people know what Braille is, and some know a bit more detail about the mechanics. But several people didn’t understand how typing on a flat screen would help them learn Braille, so some education (and expectation setting) is necessary.

Meet Gabriel and Magdalena:
Different users, similar needs

Problem Statements

Problem Statement - Persona 1
Magdalena (Teacher of the Visually Impaired)

  • How might we help Magdalena keep her Braille skills sharp in a way that doesn’t feel exhausting or overwhelming?

Read More About Magdalena

Magdalena learned to read and type Braille in school, but that was over 15 years ago. Many of her students have low vision, or multiple disabilities. She is assigned a Braille-reading student every few years, and then needs to re-sharpen her Braille skills to meet that student’s needs. Her life is very busy - juggling a large caseload with multiple students in different schools in her district. She travels constantly, and has two kids at home who demand her attention when she gets off work.

Problem Statement - Persona 2
Gabriel (11 year old boy, his older sister is blind)

  • How might we help Gabriel learn more about his sister’s life in a way that plays into his existing interests?

Read More About Gabriel

Gabriel’s older sister is blind, and he is reaching an age where he is starting to be actively curious about the world around him. His parents want him to get to know how his sister navigates her life and learns new things, so that the two of them can share a closer bond. He watches video on YouTube Kids, plays Minecraft with his friends, and is developing an interest in old school / retro video games.

Problem Statement - Both Personae
Or anyone who might be interested in learning Braille

How might we help ANYBODY learn more about Braille in a way that doesn’t feel like school or a burden on their time?

Read More About Any Curious User

Generally speaking, people know about Braille and have a vague idea of how it works. But by and large, sighted people don’t know the Braille alphabet or how the dots in a Braille cell are constructed, and how words or numbers are written - - our user interviews reinforced this. Some sighted people work tangentially with Braille spaces - like architects and facilities managers who need to install ADA accessible signage in their buildings. But because they were never taught this in school, they are left figuring it out on their own.

Prioritization:
Finding the intersection between casual and serious users

Edtech lies at the intersection of this Venn diagram. We would aim to develop a learning platform that could be sold to schools or institutions, providing real value a wide variety of users. Solidifying an experience that is both functional (multi-touch input for actual Braille typing) and accessible (for both screenreader and low vision users) is essential.

Feature Roadmap:
Start small, but get it right

We would build out the full learning experience -from lesson instruction to testing your knowledge, establishing a pattern for learning new letters and practicing to type them.

At the same time, the scope of this project needs to be appropriately narrow so that its mechanics can be fine-tuned and solidified. We should start with just a few letters and test that approach with users to make sure they enjoy themselves and are actually learning.

Audio or haptic feedback would be a nice to have, as that can help immerse the user in the world and provide an additional layer of accessiblility too.

Read the Full Feature Roadmap

Branding pt. 1:
Mood board

This was a very fun portion of the project, as we managed to get an old Macintosh 8 emulator running. Comparing modern UI flows to old school games like Microtype, Oregon Trail, and Super Munchers was a real treat.

Sitemap, User, and Task Flows:
Blueprints for Braille learning

Our sitemap functions as a top level overview of the menu structure; we got into the nitty gritty details in the user and task flows (below)

Our user flow takes that sitemap and shows in more detail how each screen will move into the next.

Our task flow is threefold. The end of one feeds directly into another, and showcases a full lesson from start to finish.

Branding pt. 2:
Logo Design

We decided early on that our hero character would be a living, moving Braille cell. We played with phrases like "Dot Quest" or Dot Wizard" before leaning into Braille puns.

  • Brailleyard (Railyard) - Trains?

  • Braille Runner - Trail Runner

  • Braillebird (Jailbird) - Convicts? Birds?

  • Braillepolish (Nailpolish) - Nail Salon?

  • Light Braille (Light Rail) - Also trains?

  • Braillestorm (Hailstorm) - sounds cool. What does it mean?

And the winner is…..

We settled on Braillerunner for a few reasons:

  • The play on "trail running" was just irresistible. As an added bonus, it reminded us of Temple Run and the fast-paced mobile games of the early 2010s.

  • The 90s retro nostalgia aesthetic also caters to both our target personas:

  1. Current teachers of the visually impaired like Magdalena in their mid-30s to 40s who learned to type in the 90s on blocky, pixelated programs.

  2. Modern elementary school kids themselves, whose popular media also includes a modern resurgence of the lo-res, old school game aesthetic (found in games like Undertale and Minecraft).

Low/Mid Fidelity Prototyping:
Keep it legible

Click the image to view a pdf of the 16-step flow

We built a 16-screen mid-fidelity prototype to test the Braillerunner tutorial flow with a small focus group, aiming to identify major UI adjustments before finalizing the first full lesson.

Findings

  • Readability needed improvement. Our body font Helvetipixel's single weight and small size reduced legibility. It was also noted that using color alone to emphasize words wasn’t sufficient; adding a bold weight was recommended to strengthen hierarchy and clarity.

  • Content felt dense. Several screens contained too much text and needed to be shortened or split.

  • Title typography worked. Users responded positively to the Born2bSporty display font.

The Most Significant Takeaway

Readability is non-negotiable, especially in accessibility-focused products.


We replaced Helvetipixel with Atkinson Hyperlegible Next, a font designed in partnership with the Braille Institute specifically for low vision users. It improved clarity immediately and reinforced a core principle: accessibility and strong visual design go hand in hand.

High Fidelity Prototyping:
Dialing in the visuals

With valuable feedback from initial testing, we could now begin designing our High Fidelity Prototype.

A few scenes from the high fidelity prototype.

Our high fidelity prototype contained three discrete flows, which would be tested one after the other in succession.

  1. The Tutorial would get the user up and running, teaching them Braille history and acclimating them to the mechanics of Braille typing on the phone screen.

  2. Lesson 1 would teach the user how to type three letters - A, B, and C - on the Braille keyboard. They would learn to visually identify those letters by their position in the Braille cell, and then practice typing them on the Braille keyboard using 6-dot input.

  3. The Braillerun would be a competitive, fast-paced exercise where the user then types full words using the letters they just learned.


UI Kit

Our final UI kit expands upon the style guide, including revised fonts, colors, our full library of hero character assets, as well as additional icons, components, and graphics.

Audio Kit

We also composed original music and sound effects for Braillerunner in a 90s video game / chiptune style. This music was created in Logic Pro X using a the ES2 synth, Arturia Microfreak, and a Game Boy sound sample pack. You can explore those sounds below.

Braillerunner Theme Song

0:00/1:34

Success Sound

0:00/1:34

"Uh oh!" Sound

0:00/1:34

Usability Testing:
Clarify "success," and speed up the pace

Panel Size

5 Participants

We tested Braillerunner with 5 people including: Two teachers of the visually impaired, one elementary school music teacher, and two fluent foreign language speakers.

Mode

20-40 minute usability tests

We tested the Tutorial, Lesson 1, and Braillerun task flows. Once refined, these same flows can be replicated for future lessons that tackle the full Braille alphabet, punctuation, and contractions.

Findings

Positive Impressions

All five users responded positively to the nostalgic 90s arcade aesthetic, finding the app intuitive and enjoyable to use. Multiple testers also identified broader applications, including use for people with progressive vision loss (2 users) and opportunities to engage sighted family members and educators.

Areas for Improvement

Two users found typing feedback unclear or too slow, and one suggested stronger button press states. One user also strongly advocated for competitive features, while another expressed interest in a reward system to increase engagement.

Summary & Recommendations for Iteration

Clarify success states with more obvious visual feedback and improved button interactions, and add competitive and reward mechanics to drive motivation. In future iterations, explore a prototyping tool that supports multi-touch input for a more authentic Braille typing experience, along with minor copy refinements.

Read the Full Report

Iterations:
User rewards and eye candy

26 Screens added. Most are interaction-oriented to give the user a clearer picture of how their button presses impact the experience.. We also added are coin/reward screens (after each lesson), and a checkered flag style countdown before the Braillerunner Race begins.

Added a Coin / Token Reward System

Each coin is called a Louie (named after Louis Braille). I was inspired by Canadian currency here - loonies and twonies.

Original

Note the new hamburger menu (top left), new coin counter system (top right), and additional stroke around pressed buttons which makes them easier to see.

Braillerun / countdown timer added

Two users were surprised that the Braillerun started so quickly - so we added a "checkered flag" racing-style 3-2-1 countdown to get the users ready for their speed-based typing run.

Read the Full Iterations Report

Final Prototype

Our full prototype takes into account the changes recommended during user testing, and represents the complete introductory experience to the world of Braillerunner.

You can explore the final prototype by clicking here.

Next Steps

Now that the game flow has been established and its fundamental mechanics thought-through, we will sort out the multi-touch input problem before developing additional modules. We're also looking for collaborators, game designers, and visual artists to take Braillerunner to the next level!