Creating CLOQ: A Colorful Time Display for PICO-8

The concept

Traditional digital clocks prioritize numerical precision over visual aesthetics and glanceability. Many users find themselves staring at abstract numbers, struggling to quickly gauge the passage of time. This creates a disconnect between how we naturally perceive time and how we interact with our digital devices. I saw an opportunity to reimagine the humble clock as a more intuitive, colorful experience that could convey time information at a glance through visual patterns rather than digits.

My Role

As Lead Designer and Developer, here's what I did:

• Conceptualizing the visual time display system
• Creating multiple design iterations based on user feedback (me)
• Programming the application in PICO-8 using Lua
• Guerilla testing concepts with friends and family to optimize readability
• Designing multiple themes and interaction models

Process

Concept Development

The project began with a simple idea: represent time as a visual pattern of colors and shapes rather than numbers. I explored several different approaches, starting with a simple model where hours were represented as tall bars and minutes as small squares, each with distinct colors.

I created wireframes showing different states of the clock in AM and PM modes. These early concepts established the core visual language - using position, color, and shape to indicate time.

Iterative design

Working with PICO-8's limited 16-color palette created an interesting design constraint. Rather than viewing this as a limitation, I embraced it as an opportunity to create a distinctive retro aesthetic that would resonate with users.

1. Classic CLOQ: A minimalist design with different color hour bars and colorful minute squares. Featuring AM (light mode) and PM (dark mode)
2. Rainbow Mode: Using color gradients to show time progression
3. TV Time: Inspired by SMPTE color bars used in television broadcasting

As I refined each concept, I continuously tested with to gauge readability and intuitiveness, resulting in improved iterations.

Technical Implementation

Programming CLOQ in PICO-8's Lua language presented unique challenges. Key technical features I implemented included:

• Accurate timekeeping using PICO-8's internal timer
• Animation systems for smooth transitions between states
• Dithering effects to show progression through minutes
• Custom input controls for setting and adjusting time
• Different display modes (AM/PM) with distinct visual behaviors

The most challenging aspect was creating an intuitive dithering system that would visually indicate the progression through minutes, giving users a sense of time passing.

Challenges & Solutions

Readability vs. Aesthetics

Finding the right balance between visual appeal and practical usability was difficult. Early designs were beautiful but hard to read.

My solution was to create a modular system with clear units (each hour bar, each minute block) while using color to provide additional context. I introduced dithering that visually showed transition between time states, making it easier to interpret at a glance.

limited color palette

PICO-8's 16-color limitation initially seemed restrictive, but I turned this into a strength by creating a coherent color language where specific colors consistently represented specific time values.

For the TV Time variant, I adapted the recognizable SMPTE color bar pattern to work within these limitations, creating a nostalgic yet functional design that was immediately recognizable to anyone familiar with broadcast television.

Comprehension

Teaching users to read time in a new way was perhaps the biggest challenge. I addressed this by:

• Creating an interactive tutorial that explained the visual system
• Adding helpful text that could be toggled on/off
• Using familiar patterns where possible (left-to-right reading direction for AM, right-to-left for PM)
• Designing minute blocks in groups of 4 (5×4=20 per row) for easier counting

Results

The final CLOQ application successfully reimagined how time can be displayed and interpreted. Users reported that after a brief learning period, they could quickly glance at the display and understand the time without having to count or read numbers.

Key achievements included:

• Development of multiple visual themes, each with distinct personalities
• Creation of a new time visualization paradigm that balanced aesthetics and function
• Successful implementation within PICO-8's technical constraints
• Positive user feedback on the satisfying visual experience of watching time pass

My Impact

This project demonstrated my ability to:

• Reconceptualize familiar interfaces in novel, user-friendly ways
• Work within technical constraints to create elegant solutions
• Iterate based on user feedback to improve designs
• Balance aesthetic considerations with practical usability
• Implement complex visual systems using limited technical tools

The CLOQ project shows how thoughtful design can transform even something as mundane as a digital clock into a more intuitive, aesthetically pleasing experience that better aligns with how humans naturally perceive time.

All of this to say is it was a fun way to make something unique and I hope to get the PICO-8 file for TV TIME up on Itch soon