CASE STUDY
mobiFUEL App
End-to-end fuel payment app.
Role
UX/UI Design
Duration
2 Months
Tools
Figma, Miro, Adobe Creative Suite
Challenges
This is an example of a project that I have entered in the process of creating. While projects created on my own from the beginning are easier to carry out, entering an existing project was a new and interesting challenge for me. The project was very limited in terms of budget and time.
mobiFUEL was intended to be an extension of the payment options at petrol stations. Due to covid, many petrol stations decided to introduce additional payment functions based on scanning the QR code displayed on the pump.
The whole application was developed for the German market, and be so simple as it is possible to use and without additional, unnecessary functions. This is an example of an application that I entered during an existing process. It is not an easy task, but if you have enough time to read the existing documentation, you can approach the task responsibly and create a user-friendly application.
Objectives
- Design the mobile app (Android & iOS) that is user-friendly and easy to use with a clean design
DESIGN PROCESS
STRATEGY
How-Might-We Questions
IDEATION
User Flow
Hi-Fi Wireframes
PROTOTYPE & TEST
Hi-Fi Prototype
All the UX research was done months beforehand and I had to rely on it. In this respect, I got acquainted with the collected data, and created provisional personas & user persona. As I had a big time and budget constraint, I also decided to give up some options for building a strategy for the application design process. The branding of the company was also prepared earlier.
RESEARCH
I do not know the background of the research, as it has all been done beforehand, but from the data presented I was able to draw some conclusions.
Market Research
- such payment options have never been available on the Polish market before
- people, driven by covid fear, look for other alternatives and payment options
- online payments are the clear favourite for 2020
Competitive Research
- german market has no competition at the moment
- applications available in other languages offer different payment options
- a useful option is to generate a refuelling receipt when needed
Provisional Persona
- Among the research and all generated data I found also provisional personas.
User Persona
-
I always use the user persona to represent key audience segments. It helps us focus on tackling the most important problems – to address the major needs of the most important user groups. It is both fictional and realistic.Let’s meet Chris, an IT specialist in Poland. Always in a hurry, doesn’t like queues and traffic jams and would like to pay for everything online (even for bread in the bakery if possible).
STRATEGY
How Might We Questions
-
To define the problem I have with this type of app, I create Point-of-View (POV) Statements that allow me to ideate in a goal-oriented manner, and How-Might-We (HMW) Questions to frame the ideation in the brainstorm session for solutions. The statements and questions are generated based on the insights and needs I found in Research documentation.
INSIGHT
User is often looking for online payment options.
NEED
User needs to have several different options for paying online.
POV
User should know that he can choose the online payment method each time he wants to use it.
HMW
How might we improve the adding and deleting of payment methods?
User often need an invoice or document to support the refuelling.
User needs access to the accounts of payments already made.
User should know that he can find any refuelling at any time in app & generate an invoice.
How might we make it easier for the user to search for payments made and to generate invoices where necessary?
IDEATION
User Flow
-
This process helps me walk in an individual user’s shoes, and think through different scenarios that this user might encounter. Below is the user flow (orange path) for Chris when he wants to pay for transaktion & not to download the invoice.
Styleguide & Design System
-
The styleguide & design system was created earlier, I only created the UI based on its principles.
Hi-Fi Wirefames
-
Once I had a visual direction of the layout, I started to create Hi-Fi Wireframes. Creating high-fidelity wireframes helps me focus on the visual consistency and hierarchy and in this case saves a lot of time as there is no time to create lo-fi wireframes. In these wireframes, I tried to incorporate common design patterns that have been tested on our competitors’ product, or included elements that directly address users’ goals, needs, frustrations, and motivations. I created of course whole dokumentations for developers, and client too.
PROTOTYPE & TEST
Prototype
-
The prototype was created on the basis of the user path developed in the user flow. It is not a full version of the application and does not give the user all the possibilities. Prototype you can check here:Â mobiFUEL PROTOTYPE
FINAL THOUGHTS & NEXT STEPS
-
With the final prototype created, I believe I have met the goals that were outlined in the beginning of the design process. I have designed the possibility of paying for fuel, which will not only improve the time spent at the petrol station, but is also an innovative idea on the Polish market, and in the era of covid allows the user to feel even safer.
If I had more time, I would dive deeper in developing some of those nice-to-have features. These features would add more characteristics to the business and increase the competitiveness.
-
For financial reasons, after the corona period, the application was no longer developed.
Let’s make something amazing together!
HOME
ART
ABOUT
LEGAL NOTICE
Location
Germany, Munich Area
hello@aleksandramaslon.com