A card component for LendInvest Design System |
|---|
LendInvest | London, UK | June, 2022
Somewhere between team expansion and the rush of shipping new features, our design language at LendInvest started drifting. Different screens spoke slightly different “dialects”; buttons weren’t always behaving the same way; and, occasionally, components from the Style Guide showed up in shapes or colour contrasts that wouldn’t exactly charm an accessibility auditor.
It wasn’t disastrous, but it was definitely… uneven.
Challenge The core issue was consistency.
We needed a way to bring a growing suite of products back under one visual and functional roof—without slowing ongoing delivery work. And frankly, we had to be realistic: fix what brings real value first.
Approach After mapping the hotspots (there were more than expected), we agreed on a parallel strategy: improve the design system while teams continued building.
I took ownership of redefining the card component, which sat at the centre of most of our information-heavy interfaces. Before sketching anything new, I did a sweep through our existing UI inventory and benchmarked against several mature design systems. I leaned on principles like the Law of Common Region and the Law of Proximity—simple ideas, but incredibly effective when applied with intention.
The goal: build a card that could flex to different contexts without fracturing into ten slightly-off versions again.
Outcome
The redesigned card rolled out first on our website product. After a few rounds of user testing (where we caught a couple of “oh, that makes more sense now” moments), we saw a clear lift in clarity, predictability, and overall cohesion.Beyond the component itself, the work nudged the team toward a more sustainable design culture—one where components weren’t just “things we use,” but building blocks we maintain with shared standards and care.