PROJECT
© 2025
#1
”Commercial Aviation customers e-mail a large number of price enquiries for ad hoc charter requests to account managers and the out of hours teams. There can be a delay in replying to these requests if the account manager replies at all, creating customer dissatisfaction and potentially lost business for Air BP.“
#2
”Our non contracted General Aviation Sterling Card customers have a very fragmented experience for price discovery. Some customers receive a CSV file, very few use our existing price portal, the majority e-mail their account manager for a price.
#3
“There can be a delay in replying to these requests if the account manager replies at all, creating customer dissatisfaction and potentially lost business for air bp, as speed is of the essence with this sector, as these customers are competing for charter business against 50+ other customers and the wrong price can mean the difference between profit or loss.”
As the BP design system is still maturing, there are a few flaws and missing components in which this specific project needed. Although majority of the components used were directly taken from the design system, there were areas in the designs where we had created project specific symbols to overcome the lack of components. The usage of components also often configured specifically for this project, for example the use of shadows on sticky components.
BP as we all know, is a green dominated brand. In the past, green has been arguably over-used in their products. It became jarring to see the same colour everywhere, from CTAs to image tints.
Function comes before form; this was a platform where allowing the users to navigate with least amount of clicks whilst having minimal distraction was key.
Our striped back approach allowed content to become focus of the page, whilst utilising Z-axis to elevate key information through shadows and sticky modules.
It is crucial to tackle the pain points and enable users to navigate the entire fuel ordering process with least number of clicks with minimal distraction.
Accessibility is a key focal point for BP’s design system.
Monochrome styling have been implemented to ensure contrast ratings are at its best.
Stripped back the brand green and only utilising that as accent colours to support the platform’s visual identity.
Responsive designs were crucial so users can access this platform on-the-go to purchase fuel any where. The 3 break points came with challenges with data heavy pages. We took on the approach of utilising tables for bigger devices and opting for the use of cards for smaller devices. This solved the issue of a long horizontal scroll on a small screen which can be an irritating experience on small devices.
To enable quick comparison of price offers, an expandable tray was designed instead of a traditional PDP. However, the same solution cannot be directly replicated on mobile due to the vertical scrolling real estate. Therefore, mobile specific PDP was designed. Sticky modules and z-axis were utilised for increase usability.
Utilising subtle animations to showcase the interaction has allowed the concept to be better understood. The timings and layering of components plays a pivotal role on how users interprets actions on the page.
PROJECT
© 2025