a Product Designer with over 10 years experience crafting digital products & services in agencies, startups & large corporations

bp

Redesigning the forecourt experience
ROLE
Senior Product Designer
impact
Full working prototype
DURATION
1 year
PLATFORM
Kiosk & native app
I worked as a Product Designer in bp incubation - a space dedicated to new ideas and innovation which utilise the latest technology to help reach net zero targets.

The petrol station customer experience has remained unchanged for years. With the addition of electric cars and huge enhancements in technology it was clear that an overhaul was needed to increase efficiency, improve the overall experience and increase revenue. Myself and a UX researcher were charged with creating an all encompassing self checkout kiosk experience which brings all station services under one roof.
1.0 BUSINESS CASE
The aim was to provide an AI-powered, customer-centric solution that enhances the self-service experience at BP retail sites. From a business perspective it aims to drive growth, increase conversion rates, and optimise operational efficiency by providing a seamless, integrated experience that adapts to individual customer needs and preferences.
2.0 Identifying pain points
Before proposing potential solutions, we conducted research on the existing forecourt experience at a number of locations. We looked at various services, including fuel, EV charging and the car wash - identifying customer pain points and assessed how we could bring these services together.

We also looked at best in class kiosk products on the market which offer similar convenience and self check out services to help inform our approach.
3.0 PROTOTYPING & Testing
After the research phase we began to rapidly conceptualise and test ideas using the design sprint methodology. This enabled us to quickly build and test our assumptions to form our MVP.
4.0 VISUAL DESIGN PROCESS
Given the unique nature of the project, I had to develop a new visual language from scratch, and create a cohesive design system and component library. Additionally, a white label version was required that could be tailored to different brands in the future, requiring the designs to be flexible. The process began with an in-depth analysis of BP's brand identity. I initially experimented with wireframes and mood boards to define the visual direction, leading to the development of a color palette and typography that enhanced usability and brand consistency.

I then designed high-fidelity mockups showcasing UI layouts tailored for the kiosk's touch interface and created a comprehensive component library with interactive elements to ensure consistency. The final product was a visually appealing, user friendly kiosk interface which provided a robust foundation for future enhancements.
5.0 Developer handover
After multiple rounds of usability testing and once the UI was finalised we wanted to move away from Figma and build out the journey on kiosks to simulate the real world environment - this would enable us to test on bp forecourts. We worked closely alongside a team of software engineers to build and implement a smooth kiosk experience.
6.0 the end result
The kiosk experience is in the process of being piloted for the first time on bp forecourts in Australia before a wider rollout.

Additional services are being added to the experience including an automated smart fridge and tailored AI product recommendations for customers.

NatWest >

Virgin Media >

Mercedes-Benz>

Shell >