SIGNS
A mobile application that teaches Spanish Sign Language (LSE) to children aged 3–10 through interactive mini‑games, all wrapped in a space‑exploration narrative.
FEBRUARY 2025 - JUNE 2025
TIMEFRAME
2025
PROJECT
CATEGORY
PRODUCTION TIME
Mobile App
UX/UI + Front‑end
4 months
INTRODUCTION
Signs is a mobile application that teaches Spanish Sign Language (LSE) to children aged 3–10 through three interactive mini‑games—Repeat, Spell, and Hangman—set within a space‑exploration narrative.
By combining gamification, 3D‑animated astronaut models and Supabase‑powered multiplayer “rooms,” we aimed to foster both individual progress tracking and social learning.
PROJECT GOALS
General Goal
Develop an engaging, accessible app to teach all 30 letters of the LSE alphabet.
Specific Goals
● Maintain a consistent, child‑friendly visual identity
● Implement real‑time progress tracking and guest‑mode “room” functionality
● Ensure full responsiveness and WCAG‑aligned accessibility featuresÇ
RESEARCH & BENCHMARKING
We conducted a literature review on gamified learning for early childhood and benchmarked against Duolingo, ASLKids, Lingvano and PocketSign; our findings showed that bite‑sized, goal‑oriented lessons boost retention, clear visual cues like progress bars and badges drive engagement, and a hybrid approach combining 3D‑animated avatars with real‑video demonstrations maximizes both fun and learning efficacy.
UX PROCESS
PROBLEM DEFINITION
We began by framing the core challenge—designing a playful, non‑intimidating, space‑themed app to teach Spanish Sign Language to 3–10 year‑olds—via stakeholder interviews with parents and educators, a review of early‑childhood gamification literature and heuristic analyses of Duolingo, ASLKids, Lingvano and PocketSign. From this we developed two personas—Lucía (a 6‑year‑old learner who craves instant rewards and bright visuals) and Marta (a parent/teacher who values intuitive navigation, progress reports and age‑appropriate content)—and built empathy maps to capture their goals, frustrations and daily routines.
PERSONAS & EMPATHY MAPPING
Next, we mapped the primary journeys of onboarding, world‑selection, single‑player mini‑games and multiplayer “rooms,” defining a clear three‑step hierarchy (Explore Worlds → Play Lesson → Review & Share), optimizing tap counts and minimizing cognitive load.
PROTOTYPING
Finally, we translated these flows into paper sketches and low‑fidelity Figma wireframes for rapid validation before crafting a high‑fidelity prototype with Auto‑Layout and our custom design system—featuring bright yellow accents, Quicksand typography, reusable buttons, cards, progress bars and animated badges—with interactive micro‑interactions (button pops, badge unlock effects, planet‑hover states) refined in code to deliver both delight and clarity from concept through final prototype.
Signs prototype in Figma
01
DEVELOPMENT & TECHNOLOGY
APP ARCHITECTURE
Signs is built in React Native, using a hybrid Stack & Tab navigation pattern to seamlessly guide users between onboarding, world‑selection, lessons and social rooms. We rely on React Hooks (useState, useEffect) for local state and the Context API for global state—tracking user progress, current game session data and UI theme preferences—ensuring smooth, responsive performance across both iOS and Android devices.
BACKEND
Our backend is powered by Supabase, which provides instant PostgreSQL storage and real‑time subscriptions. We utilize Supabase Auth for email/password, Google OAuth and guest‑mode logins, and store user profiles, progress metrics, room states and avatar selections in structured tables. Real‑time listeners drive live multiplayer updates, while role‑based Row Level Security ensures data privacy.
3D ASSETS & MULTIMEDIA
We created a library of optimized 3D assets—rigged astronaut models animated for each of the 30 LSE letters and pre‑rendered planet scenes—exported as lightweight GIFs and WebP files to ensure quick load times. These assets are integrated via Lottie animations and WebGL placeholders within the React Native app, bringing rich, interactive visuals to young learners without sacrificing performance or increasing bundle size.
We built Signs to be fully inclusive by offering adjustable text sizes and line heights for readability, high‑contrast and color‑blind–friendly themes, and generous touch targets (≥44×44 px) to prevent mis‑taps. All interactive elements include ARIA roles and labels for screen readers, and optional audio cues with on‑screen subtitles ensure instructions are accessible to both hearing and visually impaired users.
ACCESSIBILITY
FINAL DESIGN
FIrst Screen and Join Guest Session
Log in And SIgn In
01
02
Profile
03
Custom Avatar
04
Creat Lobby
In Game Screens
01
02
Join Lobby
03
Settings
04
Lobby Screen
World and Levels
01
02
Accessibility
03
Level up and Archivements
04
FINAL DESIGN
LESSONS LEARNED
Working with a four-person team taught me the value of clearer communication between design and development, especially when defining how components should be built. I also learned to optimize tasks through better organization and to adapt when facing technical limits, such as React Native’s handling of 3D models. Overall, the project helped me balance design goals with real implementation challenges.
RESULTS AND OUTCOMES
We delivered a polished high-fidelity prototype in Figma and a working React Native build that included multiplayer rooms, animated avatars, and accessibility features. Despite time constraints and 3D performance hurdles, the app ran smoothly and achieved its educational goals. Feedback from educators and children was very positive, and the project is now ready for pilot testing as a proof of concept for teaching Spanish Sign Language.
Featured projects
Check more
works here
Exotic Animals
GRAPHIC DESIGN · APP
➔
2Éxotico
UI & UX · VISUAL IDENTITY · APP
