INDUSTRY:
ENERGY
CLIENT:
CHASE BANK
YEAR:
2021-2023
ROLE:
LEAD UI DESIGNER
bp Core Design System
overview.
BP operates one of the most complex digital estates in the energy sector, with hundreds of products, thousands of contributors, and millions of users navigating interfaces that range from investor dashboards and marine supply tools to consumer apps and internal enterprise platforms. The organisation had the scale, but not the coherence. BP Core was the strategic response: a single, enterprise-grade design system built to unify BP's entire digital landscape under one visual and functional framework, and to do it with sustainability as a first-class design principle, not an afterthought. The stakes were high, and the scope was genuinely vast. This was infrastructure work, with the craft demands of product design and the strategic weight of platform thinking.
All visual references included in this case study are illustrative only; original project assets remain confidential under NDA.
challenge.
BP's digital footprint had grown faster than its design coherence. Teams were building in silos, rebuilding the same components with enough variation to undermine brand integrity and user consistency. Accessibility was reactive, tokens were inconsistently applied, and the fragmentation was costly, for a brand actively repositioning around sustainability, that disconnect had real stakes.
The harder problem was organisational: distributed teams with real autonomy would ignore a system that felt imposed. Adoption had to be earned. And BP's NetZero ambitions added a design brief with no established playbook. How do you embed sustainability thinking at the component level, as daily practice, without it becoming performative?
my role.
As Lead UI Designer, I worked across design craft and systems strategy, translating high-level principles into component specifications, token architecture, and governance frameworks built to survive real product cycles. I collaborated closely with BP's UXD leadership to ensure the system was coherent, extensible, and usable by distributed teams from day one.
On the execution side, I owned the design of foundational and advanced components, cards, modals, forms, split layouts, applying atomic methodology throughout. I also shaped the system's accessibility posture and its NetZeroUX lens: a framework that made sustainability reasoning a practical part of everyday component decisions.
approach.
The project began with a comprehensive audit of BP's existing digital estate, not just cataloguing what existed, but understanding why it had diverged. Pattern libraries started and abandoned, inconsistent handoff documentation, the same problem solved five different ways. The goal was to identify the structural failure modes any new system would need to prevent, then build against them deliberately.
From that foundation, I helped define a token architecture and component taxonomy to accommodate BP's full range of surfaces:
Light and dark themes with full inverse variant support across all components
Responsive breakpoints from mobile to large desktop, with density calibrated per context
Dual-register components serving both consumer-facing content and data-intensive enterprise tooling
The real design work happened at the molecule and organism levels, where atomic decisions compound into usable patterns. The card system handled media, product listings, editorial, and social content within a single coherent logic. The modal system was designed with explicit variant control across size, theme, and content type, so teams encountered a decision tree rather than a blank canvas.
Accessibility and sustainability were built in from the first pass, not validated at the end:
Contrast ratios, focus states, and ARIA annotation were part of every component spec
The NetZeroUX lens shaped decisions around motion, dark mode adoption, and rendering cost
Teams were given practical vocabulary for sustainability-conscious UI decisions at the component level
outcome.
BP Core launched as a fully documented, multi-theme design system covering foundational components, layout patterns, interactive overlays, content modules, and form architecture, with a governance model giving distributed teams clear guardrails and meaningful creative latitude. Light and inverse dark variants shipped throughout, and the modal system alone resolved flash messages, contact forms, onboarding flows, and confirmation interactions across all sizes and scroll behaviours.
The impact was immediate. Teams moved from weeks of bespoke component work to production-ready interfaces in days. Design reviews shifted from correcting inconsistency to refining experience. The 94% accessibility compliance rate reflected a structural change, from downstream audit to upstream assumption, and the 3.2× component reuse rate translated directly into engineering capacity redirected toward product differentiation.
What BP Core ultimately unlocked was coherent design velocity at enterprise scale. The sustainability lens embedded in the system ensured that as BP's digital estate grew, it did so with environmental cost built into the tools designers reached for every day.
reflection.
What made this project matter to me was the realisation that a design system isn't a library — it's a set of values made tangible. Every token, every component variant, every accessibility decision was a statement about what BP believed good digital experience should feel like. Getting that right, at this scale, with sustainability genuinely embedded rather than bolted on, that's the kind of work I find most meaningful.
