#Product 01-07 Testing the Retro Clock PWA on Android and iPhone

For Clock App Lab #001, the final step in this first round is testing the clock on real phones. A PWA can look good in a desktop browser, but the real question is whether it feels useful on Android and iPhone. This note focuses on portrait mode, landscape mode, home screen launch behavior, saved light/dark mode, and whether the clock feels like a small desk object rather than a normal web page.

In this seventh note for Clock App Lab #001, I want to focus on real device testing.

Until now, most of the work has been about building the clock itself. I designed the retro desk clock look, tested the two-dot light and dark mode switch, changed the display from four separate digits into two larger panels, added a short top-to-bottom flip animation, tested ambient light ideas, prepared the PWA file structure, and looked at how the clock could be added to the home screen on Android and iPhone.

But a PWA is not finished just because it works in a desktop browser.

A clock app especially needs real device testing.

The reason is simple: a clock is meant to be used in a physical situation. It may sit on a desk. It may be opened on a phone beside a bed. It may be used in portrait mode while being held, or in landscape mode while placed horizontally. These situations cannot be fully checked on a desktop screen.

So the next step is to test the Clock App Lab prototype on Android and iPhone.

The first thing I want to check is the launch feeling.

When the clock is opened from the home screen, does it feel like an app? Or does it still feel like a web page? This is an important difference. If the clock opens with too much browser UI, the illusion becomes weaker. If it opens cleanly and quickly, it starts to feel more like a small tool.

This matters because the whole design is trying to make the clock feel like an object. The red body, cream face, two display panels, small dot controls, and warm backlight mode are all part of that direction. If the launch experience feels rough, the visual design alone is not enough.

Before writing down the final device notes, I made a small reference implementation to organize what should be checked during testing.

The second thing I want to test is portrait mode.

Portrait mode is probably how many users first open the clock. It needs to look clean on a narrow screen. The clock body should not feel too small, but it also should not overflow. The numbers need to be readable, the two dots should still be easy to tap, and the clock should not require unnecessary scrolling.

For a normal web page, scrolling is acceptable. But for a clock app, scrolling feels strange. A clock should stay in one clear view. If the user opens it and immediately has to adjust the screen, the app feels unfinished.

The third thing to test is landscape mode.

Landscape mode may be even more important for this project. When a phone is placed horizontally on a desk, the clock should feel like a real desk clock. This is where the retro design has the strongest purpose. The wide clock body, large time panels, and small controls make more sense in landscape.

If landscape mode works well, the PWA becomes more than a simple mobile page. It becomes something the user can actually place on a table.

This is also where the light and dark modes need to be checked carefully.

In light mode, the clock should feel comfortable in a bright room. The gray-green panels should be readable, and the black digits should have enough contrast. In dark mode, the warm orange backlight should be visible without becoming too bright. If the dark mode is too strong, it becomes uncomfortable at night. If it is too weak, the clock becomes hard to read.

The goal is not to make the screen flashy. The goal is to make it feel calm.

Another important test is whether the selected mode is remembered.

If I choose dark mode, close the app, and open it again, the clock should still be in dark mode. This small detail makes the PWA feel more reliable. A clock is a simple app, but simple apps still need memory. If the user has to repeat the same setting every time, the app feels less useful.

This is why local Storage is useful for this prototype. It allows the clock to remember small preferences without needing an account, database, or server.

I also want to test how fast the clock appears.

A clock should not feel heavy. It should open quickly. It should show the current time almost immediately. If the app takes too long to load, it loses its purpose. This is one of the reasons I want the first version to stay small. The fewer unnecessary files and effects, the easier it is to keep the experience fast.

Offline behavior is another point.

If the PWA has a service worker and basic files are cached, the clock should be able to open even when the network is weak or unavailable. This does not mean the first version needs complex offline logic. It only needs to load the app shell and display the clock. For a small clock app, that is enough.

The icon also needs real testing.

An icon can look good in a large mockup but become unclear on a phone home screen. The Clock App Lab icon should be simple, readable, and recognizable at a small size. A red retro clock shape or a simplified clock face may work better than a detailed illustration. The icon should match the app, but it should not be too busy.

The app name under the icon also needs to be checked.

“Clock App Lab” may be good for the project, but it might be too long under a home screen icon. A shorter name like “Clock Lab” may work better. This is a small detail, but small details matter on a home screen. If the name is cut off awkwardly, the app feels less polished.

Real device testing also helps reveal spacing problems.

On desktop, a layout can look balanced. On a phone, the same layout may feel too tight. The area around the clock, the distance between the display and the dots, the position of the brand mark, and the size of the panels may all need small adjustments.

I do not want to change the design too much at this stage. The visual direction is already close enough. But the final spacing should be decided by actual use, not only by looking at a browser preview.

Another thing to check is touch comfort.

The two-dot toggle looks good because it is minimal. But if the dots are too small on a real phone, they may be hard to tap. The visible dot can stay small, but the actual button area can be larger. That way, the UI still looks quiet while remaining usable.

This is a common mobile design issue. What looks elegant visually can sometimes be too small to touch. A real phone test makes this obvious quickly.

I also want to check the flip animation on mobile hardware.

The animation should be short and smooth. If it feels heavy or delayed, it may need to be simplified. The flip effect is not the main function of the clock. It is only there to give the time change a small physical feeling. If it hurts performance, it should be reduced.

This is an important rule for the project: the clock should stay useful first.

Visual effects are only valuable when they support the feeling of the product. If they become distracting, they should be changed.

After testing on Android and iPhone, I expect to find small differences. The browser behavior may not be exactly the same. The install flow may feel different. The standalone display may not match perfectly. The safe area, screen height, and orientation behavior may need different handling.

That is normal.

The purpose of this step is not to prove that everything is finished. The purpose is to find what needs to be adjusted before calling the first version stable.

Clock App Lab #001 is still a small prototype, but this testing step makes it feel more real. It moves the project from “a nice web demo” toward “a small app that can actually live on a phone.”

That is the difference I care about.

A clock does not need many features. It needs to be readable, stable, fast, and calm. It needs to open when the user taps the icon. It needs to remember the last selected mode. It needs to look good in portrait and landscape. It needs to feel comfortable during the day and at night.

If those basics work, the first version is already useful.

The next step after testing will be to write down the actual results: what worked on Android, what worked on iPhone, what felt strange, and what needs to be fixed. That kind of note is important because real device testing often teaches more than the first implementation.

For now, #Product 01-07 is the checkpoint.

The visual prototype is ready enough.The PWA structure is prepared enough.Now the clock needs to be opened, placed on a desk, rotated, closed, reopened, and used like a small real tool.

That is where the design finally becomes practical.