#Product 01-01 Retro Desk Clock PWA — The First Clock App Lab Prototype

Clock App Lab’s first prototype is a small retro-style desk clock built as a PWA experiment.

The goal is simple: create a clock that feels warm, useful, and easy to keep on a desk or phone screen. This first version focuses on a two-panel flip-clock design, light and dark modes, a minimal two-dot toggle, and a layout that can later grow into a mobile-friendly installable web app.

The first project in Clock App Lab is a small retro-style desk clock.

It is not a large app, and it is not meant to be complicated. The idea is to start with something familiar: a clock that can sit on a desk, stay open on a phone, and feel useful without asking the user to think too much.

At first, I thought a clock app would be too simple. But the more I worked on it, the more I noticed that even a small clock contains many design decisions. How large should the numbers be? Should the display feel like a digital LCD panel or a flip clock? Should the dark mode simply turn the background black, or should it feel like a real backlight in a dark room? Should the mode switch be a normal toggle button, or should it be something smaller and quieter?

For this first version, I wanted the clock to feel like a small object rather than just a screen layout. The design is based on a retro desk clock shape, with a red outer body, a cream front panel, and two large display panels in the center. The left panel shows the hour, and the right panel shows the minutes. I originally tried to build the display as four separate digit panels, but that started to look unnatural. A real clock usually feels more unified than that. So I changed the structure to two larger panels: one for the hour, one for the minutes.

That mistake became useful. It made me realize that small UI details can change the whole feeling of a product. When each digit moved separately, the display felt too technical. When the hour and minute panels were grouped, it immediately looked closer to a real object.

Another important part of the design is the flip animation. I wanted the numbers to change with a subtle “flip” motion from top to bottom. This is not just decoration. If the number simply changes instantly, it feels like ordinary text. If the animation is too slow, the hidden layers become visible and the illusion breaks. The final direction is to keep the movement short and quiet, so the clock feels alive but not distracting.

The light and dark modes are also part of the product idea. In light mode, the display uses a deep gray-green LCD tone, close to the feeling of an old digital clock. In dark mode, the panel changes to a warm neo-orange backlight. The goal is not just to make a dark theme, but to make the clock feel like it belongs in a dim room. A clock on a desk at night should not feel like a bright web page. It should feel like a small object giving off a soft light.

The mode switch is intentionally simple. Instead of a large switch with labels, this prototype uses two small dots under the display. The left dot is for light mode, and the right dot is for dark mode. There is no explanation text on the screen. I wanted the clock itself to stay clean. If a user needs a paragraph of instructions to use a clock, the design is probably too noisy.

The right side of the clock includes a small Z-style logo and the word “CLOCK.” This is not meant to make the product look like a heavy brand page. It is just enough to make the prototype feel like part of a small product series. Clock App Lab will probably continue with other clock, timer, and PWA experiments, so the first product needs a simple identity.

This prototype is also a good starting point for learning PWA development. A clock is small enough to understand, but it can still include many useful web app topics: responsive layout, installable app behavior, offline support, local storage, dark mode, motion design, and possibly ambient light detection. That makes it a useful project for writing development notes, not just a visual demo.

The next steps are clear. First, the clock needs to work well in both portrait and landscape layouts. Portrait mode should feel like a small mobile app. Landscape mode should feel more like a desk clock that can stay open on a phone. After that, the project can move toward PWA files such as manifest.json, icons, and a service worker. I also want to test how it behaves when added to the home screen on Android and iPhone.

This first product is intentionally small. But that is the point. A small clock is a good place to practice product thinking: visual design, interaction design, code structure, mobile behavior, and real-world testing. Clock App Lab #001 is not just a clock. It is a first step toward building small, useful web apps with care.