Fingerspelling.xyz is a browser-based app (currently only for Firefox, Chrome or Edge) that uses a webcam and machine learning to analyse your hand shapes so you can learn to sign the ASL alphabet correctly. Fingerspelling is an essential part of ASL, the primary language of the American Deaf community. It is often used for proper nouns or to spell a word you don’t know the sign for.
The app shows the user a series of words and uses a 3D model to demonstrate how your hand should be positioned for each letter. When you sign the word, the camera tracks your hand movements and provides feedback so you can make corrections as needed. This helps you to quickly develop your fingerspelling skills and move to the next level of the program.
From a design perspective, the goal was to communicate fingerspelling in the cleanest and simplest way possible. Therefore, the 3D hand is placed prominently in the centre of the site and paired with a playful typeface. Its angled glyphs have a dynamic movement that mirrors subtle visual nuances in the hand gestures, and the slightly off-kilter appearance feels joyful and engaging.
In regards to colour, the aim was to use a palette that was bold enough to draw people in and, at the same time, energise them to start learning to fingerspell. Capturing attention was key.
The 3D hand was designed to feel friendly, with enough detail for users to be able to easily see how the fingers are positioned and bent. A blend of cartoon style and realism was the perfect solution, with Labil Groteskmatching the constant hand movements.