Test it on your phone, not your laptop.

Design · 4 min read

We'd been working on the visual design for a few sessions. Colour palette was locked in. Imagery was chosen. The screens looked beautiful in Figma on my laptop and on the client's iPad. Nice and clean. The colours complemented each other. The layout felt balanced. Everyone was happy.

Then the client looked at it on their phone. And they messaged me: "It looks like a bad photo filter."

They were right. The colour overlay that looked elegant on a large screen looked cheap and washed out on a 6.1 inch display. The background images lost their detail. The text was harder to read. The whole thing felt off. Same file, same pixels. Completely different experience.

Screens lie at the wrong size

Design tools like Figma let you preview mobile screens on your desktop. And that's helpful for layout work. But it's not the real thing. On a laptop, you're looking at a mobile screen that's been scaled up. Everything is bigger, sharper, and easier to read. Subtle colour differences that are obvious on a 15 inch screen disappear on a phone. Thin text that looks refined on the desktop becomes unreadable at real size. Spacing that feels generous becomes cramped.

This is why I always tell clients to install Figma on their phone and check the prototype on the actual device. Not just once at the end. Throughout the process. Every time we finish a major screen, look at it on your phone. Hold it the way you'd hold it in real life. Stand in the kitchen, glance at it while you're doing something else. That's the real test.

The Nielsen Norman Group has documented this extensively. Usability testing on the actual target device catches issues that desktop previews miss. Tap targets that are too small, text that's too light, images that lose impact. You can't evaluate a mobile app on a desktop screen and expect to catch these things.

Colour behaves differently at small sizes

This is the one that caught us. The colour palette was neutral. Soft tones, earthy, sophisticated. On a large screen, the subtle differences between the background colour and the overlay colour were visible and intentional. On a phone, they blended together. The overlay just looked like a tint sitting on top of an image. Not a design choice. A mistake.

We fixed it by increasing the contrast between elements. Darker section backgrounds, crisper text colours, and removing the overlay entirely in favour of images that naturally matched the palette. The client went back through the image library and selected photos that worked with the colour scheme without needing a filter on top. The result was cleaner, more honest, and it looked better at every size.

The lesson is that colour contrast requirements aren't just an accessibility standard. They're a practical design requirement for small screens. What passes at 200% zoom on your laptop might fail at native resolution on a phone. If it doesn't look right on the device your users will actually hold, it doesn't matter how it looks in the design file.

Make it part of your review process

If you're working with a designer, ask them to share a link you can open on your phone. Most tools support this. Figma has a mirror mode that lets you see the design at native resolution on your device in real time. Use it. Every review session, check the work on the device it's being built for.

This applies to colours, but it also applies to text size, button size, spacing, and image quality. Things that look fine at scale often don't hold up at phone size. And the sooner you catch it, the cheaper it is to fix. Finding a colour problem during design costs nothing. Finding it after development has started costs time and money.

That client's "bad photo filter" comment saved us hours. One piece of honest feedback, at the right time, on the right device. That's all it took to fix something that would have shipped wrong otherwise.

Sources
Mobile Usability Testing (Nielsen Norman Group) - Testing on actual devices reveals issues that emulators and desktop previews miss.
WCAG Contrast Requirements (W3C) - Minimum contrast ratios ensure readability across screen sizes and conditions.

Related blog posts:

Colour isn't decoration →

Your first usability test should embarrass you →

Fewer screens forced better thinking →