Hacking the terrorist timepiece
August 2022
Designing hardware interactions always feels like a compromise.
Iteration on the computer is fast and efficient, but far removed from the end context. Iteration on the hardware is a perfect representation for testing, but slowed down by tedious program-deploy-debug loops.
Digital interface design for apps and the web is easy. Packages like Figma or Xd support live on-device previews as standard. But the tools to rapidly test and iterate ideas just don’t exist for bespoke hardware applications. To fix this I’ve refined an approach to enable real-time design iteration, in context, on representative hardware.
Hardware interface design is a core part of my work. This is the story of one such project.
The Casio F-91W
In early 2022 I had a chance encounter with American engineer Joey Castillo. For the last few years, Joey has been developing a 21st century upgrade to the Casio F-91W, famous for its appeal to both hipsters and terrorists alike. Joey’s project preserves the original display, buttons and casing, but replaces the main PCB with a far more capable processor which can be re-programmed with custom apps.
The latest Apple Watch has 190,000 pixels. This Casio has just 72. When the number of pixels is measured in single digits, you make every one count. This infamous timepiece is the perfect design tool for experimenting with the limitations of minimal hardware interfaces.
Design ideation bounded by physics, not engineering
The Casio watch comes with three buttons, a small grid of LCD segments, and a set of well-established mental models for switching modes and modifying values. The UI complexity sits between the dedicated, single-action controls of Bluetooth headphones, and the more advanced screen-and-buttons combo of modern smart home appliances.
Three buttons isn’t much. Seemingly trivial concepts like “back” or “cancel” can be particularly challenging to implement. Joey had already created a set of UX paradigms for watch face sequencing, but I wanted to step outside these engineering constraints to explore something totally new.
Good design ideation is bounded by physics, not by engineering. In other words, the only technical limitation on ideas is to ensure they’re feasible within the confines of today’s science.
Brainstorming like this is a sweet spot between maximising near-future opportunities whilst minimising the potential for time-wasting follies. Engineering constraints like power consumption, packaging or cost are saved for later, or might simply fade away as the concept iterates in a different direction.
In spring 2022 I set up a collaboration with master’s students from TU Delft University. The brief was to create new experiences for a modern take on the F-91W. We explored users and use cases far outside the norm, focused on contexts where the unique affordances of wrist-based interactions were accessible and relevant.
Experience prototyping
- uses the actual I/O hardware (buttons, screen, LEDs)
- adjusts to design changes in real time
- is physically representative to support testing in context (weight, form factor…)
To enable the fastest possible experience prototyping, I built my own real-time design & simulation tool for the Casio watch. The tool has two components:
-
Browser-based designer
This defines all of the interactions and UI. It runs in the browser, using the Web Bluetooth API and a set of custom JS libraries for continuous auto-save and a full undo history.
You can try it here: https://watch.interactionmagic.com/
-
Device hardware & firmware to render the UI
The watch firmware continuously renders the UI design from the browser. It also relays back button presses. To do this an nRF52840 BLE Arduino sits on the watch strap as a bridge between the browser and Joey’s watch hardware.
This approach adopts three of my prototyping principles:
1. Intelligence in the dashboard, not the device
I can push a new feature to the web-based animator from anywhere in the world. To update something on the watch I must physically remove it from your wrist. Where possible, build all intelligence for tasks like event sequencing and animations in the cloud. The hardware continuously reads in short strings of bytes to render the UI state.
A simple example is button press handling. It’s initially tempting to write a short script on the watch to capture button pushes and fire back events for single, double or long presses. Don’t. Instead, read out every press and release and run the event detection logic in the browser. This way, tuning a hold timer or adding advanced triggering such as triple-clicks doesn’t require access to the hardware and a whole new firmware build.
2. No-code skin, text file beneath
When designing custom tools, build just enough UI to make experimenting fast. For anything more complex, you can edit a text file.
My first step is always to build the animation & logic engine. Then I use the FileReader API to enable import/export of a JSON representations of the whole state. As the project evolves, in-browser UI editing tools can be added incrementally on top.
Deadlines are tight and I’m always fighting between improving the design tool and iterating the design itself. This approach means that edge cases like drag-n-drop re-ordering or global find & replace can be skipped. Editing the text file acts as a polyfill, saving the development time of rarely used features.
3. WYSIWYE: What you see is what you experience
The faster you can experience the design in context, the quicker you can answer the question “does this feel right?”. Priority one is reducing iteration time, priority two is adding context (priority three is everything else). At all times, the UI in the browser should be a direct mirror of the UI on the device.
Select an LCD segment on the laptop and it illuminates on the watch. Press the watch’s mode button and it visually depresses on the web UI. Getting these updates working in real time led to a compromise on packaging with a secondary battery and Bluetooth board taped to the watch strap. But the important points for testing in context were preserved: lightweight, wearable, wireless.
Walking around the room with the watch on my wrist, updating in real time from a laptop controlled by the students in the corner was pretty fun.
A new life with Casio
Student concepts were a mix of serious, inventive and whimsical. A weather app built only with animated clock segments. A diver’s watch, lie detector and venue ticketing tool. One team strapped the watch to a water bottle as a drinking reminder for their autistic brother.
Many of the designs used the unique physical layout of the display as the basis for graphics inspiration. The colon between the hours and minutes creates as an excellent pair of Tamagotchi eyes, and the central character on the top row is a convincing dollar sign.
Designing hardware interfaces is hard. But with the right tools it becomes a lot easier. If you’re struggling to test and iterate your own interface concepts, or you’d like to have a play with these Casio watches yourself, then get in touch.
