BioSync

A native component library of twenty components, every one of them in use, carrying the same tokens as the web app by conversion rather than by eye. Five tab screens plus a scanner, a rules settings screen and a paywall. The accessibility problems found during the port are listed in the repository with what each one now does instead.

The web version was built on a component library of forty-six components, of which the application imported seven. Porting it to a phone was an opportunity to stop carrying the other thirty-nine. Opening each surviving component then turned it into an audit, which found the web interface was failing platform minimums that a browser had let it get away with.

1. 1

   Counted what was actually imported

   Forty-six components in the library; seven used by the app. The rest (sidebar, menubar, carousel, command palette, chart, resizable panels) were scaffold left in place. The native library implements what the app used plus the primitives a phone needs: twenty components, all of them used.

2. 2

   Measured every interactive control against the platform floor

   Apple and Google both publish minimum touch targets and minimum legible type sizes. Several controls in the web build were well under both: dose steppers at roughly 14px, a delete icon at 16px, time-block pills at 28px.

3. 3

   Checked what the interface announces, not only what it shows

   Icon-only controls, toasts and the progress indicators were each opened from the perspective of a screen reader rather than a viewport. The score ring announced nothing usable.

4. 4

   Recorded the audit as a document, with the fixes

   What was found, what carried over unchanged and what was deliberately changed, kept in the repository next to the code. An audit that is not written down is an opinion someone had once.

5. 5

   Looked for the object before looking for a layout

   The shipped interface reads like every wellness app because it was designed as an app. So the question I asked instead was what this person is physically holding when they use it. The answer is a blister strip: a grid of doses where the ones you have taken are visibly gone, and you can see the rest of your day without counting anything. That is recognition doing the work recall was doing before, and it is a real-world metaphor rather than a decorative one, because the emptied cavity is genuinely the state, not a picture of it.

6. 6

   Drew it in grey, which is where the colour rule came from

   The redesign was drawn without colour first. In grey a ring at 50% and a ring at 80% are the same ring, and a green tick and a red cross are the same mark, so anything that survived the grey pass was carrying its state in shape or in words. That is why a taken dose is a torn, emptied cavity and an expired one is struck through, rather than either of them being a hue. The accessibility rule and the visual idea arrived together; neither was retrofitted onto the other.

7. 7

   Redesigned the day as a blister card

   The shipped interface reads like every wellness app: rings, streak flames, glowing buttons. The redesign is a design file, not yet in the build. It keeps the stack, the rules engine and every accessibility rule, and draws the day as the thing people actually hold: a blister card where each dose sits in its dome and a taken dose leaves an emptied cavity.