A platform is only as good as the people who can actually use it.
Lafie Plus needed a frontend that held up on any device, on any connection, for any user. Accessibility was treated as a build requirement, not a checkbox at the end.
Client
Lafie Plus
Sector
Tech platform
Scope
Frontend build
Status
Live
1
The problem
Platform frontends fail in a specific way. They get designed on a fast laptop with a big screen and a fast connection, then shipped to an audience holding a mid-range phone on patchy mobile data. Everything that felt smooth in design review becomes friction in the real world.
Lafie Plus needed a frontend that would not fall apart under those conditions, and would remain usable for people relying on screen readers, keyboard navigation, or larger text.
Interfaces that assume a desktop-sized screen and break below it
Accessibility deferred until after launch, when it is expensive to retrofit
Heavy pages that stall on mobile data
Interaction patterns that only work with a mouse
2
What we built
We built the Lafie Plus frontend in React and deployed it on Vercel, designing for the smallest screen first and treating accessibility as part of the definition of done rather than a later pass.
In practice that means semantic markup, real focus states, keyboard paths through every interactive flow, and colour contrast checked as the design was built instead of after it shipped.
Mobile-first responsive layout that scales up rather than squeezing down
Semantic HTML structure, so assistive technology reads the page correctly
Visible focus states and complete keyboard navigation on every interactive element
Colour contrast validated during the build, not audited afterwards
Reduced-motion support, so animation never becomes a barrier
Clean component structure the client's team can extend without us
ReactVercelResponsiveAccessibilityMobile-first
Common approach
Design for desktop, adapt for mobile later
Accessibility audited after launch
Focus states removed because they looked untidy
Animation with no reduced-motion path
Contrast checked only if someone complains
How we built it
Smallest screen designed first, then scaled up
Accessibility part of the definition of done
Focus states designed in, not stripped out
Motion respects the reduced-motion setting
Contrast validated as each component was built
lafieplus-frontend.vercel.app
The live Lafie Plus frontend. This preview is generated from the real site, so it always reflects what is currently deployed.3
The impact
Accessibility work is mostly invisible when it goes well, which makes it easy to skip and easy to undersell. The measurable outcome is simple: fewer people bounce off the platform because it did not work for them.
Lafie Plus also got a codebase their own team can build on. We are glad when a client outgrows needing us for every change, because a platform that only its original builder can touch is a liability.
AllInteractive flows reachable by keyboard alone
MobileFirst, so the platform holds up on a mid-range phone
0Accessibility work deferred to a post-launch cleanup
Building an interface that excludes people is not a shortcut. It is a bug you shipped on purpose.