Crafting Letter Brew—A Fresh Approach to Wordplay
UX/UI, IxD, Identity / Branding, Animation
As TED Games expanded its mission to make ideas playable, I led the UX and design for Letter Brew, shaping an existing game mechanic into a word puzzle that sparked curiosity and play. The challenge was making it feel natural and rewarding within a simple, resource-conscious framework.
50+ countries engaged
15+ minutes/session
50%+ player retention
New puzzles daily
The goal was to craft an experience that embodies TED’s mission, using intuitive gameplay and striking design to ignite curiosity
Exploring Intuitive Interactions
In the early design phase, we explored interactions inspired by alchemy, experimenting with gestures, movements, and letter manipulation for intuitive mechanics. The first phase featured three word ladders to be solved in any order, allowing players to jump between them. The challenge was creating a setup that worked seamlessly across mobile and desktop, keeping the screen clean while ensuring flexibility and ease of use.
Here are the options we explored in our “playground” for testing interactions. The black dot in one of the bento boxes represents an idea for a tap-to-feedback helper, which later became part of the navigation.
Three phases, each with its own twist
Word Ladders
This phase features three word ladders, each of which must be solved before progressing. Players can tap on any ladder, which will expand to provide more space for working on the word. As players progress, the cup starts filling up. Once the final word is solved, an animation pulls the last word from the ladder and overlays it atop the cup.
Transformations
Once all the word ladders are solved, the words carry over to the next phase, where you’ll pair each with a transformation displayed on the beakers. Together, these clues will guide you to the final transformation.
The user here is using a clue to place one of the words in the correct beaker and then placing the last two manually.
Schematic showing the pouring action that we ended up, excluding in the final execution.
The final transformation
For the final transformation, you’ll use the work you’ve completed so far to arrive at the last word, which is entered at the top. If correct, you’ll be taken to the stats screen, where you can see how many clues you used and how long it took.
Once the final transformation is completed correctly, the keyboard disappears, and takes the user to the share and results screen.
These screens are showing the flow of guessing the final transformation. If the user gets it wrong it shakes on the letters drop to reset.
The users stat screen and share asset.
First design explorations
This section shows early design directions with two different perspectives. One is a top-down view with simple, clean elements, while the other is a side view set in an alchemy lab.
The Elements
The game has a minimalist top-down view of a Petri dish where players add different substances using a dropper. As they mix, colors shift to show the effects of alchemy happening. The design keeps things simple and focused, encouraging experimentation, while the color changes bring the transformation process to life.
Alchemy Lab
In this direction, the game is set in an alchemy lab with beakers and liquids. Players mix substances, triggering a range of reactions, such as bubbling or color changes. The design focuses on providing clear, consistent feedback for each combination, creating an engaging and visually satisfying experience. The lab setting encourages experimentation, with players observing how the materials interact and react in a controlled environment.
Final Designs
The design embraced a clean, modern aesthetic that balanced elegance with approachability. Subtle animations and transitions reinforced the alchemy theme, making word transformations feel magical yet intuitive. Every screen was crafted to maintain focus, ensuring players could engage deeply with the puzzles without unnecessary distractions.
The Ted games landing page.
The onboarding flow with a clean, monochrome design.
Designs for the first phase of word ladders.
The state of actively working on one of the word ladders with one letter selected.
Phase 2 challenges players to match the words carried over from the solved ladders with their corresponding transformations, guiding them toward the final transformation.
This state illustrates all transformations in place, prompting the user to input the final transformation for validation.
