bp

1.0 Problem

The petrol station experience has remained largely unchanged for decades. With the rise of electric vehicles, AI, and smart retail tech, BP saw an opportunity to completely reimagine the customer journey—from fuel and EV charging to car washes and retail. The goal: consolidate services into one seamless, intuitive self-checkout experience that could increase efficiency, improve satisfaction, and boost conversion.

2.0 Discovery

Working closely with a UX researcher, we mapped out the current-state experience across multiple BP locations. We identified friction points across different services, then benchmarked best-in-class kiosk experiences across retail and mobility sectors. These insights informed our north star vision: a unified kiosk experience powered by smart technology and personalisation.

3.0 Prototyping & Testing

Using design sprint methodology, we rapidly iterated through concepts to validate our assumptions and align on an MVP. Early prototypes were built and tested with real users, allowing us to refine navigation, layout, and content hierarchy with speed and confidence.
‍

4.0 Design System

With no existing design system in place, I developed a new visual language from the ground up. This included crafting a flexible UI framework suitable for future white-label use, while staying true to BP’s brand. I created mood boards, UI kits, and high-fidelity screens tailored for kiosk touch interaction - ensuring a cohesive, modern look that balanced form and function.
‍

5.0 Developer Handoff

Once the designs were validated and finalised, we transitioned from Figma into real kiosk environments. I collaborated closely with engineers to bring the experience to life on physical devices, testing and refining in real-time at BP forecourts.

‍

‍

‍