Introduction
BPMe is a popular app in New Zealand from one of the largest oil companies, bp. It enhances the customer experience at bp stations by allowing customers to pay for fuel from their car, pre-order coffee to skip the line, and earn rewards on purchases.
Objectives: Since bp customers enjoyed the Pay-in-car fuel service, BPMe plans to add the car wash service to the app to further enhance the customer experience at bp stations.
My Role
I was the only product designer taking charge of this project, and my design process for it was:
Researched and understood the current user experience at bp station.
Defined problems and explored the solutions.
Confirmed the results from the previous steps with the team and client, and created the user flow and wireframes.
Created concept design and made user test inside team.
Visual design.
Design Process
01 UNDERSTAND
To better empathise with the car wash customers, I planed and conducted a research phase. The specific steps were:
Experienced the car wash service by myself at a random bp station.
Spoke with 4 car wash customers to learn about what's good and bad they met during car wash.
Read reviews on Google Maps about car wash at fuel stations.
IMG 01 - Car Wash Menu
IMG 02 - Wash Instructions
IMG 03 - Key Pad outside Room
Here are the four key takeaways I got from understanding phase:
Customers appreciate the Pay-in-Car option for car wash.
Wording of the menu and instructions could be simplified.
Customers enjoy earning bonuses with the loyalty card, that even is one of the reasons they go to bp station to buy service.
The free vacuum cleaner is a highlight at the end of the car wash.
02 CONCEPTUALISE
Based on the key points from previous step, I prioritised solutions from a UX perspective to create a design strategy.
Add Pay-in-Car for car wash
Create intuitive graphics for the menu to make effortless selecting experience
Simplify wash instructions and create intuitive graphics to support reading experience
Add safety warnings before start using car wash
Promote free vacuum service to car wash users
Introduce motion into the wash menu for clarity and enjoyment
Add car wash loyalty card to BPMe rewards
Send notifications before car wash code expire
03 DESIGN
After presenting the progress to the team, the client approved the strategy. Then I started to create the user flow to visualise how user would interact with the app when purchasing and using car wash, for confirming all the key points we need to notice in the later phase.
IMG 04 - Car Wash User Flow
The user flow helped the whole team consider the experience in one mind, and notice 3 key points would impact the current experience:
User is on a bp site or not.
The payment should adapt to the current payment flow (passcode/verification code).
Add car wash category to "Receipts".
Next, I crafted the new graphics to support showing the menu and instructions in a clear way.
IMG 05 - Graphic Design for Menu & Instructions
Based on the all results we got, I finished all the screens for this project. The specific steps for the UI design are:
Worked closely with the development team to confirm the particular solutions.
Created concept design to conduct internal user testing and got next step approval from client.
Finished all the screens and updated the design system.
IMG 06 - UI Screens for BPMe Car Wash
04 VALIDATE
After all the hard work by our team, we're all happy with:
Users quickly and easily adapted to the new car wash service in BPMe app.
Client approved more budget for introducing motion design.
Design highlighted the new Ultra Clean option on the menu.
05 NEXT
Complete motion design and deliver Lottie files to developers for easy implementation.
Finish the remaining low-priority design tasks.
Analyze data and user feedback for future improvements.