TouchStone

TouchStone

TouchStone

Designing an accessible app

Designing an accessible app

TouchStone is an interactive app for those interested in learning Braille. Fueled by our shared passion for education and accessibility, we let this guide us as we designed and developed this app for Google A.I's 2024 Hackathon.

Joining a team of 5 developers, I played a key role in shaping the app's look and feel from the early stages. I was consulted later on to check on UI and usability of their prototype as well as creating a voiceover walkthrough tutorial of the app in which we submitted to Google!

TouchStone is an interactive app for those interested in learning Braille. Fueled by our shared passion for education and accessibility we let this guide us as we designed and developed this app for Google AI's 2024 Hackathon.

I joined a team of five developers in the early stages of the app's development, where I contributed to shaping the concept, enhancing usability, and refining the app's design.

My Role

My Role

Lead UX/UI Designer

Timeline

Timeline

1 Month Sprint

Methods Used

Methods Used

Wireframes, Prototyping

Sketching, Prototyping

Tools Used

Tools Used

Figma

Project

Project

Google A.I Hackathon

Inspiration

Inspiration

Inspiration

The inspiration for TouchStone lies behind a shared passion for education and accessibility, alongside our interests in language and communication. Our motivation to create a learning app for Braille stemmed from a memory shared by our peer as they reminisced about their childhood best friend, who happened to be visually impaired. Despite their differences, they formed an inseparable bond exchanging handwritten notes in Braille by poking holes through pieces of paper. The friend created an entire cheat sheet of Braille representations that they knew in order to preserve that precious connection. Within this story, and our own experiences, we realized the profound impact that accessible communication can have on fostering connections and understanding. This greatly portrayed the importance of inclusive education and the need for accessible resources for those eager to learn. We empathize with and recognize a multitude of things: the emotional journey of individuals facing the risk of visual impairment, the overwhelming feelings that come from times of uncertainty and the connection that can stem from learning. With an enhanced learning experience of instant translations of words and phrases through the integration of AI, TouchStone becomes not only a learning app for those at risk of visual impairment but also a tool to empower educators, parents and caregivers in providing effective support and guidance.

The inspiration for TouchStone lies behind a shared passion for education and accessibility, alongside our interests in language and communication. Our motivation to create a learning app for Braille stemmed from a memory shared by our peer as they reminisced about their childhood best friend, who happened to be visually impaired. Despite their differences, they formed an inseparable bond exchanging handwritten notes in Braille by poking holes through pieces of paper. The friend created an entire cheat sheet of Braille representations that they knew in order to preserve that precious connection.

Within this story, and our own experiences, we realized the profound impact that accessible communication can have on fostering connections and understanding. This greatly portrayed the importance of inclusive education and the need for accessible resources for those eager to learn. We empathize with and recognize a multitude of things: the emotional journey of individuals facing the risk of visual impairment, the overwhelming feelings that come from times of uncertainty and the connection that can stem from learning. With an enhanced learning experience of instant translations of words and phrases through the integration of AI, TouchStone becomes not only a learning app for those at risk of visual impairment but also a tool to empower educators, parents and caregivers in providing effective support and guidance.

What it does

What it does

What it does

TouchStone offers a unique and engaging way to learn Braille. Through the combined use of AI assistance and interactive quizzes, the app creates an enhanced experience that guides users through the basics of Braille, covering the representations of simple numbers, the alphabet, special characters and everyday words that are likely to be encountered.

Our interactive quiz feature includes:

  • FlashCards: Learn letters, numbers, or words, and see their correct Braille translation when you flip the card. Matching: Match six random words, letters, or numbers with their Braille translations to test your memory and recognition. Fillin’ the Braille: Apply what you’ve learned by filling in the Braille characters for specific words, letters, or numbers.

With the integration of Gemini AI in TouchStone’s search bar, you can easily inquire about the Braille translation of any word or letter. Gemini AI will provide a detailed text explanation and an image of the Braille translation, making learning both comprehensive and visually accessible.

How we built it

How we built it

How we built it

Our team of seven was composed of five developers, a graphic designer, and a UX/UI designer. I played a key role in shaping both the user experience and visual direction of the app. We began the project with a week of planning, during which I helped facilitate team discussions to establish the app’s goals, user needs, and design expectations. I led the effort in defining the user flow and overall structure of the app, ensuring we had a clear and thoughtful roadmap before development began.

From there, I designed a fully interactive wireframe in Figma to bring our ideas to life and provide a shared visual reference for the team. This prototype allowed us to test early concepts, iterate quickly, and align on core features before a single line of code was written. Simultaneously, I collaborated with the graphic designer on the apps branding. We ensured that it reflected the app’s mission: to create an inviting and empowering learning space for users exploring Braille. This involved choosing a warm and accessible color palette, defining typography standards, and creating a design system that was both scalable and inclusive.

As development progressed, the team split into front-end (React) and back-end (Django) subgroups, and I worked closely with both sides to ensure design fidelity and seamless integration of features. Throughout the project, I acted as a bridge between design, development, and research—constantly iterating, testing, and refining our work to ensure the final product was both intuitive and empowering for its users.

