Concept
Word games like Wordle and Contexto tell you how close your guess is but that feedback is just a number or a color. Bullseye makes it these guesses spatial, something easier to visualize.
Every word you type is run through a semantic embedding model and lands on a dartboard proportional to how close it is in meaning to the hidden target. Synonyms cluster near the center. Unrelated words miss the board entirely. Anchor words help you get closer to the target. By the time you find the word, the board has mapped around the concept you were circling.
How can guessing words be visualized for their semantic distance?
Ideation
The core idea was to create a game that visually spaces the word at a distance of its similarity to the target word.
The target word remains in the middle and consecutive guesses will be displayed on the board by its "closeness" or similarity to the words on the board.
The words have a semantic distance that would be recorded using a sentence embedding program.
Sketched wireframes of the semantic distance properties
The metaphor:
One consideration was the metaphor to easily convey the concept. This was important to help visualize the more hard-to-conceptualize concepts of semantic distance.
Explored metaphors included:
-
Islands that grow for each word and form bridges for new words.
-
Constellations that map a shape
-
Dartboard where darts are placed in a distance to eachother (this was the final selection).
Initial sketches using an island metaphor
Build Process
Building the Semantic Distance Logic:
I created a Semantic Profile for each word, which determined a "distance" to each anchor word.
In order to measure semantic distance, I used OpenAI's Sentence Embedding API, which is a calculator which determines the distance between two words across multiple dimensions of semantic meaning. Using the API allowed for real-time calculations of live guesses.
Once the distance was determined, then it could be drawn onto a specific point on the screen. Further, the sensitivity of the distance formula had to be tweaked to adjust the sprawl of answers being placed too close and too far from the center. For a dartboard, this distance would have to fall within the board for close answers and off the board for far answers.
Semantic Profiles for "elan" and "finesse", which output a distance to each anchor word.
Iteration using the constellation metaphor;
in this version, items are sprawled too closely to the center.
Iteration using the constellation metaphor;
in this version, items are sprawled too far apart and leave unnatural space in the middle.
Dartboard concept was eventually settled on via p5.js library by 23paduchowskim
Final concept, given a muted and textured treatment
Results
Dartboard concept, where close answers cluster on the board and wrong answers fall off the board.
Reflections
The hardest part wasn't the semantic calculation, it was actually finding the right metaphor. Semantic distance is an abstract concept, and the metaphor is intended to make that abstraction easier to conceptualize. Moving through different concepts helped solidify the final design as a dartboard. The dartboard makes the distance physical and appropriate. Close in meaning means a dart flies close to center. Far away words means you've thrown wide. The metaphor is not just that its decorative, but visualizes the feedback intuitively.
The second challenge was remembering that it was supposed to be fun. When getting deep in coordinate math and API logic, playfulness is easy to lose. Most of what makes the final product feel alive actually came from small decisions made later, including the sound of a dart throwing, the "saloon" branding, the way the board fills up, and the sound bytes when a bullseye is thrown. None of these changes were in the main architecture, rather they were layered on top, and it changed the output entirely to become playful.