The Emoji Compass

¯\_(ツ)_/¯, 2018-2019

Ask emoji questions. Get emoji answers.

"Truth can be hard to divine, but emoji can guide you on your path. Powered by celestial Dust and earthly React, the Emoji Compass app will answer any question you can pose it. Simply set its three compass needles to the emoji that best express your query, and watch in awe (or impatience, possibly) as the compass provides you with your answer."

The Emoji Compass is an app that offers a working version of the golden compass from Philip Pullman's His Dark Materials trilogy, except the symbols on the edge of the compass are emoji. It is a Bad Idea Factory project, and is available in an app store near you.

Play with the emoji compass ↝ here ↜.



The MVP we were aiming for was a simple flow from a home screen where the user poses their question (by selecting three emoji symbols from the compass) into an answering screen where they could ponder the meaning of the emoji they received in return. For me, a key UX question was the arrangement and interaction design of this second screen.

wireframe sketches

Initial wireframe sketches exploring different ways of communicating the six symbols and their meanings

higher fidelity wireframes

Higher fidelity tests of preferred layouts

higher fidelity wireframes

Final configuration

This solution minimized the explanatory text, both in terms of screen real estate and visually, allowing it to fade into the background when users become familiar with the app. It also allows for exploring the meaning of symbols in both question and answer.

UI/Visual Design

emoji compass app flow diagram


The user poses a question through three emoji

The compass chooses its answer

Pondering the meaning of the symbols


compass hands

The compass -
the backplate is based on 16th century astrolabes

compass needles

Compass needle variations -
referencing 19th century pocket watches

backgrounds - oxford backgrounds - the north

Backgrounds -
Oxford and The North


App icon


Lead Developer: Lou Huang

Bad Idea Guy: Matt Stempeck

Design: Margo Dunlap

Accomplices: Dan Schultz & Chris Peterson