Back

Rainbrow

Eyebrow-controlled iOS game

Recognition

Rainbrow was fortunate to receive praise from Apple and other media outlets as one of the first apps to leverage the new face-tracking technology of the iPhone X.

iPhones on display in an Apple Store with Rainbrow
Rainbrow is pre-installed on demo iPhones in Apple retail stores.
Gmae of the Day on the App Store
The App Store featured Rainbrow as "Game of the Day".
Rainbrow in Apple's WWDC Presentation 'Creating Great AR Experiences'
Apple designers showed Rainbrow during their WWDC18 presentation "Creating Great AR Experiences".
Websites with articles about Rainbrow
Rainbrow attracted media attention from Engadget, Macrumors, Apple Insider, and more.

How it works

Rainbrow uses the True Depth camera system on recent iPhones and iPads to track the user's eyebrows. When the user lifts their eyebrows, the character jumps up. When the user lowers their eyebrows, the character jumps down.

Rainbrow screenshot showing instructions
On first play, the user is presented with the basic controls.

Design process

I first built a prototype to validate the quality of the facial data. Of the available facial features, eyebrows were the easiest to control, provided a wide range of input, and made the user look sufficiently silly. 😜

Prototype app to test face controls
The first prototype using face data. The squirrel would jump between the gray lines when the user moved their eyebrows.

Starting on paper, I drew some initial ideas. Since the user's eyebrow motion is vertical, I wanted match that with vertical movement of the on-screen character.

Early designs of Rainbrow
Left: quick sketches of the basic UI layout Right: A quick mockup in Sketch

To simplify the experience, I designed the menu with the same background as the game. This provides a smooth transition into the game, and reduces the cognitive load of the user since they feel like they're in the same space.

Rainbrow menu designs
Some iterations of the main menu design created in Sketch.

Most of the design decisions were made and tested in code. Once I was able to feel the gameplay on a real device, it was much easier and quicker to iterate.

Creating the entire experience is fun because I can switch between coding, design, and art to keep things fresh.

Artwork of faces in Rainbrow
Rainbrow has over 20 playable "faces" which can be unlocked in-game.

The most rewarding part was testing the app with people and watching their reactions. Try it for yourself! The app is available for free on the App Store.

View on the App Store