BP
Superfleet
Superfleet
Industry
Oil & gas
Year
2022
Client
BP
Industry
Oil & gas
Year
2022
Client
BP
Industry
Oil & gas
Year
2022
Client
BP
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.
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 challenges
This 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.
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.
History and challenges
This 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.
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.
History and challenges
This 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.
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.
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.
A pragmatic approach
Moving forward…sort of
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.
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.
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
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.
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.
Bringing it together
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.
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.
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.
Interactive animation of side bar with dropdown menu
Interactive animation of side bar with dropdown menu
Alternative interactive animation of collapsible side bar in-situ of data tables page
Alternative interactive animation of collapsible side bar in-situ of data tables page
Alternative interactive animation of collapsible side bar in-situ of data tables page
Interactive animation of side bar with dropdown menu
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.
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.
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.