Shell Box
The design process for creating a new way of paying at Shell stations with Shell Box App, but now at the convenience store Shell Select on buying products.
Mobile App
UX / Interface Design,Ā Prototyping,Ā Design Specifications
2019
UX / Interface Design,Ā Prototyping,Ā Design Specifications
2019
About Shell Box
The Shell Box App is the way to pay at Shell stations, which the customer pays for fuel supplies and earns points, which are worth discounts on fuel or miles and the customer does not need to get out of the car to pay for fuel. The following steps:
First Step
Inform the fuel and the amount of fuel at the Shell station;
Second Step
In the App, click on "Type to pay";
Third Step
When starting the fuel supply, enter the payment code next to the pump and ready!
Inform the fuel and the amount of fuel at the Shell station;
Second Step
In the App, click on "Type to pay";
Third Step
When starting the fuel supply, enter the payment code next to the pump and ready!
The Challenge
The objective was to develop a fluid payment experience with the same efficiency that the user has when paying for his fuel supply, and considering that payment via cell phone for purchases is not very common here in Brazil.
The objective was to develop a fluid payment experience with the same efficiency that the user has when paying for his fuel supply, and considering that payment via cell phone for purchases is not very common here in Brazil.
Design Process
Research
In this first stage of the design process, it involved documentary research to understand how competitors and other payment players behave. It is very important to have this information at the beginning of the process, before having an idea or starting prototyping.
Diagnosis of experience
Diagnosis of experience
After analysing these insights, I started to conceptualise the solution, focusing on user flows and wireframes to give me a way to iterate faster. After that, I went to production mode, designing the interface considering design principles such as contrast, hierarchy and feedback; user interactions.
User Flow
The main point of the flow is to ensure that this new functionality has the shortest possible learning curve for the user, who already uses the app to pay for fuel supplies.
The main point of the flow is to ensure that this new functionality has the shortest possible learning curve for the user, who already uses the app to pay for fuel supplies.
Wireframe
The wireframe was designed to build the structure and architecture of the information and after that go to visual and interactions.
User interface
Payment Flow
The objective was to develop a fluid payment experience with the same efficiency that the user has when paying for his fuel supply, and considering that payment via cell phone for purchases is not very common here in Brazil.
Validation
This first delivery of Shell Select should not be a single delivery. It must be iterated considering usability tests,
A/B tests, and other in-depth user research to improve the initial version.
A/B tests, and other in-depth user research to improve the initial version.
The launch of this new feature for the Shell Box app is just the first step.
Thus, analysing metrics such as length of stay in the App, daily frequency, total points earned over time, and difficulties at checkout time is very important to understand success and develop the product roadmap.
Thank you!Ā āš¼
