BP SuperFleet
Five years. Four agencies. Zero releases.
Client
BP
Role
UX/UI, brand, motion design
Outcomes
After a year on the project, BP adopted this look and feel as its direction going forward, in line with where the business is heading. Components we designed were approved by brand and the Core design system team, then fed into BP’s main Core library as a starting point for other products. BP also decided to restart the product research from scratch, a rescope many of us, including me, had pushed for. This work is planned as the visual basis for what comes next.
After a year on the project, BP adopted this look and feel as its direction going forward, in line with where the business is heading. Components we designed were approved by brand and the Core design system team, then fed into BP’s main Core library as a starting point for other products. BP also decided to restart the product research from scratch, a rescope many of us, including me, had pushed for. This work is planned as the visual basis for what comes next.
After a year on the project, BP adopted this look and feel as its direction going forward, in line with where the business is heading. Components we designed were approved by brand and the Core design system team, then fed into BP’s main Core library as a starting point for other products. BP also decided to restart the product research from scratch, a rescope many of us, including me, had pushed for. This work is planned as the visual basis for what comes next.
Background
When I arrived, SuperFleet had been through four agencies (MMT Digital, IBM, Accenture and Thoughtworks) with nothing released. It was a design archive with no shared system, no consistency, and a client wary of changing anything after so long.
When I arrived, SuperFleet had been through four agencies (MMT Digital, IBM, Accenture and Thoughtworks) with nothing released. It was a design archive with no shared system, no consistency, and a client wary of changing anything after so long.
I joined to support three of seven dev squads, with one mandate: bring coherence to the existing work so the product could move forward.
I joined to support three of seven dev squads, with one mandate: bring coherence to the existing work so the product could move forward.
A pragmatic approach
We audited the designs, mapped existing screens to BP’s new Core atomic design system, and rebuilt prioritised backlogs for each squad. The goal was coherence, not a rebuild.
We audited the designs, mapped existing screens to BP’s new Core atomic design system, and rebuilt prioritised backlogs for each squad. The goal was coherence, not a rebuild.
BP Core was meant to cover 2,000 products but was still early-stage, with some atoms and hardly any molecules or organisms. So we locked down the atoms we needed, then built the missing components ourselves, improving the layouts from the previous designs as we went. We worked with the two-person Core team in Texas through weekly check-ins, and closely with brand and each squad’s developers. The palette shifted from BP green to grey. This was a company decision for accessibility, because deuteranomaly, the most common form of red-green colour blindness, makes greens hard to distinguish.
BP Core was meant to cover 2,000 products but was still early-stage, with some atoms and hardly any molecules or organisms. So we locked down the atoms we needed, then built the missing components ourselves, improving the layouts from the previous designs as we went. We worked with the two-person Core team in Texas through weekly check-ins, and closely with brand and each squad’s developers. The palette shifted from BP green to grey. This was a company decision for accessibility, because deuteranomaly, the most common form of red-green colour blindness, makes greens hard to distinguish.
Pushback and challenges
There was unclear brand direction. Product owners questioned design calls without the authority to make them. Squads shared a codebase but rarely a vision. No UX designers were assigned to the squads either, so we built on the existing structure and brought in UX help as needed.
We kept pushing for clarity. Once enough components existed, we shifted from building pieces to assembling pages, reviewing until it cohered.
Going further with motion
Static screens can’t show how something should feel. I built interactive animations for component behaviour, transitions, micro-interactions and sidebar states, giving developers and stakeholders more than specs to work from.
Static screens can’t show how something should feel. I built interactive animations for component behaviour, transitions, micro-interactions and sidebar states, giving developers and stakeholders more than specs to work from.
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
…SOMETHING
…SOMETHING
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
…SOMETHING
…SOMETHING