Our team of seven consisted of five developers, a graphic designer, and myself as the Lead UX/UI Designer. Over the course of a month long project, we followed agile methodologies to ensure flexibility and iterative progress. The first week was dedicated to project planning, where I collaborated closely with the team to establish clear goals, expectations, and guidelines for the app. We began the project with a week of planning, during which I helped facilitate team discussions to establish the app’s goals, user needs, and design expectations. I led the effort in defining the user flow and overall structure of the app, ensuring we had a clear and thoughtful roadmap before development began.

From there, I designed a fully interactive wireframe in Figma to bring our ideas to life and provide a shared visual reference for the team. This prototype allowed us to test early concepts, iterate quickly, and align on core features before a single line of code was written. Simultaneously, I collaborated with the graphic designer on the apps branding. We ensured that it reflected the app’s mission: to create an inviting and empowering learning space for users exploring Braille. This involved choosing a warm and accessible color palette, defining typography standards, and creating a design system that was both scalable and inclusive.

As development progressed, the team split into front-end (React) and back-end (Django) subgroups, and I worked closely with both sides to ensure design fidelity and seamless integration of features. Throughout the project, I acted as a bridge between design, development, and research—constantly iterating, testing, and refining our work to ensure the final product was both intuitive and empowering for its users.

Our team of seven consisted of five developers, a graphic designer, and myself as the Lead UX/UI Designer. Over the course of a month long project, we followed agile methodologies to ensure flexibility and iterative progress. The first week was dedicated to project planning, where I collaborated closely with the team to establish clear goals, expectations, and guidelines for the app. We began the project with a week of planning, during which I helped facilitate team discussions to establish the app’s goals, user needs, and design expectations. I led the effort in defining the user flow and overall structure of the app, ensuring we had a clear and thoughtful roadmap before development began.

From there, I designed a fully interactive wireframe in Figma to bring our ideas to life and provide a shared visual reference for the team. This prototype allowed us to test early concepts, iterate quickly, and align on core features before a single line of code was written. Simultaneously, I collaborated with the graphic designer on the apps branding. We ensured that it reflected the app’s mission: to create an inviting and empowering learning space for users exploring Braille. This involved choosing a warm and accessible color palette, defining typography standards, and creating a design system that was both scalable and inclusive.

As development progressed, the team split into front-end (React) and back-end (Django) subgroups, and I worked closely with both sides to ensure design fidelity and seamless integration of features. Throughout the project, I acted as a bridge between design, development, and research—constantly iterating, testing, and refining our work to ensure the final product was both intuitive and empowering for its users.

Landing

Landing

Alphabet

Alphabet

"A" Card

"A" Card

What we learned

What we learned

What we learned

Designing and developing an app to better serve a specific community such as individuals experiencing vision loss or those eager to learn Braille, presented a significant learning curve. This was our first time diving into the world of accessibility so it required extensive research into Braille’s intricate details.

As the UX designer on the Touchstone app, I played a central role in shaping an accessible and engaging design system tailored to users experiencing vision loss, as well as those eager to learn Braille. Designing for this specific community presented a unique and meaningful challenge, especially as it was our first time approaching accessibility in such a focused way. We began with research into the structure and nuances of Braille, immersing ourselves in how individuals with vision impairments interact with digital tools. This learning curve was critical in helping us move beyond standard design patterns and toward more inclusive solutions.

One of my primary responsibilities was developing a cohesive and intuitive design system that balanced accessibility with delightful UI, something that could be both functional and enjoyable to use. From thoughtful color contrasts and scalable typography to screen reader compatibility, every element was crafted with the user’s experience in mind.

Close collaboration with the software development team was key to bringing these ideas to life. Through constant communication and iterative feedback loops, we ensured the design was not only feasible but also aligned with accessibility best practices. I also facilitated usability testing sessions with real users, gathering valuable insights that helped refine our features and interactions.

This process was both technically and personally enriching. It deepened my understanding of inclusive design principles and reinforced the value of cross-functional collaboration. Most importantly, it reminded me how critical it is to design with empathy—creating tools that meet users where they are and empower them to grow with confidence.

What's next for TouchStone

What's next for TouchStone

What's next for TouchStone

Ensuring that TouchStone is fully accessible remains our primary focus for the app’s next development phase. We plan to support connectivity with portable Braille devices, enabling tactile learners to engage directly throught their smartphones.

Future enhancements for TouchStone include refining our Gemini AI with tuned models and structured prompts for more accurate responses. We are committed to incorporating Responsible AI to ensure these responses are reliable and appropriate.

Additionally, we aim to introduce a camera feature that utilizes OCR technology powered by Google AI. This will allow users to take a picture of a text document and receive instant BRaille translations. We also plan to implement image detection technology so sers can photograph objects and receive their Braille descriptions.

Our ongoing efforts will also focus on improving the accuracy of our Braille translations, ensuring TouchStone continues to meet the needs of our users effectively.

Interested in working together or looking to chat over coffee?
Shoot me a message and let's chat!

© 2024. Designed by Xuemei

Interested in working together or looking to chat over coffee?
Shoot me a message and let's chat!

© 2024. Designed by Xuemei

Interested in working together or looking to chat over coffee?
Shoot me a message and let's chat!

© 2024. Designed by Xuemei

Interested in working together or looking to chat over coffee?
Shoot me a message and let's chat!

© 2024. Designed by Xuemei