CHALLENGE 01
Designing for a Circular Display
Unlike rectangular screens, a circular display offers uneven space for content. The changing width makes it harder to arrange text, controls and navigation while maintaining a clear visual hierarchy. The challenge was to make effective use of the circular space without compromising readability or usability.
Solution
I built a layout system around the display's geometry, defining consistent areas for navigation, content and controls. The main menu follows the circle, while settings use layouts adapted to their content. A centered typography system keeps text readable and the hierarchy consistent, without forcing every interaction into a circular pattern.
Try it yourself: press ‹ or › on the remote to move around the ring.
The prototype, cycling through the main menu.
CHALLENGE 02
Readability from a Distance
The clock sits on a shelf or a nightstand and is viewed from across the room. It behaves more like a TV than a phone, so the state of the screen has to read at a glance.
Solution
A dark interface with bright white active states. Only the element in focus lights up, and the center label is large enough to read from the sofa.
The focused item gets a white edge and icon. The label sits large in the center.
On a control screen, the active control is the brightest thing on the screen.
CHALLENGE 03
Back Navigation Without a Dedicated Button
The remote and its key mapping were fixed. While mapping the flows, I found a gap in them. On ring screens the up and down keys are free, so they take you back a level. On final screens, like a selection or a keyboard, all four directions are already busy controlling the screen, so there was no way out.
Solution
I raised it, and we added an on-screen back button to final screens only. It sits at the bottom of the circle, in the same place every time, and turns white when it has focus.
Focus on the setting
‹ › change the value, and up and down move between the rows.
Focus on back
Every key is already in use, so back lives on the screen, in the same place every time.
Flow Example
Controlling the sound, from the clock face to a setting and back. Select a step to jump to it in the recording.
CHALLENGE 04
Building a Consistent Interface System
The brief described every setting as its own one-off screen, from toggles to schedules to number values. While mapping them, I noticed that most followed the same few interaction patterns. Instead of designing a unique screen for every feature, I grouped them into a small set of reusable screen types. This simplified the interface, made the experience more predictable and kept the system consistent.
Free layout in practice
CHALLENGE 05
Text Input Inside a Circle Interface
The first input concept used the circular ring for typing, but scrolling through many characters made text entry slow and tiring. A keyboard layout was chosen instead, adapted to fit the circular display while keeping the keys readable and easy to navigate with the remote.
First concept: ring typing
Letters and digits around the ring. With 36 characters, reaching one takes about 9 steps on average and up to 18. On the keyboard it takes about 4 to 5.
Final: keyboard
A familiar QWERTY layout fitted to the circle. The remote moves across the keys in every direction.
Impact
The previous system had reached its limit. The ring could hold six or seven categories at most, written out as text, and settings were stacked inside one round screen until it was full. Every new feature had to squeeze into a space that no longer had room. The new structure removed that ceiling. The ring holds icons with the focused item named in the center, and every setting has its own screen, so the menu can take far more items than before and rarely needs to, because each area is split into smaller pieces. My part was the interface that carries it: one ring pattern for every level and a small set of screen types, so new features have kept arriving within the same system.
Before
Category names around the ring, and several settings stacked on one screen.
After
Icons on the ring, the item in focus named in the center, and one setting per screen.