The challenge
In our search for the perfect solution we had to keep several limitations in mind. Some of which were technical, others were conceptual. Our goal was a user friendly and accessible mobile application that runs natively on the client's device. The app had to be performant and safe while still being easy to use for all kinds of demographics. And above all, it had to be part of the MAES product line up. The app needed to be recognisable as a MAES product in order to gain the trust. We are handling confidential data after all.
The technical process of developing the MAES app
As mentioned before, we had to make sure to deliver a performant application that had to run on all kinds of mobile devices. While retrieving and displaying data has become peanuts for our experienced team, we hadn't yet worked together with Worldline in order to enable the possibility to engage the gaspump. We had experience with this kind of communication in an older project; Smartbikes. But while Smartbikes is written in Angular, we needed the added performance of React Native for this project. So in a way, this implementation felt as new grounds!
Using our full UX expertise
The choice for mobile devices was pretty much a no-brainer. But there were still many issues to find solutions for. Even though the restriction in screen sizes and orientation made it a lot easier. The main challenge for this application was to keep clarity in the information provided without losing the transparency. What the user should see at which time became the reoccurring question throughout the process.
Let's break down the "tankflow" - as we called it during development - or the flow the user follows in order to start a session at the gas station. There are a few things we need to know before we can activate the pump at the gas station. In no particular order:
- Which gas station the user's at;
- The user's billing information;
- The pump number to enable the correct pump;
- The fuel type;
- Other optional items such as the car or the mileage.
On top of everything we wanted to add some layer of security. This way only the owner of the device could start a session. So let's make a form asking the information from the user and call it a day, right? No way Jose! We took these items and started flowcharting.
Keep it short and simple
The goal was to make a journey as short as possible for the user. We did this by relying on assumptions to speed up the process without taking away all power from the user. We came up with a flow consisting of small questions with easy input methods. By focusing each screen on 1 main item we allowed the user to be more mindful of the required input. A welcome side effect of dividing up the form is that we took away that overwhelming factor. This made it more accessible to various types of users. A downside of dividing the content in different screens is the delaying factor.
We looked to smartly build up the flow looking back on the information provided. E.g. by knowing the pump number we knew which fuel types are available, and by knowing the car we could suggest the correct fuel type. We tried to preselect as many items as possible. But at the end, the user was still in control to edit our suggestions. Every idea for the customer flow was tested thoroughly. And after each tests, we returned to the drawing board with our insights. We even tested at a gas station to get in the correct mindset!
The process of the "tankflow" is just one of the many flows and items that needed special attention from our UX team. You can see all in action by downloading the app and make sure to let our UX team know what you think! They're always eager to learn from different viewpoints and experiences.
The team effort
For every project we need to align teams with different backgrounds (e.g. development & design). For this project we didn't only have to work with our partner MAES, but also with its partners such as Worldline. We've learned a lot from the people we met and their perspectives on the process. This is why we care so much about the partnerships we create in our projects. We truly believe that bringing together the knowledge of different sectors enables us, as a team, to make beter products and push the industries forwards.
The result: the MAES app
We are proud to present the result of this successful collaboration. The result is an accessible app for iOS and Android devices. You can download both in the respective stores. Make sure to leave a review, we're eager to hear your thoughts!
Are you also in need of a solution for your customers?
Then feel free to contact us.
