Skip to content

When I changed the design on purpose

Abdul-Qudus Rufai 2 min read

I tried to match Span’s design closely on both platforms. But a design is a set of pictures of moments, and an app has to get from one moment to the next. Some of those in between steps needed changes. I kept a list of each one and the reason, so none of them was an accident.

Buttons should not lie

The design draws the add point button yellow, even after an area shape is closed. A closed shape cannot take more points, so the button now turns grey. A button that looks active and does nothing is worse than a small mismatch with the design.

Showing how, not just what

The design shows a finished area, but not how to finish one. To close a shape you tap the first point again, and that point might be off screen. So the app adds a hint, “Tap the first point, or here to close”. For the same reason, the empty Area and Height modes have short guidance, “Tap + on each corner” and “Aim at the floor and tap +”.

Numbers the app can actually know

A project card in the design reads “4 items · 2 windows”. For the app to say that, it would need to know what a window is, which it does not for normal measurements. So summaries are computed from real data, like “4 items · 1.40 m”.

The drift warning was similar. The design said 100.0 cm with points that moved about 2 cm, but its drawing moved them about 4 cm. The app computes from the positions, so the debug screen uses a true 2 cm move, and shows 103.2 cm.

Wording that could not work

The camera screen’s “Open Settings” could not work on iOS before the app had asked for permission, because iOS hides the switch until then. So that button says “Allow camera” until a real refusal. That one has its own note.

Android additions

The Android design had no place for measurements that are not in any project, so a “Not in a project” row appears when there are some. And the Android project page had no way to add a measurement to that project, so its top bar gained a + button.

None of these were about taste. Each one came from a state the design did not show, or a rule of the platform. Writing down the reason made it easy to tell a deliberate change from a mistake when I compared screens later.

Read the Span case study