Overview of BP Superfleet

The new one-stop digital platform designed to help fleet managers optimise their fleet efficiency, reduce the complexity of end-to-end fleet management and bring insights to support the decarbonisation of their fleets.

This year, bp made a strategic decision to limit new feature development on Rio, our current fleet management portal, and embark on a journey to rebuild a new global platform from the ground up – for now, within BP, we are referring to this platform as SuperFleet.

SuperFleet will be a new global platform, with a simpler, modular architecture that enables reuse, agile delivery, autonomy and scalability. It will provide reporting, data visualization, and intuitive and user-friendly admin services. It will offer solutions to aid with vehicle maintenance and servicing requirements and provide leasing and insurance options for fleets. It will use data analytics to provide recommendations for energy optimisation and drive decarbonisation.

Below is an example of the 5 years of work created by a previous agency. This was the starting point. Just screen designs supplied. Inconsistent within themselves. No design system to speak of.

History and initial challenges

Bulleted points as project is tricky to explain

• Another agency had worked on this for 5 years previously and it was never released.

• MMT Digital, IBM, Accenture, Thoughtworks and other agencies were brought on to take over.

• BP were reluctant to make any design changes after 5 years and just wanted to get it built and release it.

• For 4 months, I covered 3 out of 7 squads, supporting developers that were make incremental improvements

• Asking where experience design fits in as there was no clear direction.

• A lot of trying to find out what was going on with the product

• After several months, a new squad created after several months to rebuild product, with new designs, using the BP Core Atomic design system.

Below are examples of some of the foundational elements of the new design system that were available, when this work moved forward

A pragmatic approach

We needed to do an audit of what had already been created but also what existed in this new design system that bp were wanting to move towards. That would inform what we did next and also create a backlog of tickets for us to prioritize and find a way forward. We also needed to align this to what was in the new Core Design system versus what we needed and then created a checklist from the inherited design system and rebuilt it using the beginnings of the new BP Core design system. There was a lot of holes in this and it was a case of adapt as we went along.

Below is a small part of the audit that was created.

Moving forward…sort of

As no UX designers were assigned to the squad, the existing design structure was used as the foundation to build up and make improvements, with UX help as needed. Strange way of working I know.

The new Atomic design system covered 2000 BP products and was still in its early stages.

Working alongside the BP Core design team (2 people) with weekly check-ins. they were based in Texas, so the time difference caused issues.

The new Design system had atoms (colours, which were not accessible, icons, type, which were going to change at some point etc) but all off this was subject to change at some point and it very early stages. didn't really work for what we needed and hardly any molecules or organisms existed for the components we require. So it wasn't a case of just building out pages.

We made sure we had the Atoms we needed, then we could much quickly start to build molecules and organisms out fairly fast but making layout improvements to the pages and components from the previous design.

The style of this was going to move away from bp green to more of a grey feel for accessibility reason. Deuteranomaly is the most common type of red-green colour blindness. It makes green look more red. This was a company decision.

Worked very closely with the developers on this within the squad

Close relationship was setup with brand, as this needed to align with their direction but also to supply assets.

The components that were designed and approved by brand and also the design system team were then fed into the main Core library so that anyone else can use as a starting point for other products.

Push back and challenges

Some of the main challenges were the direction the branding was being taken. This was a decision way above my head and not conversations I was allowed to be part of.

Product owners within the squads would question, ‘why are we making designs grey?’ Fair question. Or statements such as, ‘Can we please stay design in the bp colours’ this caused conflicts in our work initially but we decided to cover both bases and design for both in the shorter term.

The main challenges were also a lack of direction and communication along the way. We felt very separate from the rest of the squads, as the work we were doing was very different to the other areas and not sure where it fit in to the overall plan for the business.

Below are examples of components that were created using the new Core design system

Bringing it together

Once we had enough of the new components created, we were able to start creating pages to see how it all sat together. There was back and forth to get consistently in terms of the designs. Fine tuning.

Going that bit further

One of the things I felt was to show how components could function within the pages. Not just from a static perspective but also from an interactive perspective. How would a user interact with the product and how could it be brought to life. Motion is a great way of bringing a product u pa notch and can also be a great way to feedback to the user that something is happening.

Also, leaving this up to a developer to figure out is not something I want to do. So being able to show what I want to have built as a reference, is always preferred.

Below are 2 examples of prototyped created to bring the designs to life.

What happened next?

After a year and a bit of working on this, the final decision from BP was to use this look and feel going forward, as it aligns with how bp as a business are heading but to go back to the drawing board in terms of the research and effectively start from scratch.

It was a bittersweet feeling if I am honest. It needed to go back to the drawing board much sooner and that was said by many people, including myself, so that the product could be scoped out properly and align with business objectives. However, we did crack the nut of the style moving forward, so none of this was wasted work and was planned to be used as the basis to move forward.

I see that as a win.