Self Refuel Terminal
Device for self-service refueling, payments and related services about oil station.
About the Project
Project Specifications
The project aims to completely restyle the UI of the SC software for the Smart OPT device to enhance usability, address issues stemming from the current flow, and reduce the number of support calls.
Bringing a graphical update to the interface to align with current design choices, improve the perception of the Fortech brand through components found on other devices like the OPT Compact.
Implementing the use of analytics during user sessions to allow for post-work on new developments and resolving any errors during the experience.
The project includes the realization for the current "Regular" display 12" and the future "Wide" display of 15".
Duration: 20 April- Ongoing
Significance of the project
Our objective is to significantly improve the usability and overall user experience on the service terminal. We aim to empower users to autonomously address any encountered challenges, thereby reducing the reliance on support services. This strategy not only promotes self-sufficiency but also streamlines the support process, ensuring that assistance is sought only in critical situations.
About Company
Fortech was set up in 2006 from the synergic collaboration of professionals who had long been working in the field of fuel distribution.
Various giants in the field of petrol distribution have decided to rely on us for the Fortech know-how and professionalism, building solid and long lasting partnerships.
Fortech today is market leader in Italy providing customized solutions to improve business performance of single service stations, fuel retail networks and large petrol companies.
In the last few years, Fortech has also started a process of internationalization, which, thanks to various partnerships, has led it to establish bases in various foreign countries.
Project Execution
Tools:
- Figma
- Notion
- FlowMapp
- Adobe Illustrator
- Adobe Photoshop
- MockView
Roles
- User Experience (UX) Designer
- Interaction (IxD) Designer
- User Interface (UI) Designer
- Visual Designer
Deliverables:
- Analysis current solution
- Personas
- User journeys and task flows
- Sketches
- High-fidelity mockups
- User Flow
- Real world simulation
- Design system and UI kit
- Interaction Motion Design: High-fidelity interactive prototypes
- Usability tests and findings
Research & Discovery
What is like the device?
Analyze old Flows and Views
I started by conducting a thorough analysis of the current user interface on Fortech Srl's Smart OPT device. Several points have emerged, each carrying its own complexities. This device is not only used for refueling at oil stations but also for delivering services to users in the refueling industry. The current analysis has revealed that the choice of colors for each service has created a chaotic checkerboard effect. There is redundancy in the language selection functionality, which takes up a significant portion of the interface.
What I found out in the Home?
Here some of my consideration about the Flows and the Views in the Product - Software experience:
- There is a lack of depth in the components, resulting in a flat appearance overall.
- Dimensions are being used incorrectly, with icons appearing as buttons, and buttons appearing flat and getting lost among the user interface components.
- The top navigation bar does not cater to the current needs of each view.
- Icons take up a lot of space, and the typography is not easily readable.
- The concept of assistance is fundamental to the user experience but often gets overused due to the high number of requests. It is not placed correctly and appears as a functional button (is this why users click on it so often?)
- The language button is used in two different ways, taking up unwanted space on the device. Choosing one path and not two should be the main theme.
- Illustrations do not communicate in the same way: it is evident that they were created at different times but not following the same design guidelines.
- Satispay is not a service as shown in this screen but a payment method; it should be positioned at the bottom and highlighted during the transaction.
Competitive Analysis
Design process
Sketches
User Flow
Design evolution
Design System
Testing
Outside testing
Usability Testing
Affinity Diagram
Customer Journey Map
Improvements after the tests
Research & Discovery
What is like the device?
Analyze old Flows and Views
I started by conducting a thorough analysis of the current user interface on Fortech Srl's Smart OPT device. Several points have emerged, each carrying its own complexities. This device is not only used for refueling at oil stations but also for delivering services to users in the refueling industry. The current analysis has revealed that the choice of colors for each service has created a chaotic checkerboard effect. There is redundancy in the language selection functionality, which takes up a significant portion of the interface.
What I found out in the Home?
Here some of my consideration about the Flows and the Views in the Product - Software experience:
- There is a lack of depth in the components, resulting in a flat appearance overall.
- Dimensions are being used incorrectly, with icons appearing as buttons, and buttons appearing flat and getting lost among the user interface components.
- The top navigation bar does not cater to the current needs of each view.
- Icons take up a lot of space, and the typography is not easily readable.
- The concept of assistance is fundamental to the user experience but often gets overused due to the high number of requests. It is not placed correctly and appears as a functional button (is this why users click on it so often?)
- The language button is used in two different ways, taking up unwanted space on the device. Choosing one path and not two should be the main theme.
- Illustrations do not communicate in the same way: it is evident that they were created at different times but not following the same design guidelines.
- Satispay is not a service as shown in this screen but a payment method; it should be positioned at the bottom and highlighted during the transaction.
Competitive Analysis
Design process
Sketches
User Flow
Design evolution
Design System
Testing
Outside testing
Usability Testing
Affinity Diagram
Customer Journey Map
Improvements after the tests
Research & Discovery
What is like the device?
Analyze old Flows and Views
I started by conducting a thorough analysis of the current user interface on Fortech Srl's Smart OPT device. Several points have emerged, each carrying its own complexities. This device is not only used for refueling at oil stations but also for delivering services to users in the refueling industry. The current analysis has revealed that the choice of colors for each service has created a chaotic checkerboard effect. There is redundancy in the language selection functionality, which takes up a significant portion of the interface.
What I found out in the Home?
Here some of my consideration about the Flows and the Views in the Product - Software experience:
- There is a lack of depth in the components, resulting in a flat appearance overall.
- Dimensions are being used incorrectly, with icons appearing as buttons, and buttons appearing flat and getting lost among the user interface components.
- The top navigation bar does not cater to the current needs of each view.
- Icons take up a lot of space, and the typography is not easily readable.
- The concept of assistance is fundamental to the user experience but often gets overused due to the high number of requests. It is not placed correctly and appears as a functional button (is this why users click on it so often?)
- The language button is used in two different ways, taking up unwanted space on the device. Choosing one path and not two should be the main theme.
- Illustrations do not communicate in the same way: it is evident that they were created at different times but not following the same design guidelines.
- Satispay is not a service as shown in this screen but a payment method; it should be positioned at the bottom and highlighted during the transaction.
Competitive Analysis
Design process
Sketches
User Flow
Design evolution
Design System
Testing
Outside testing
Usability Testing
Affinity Diagram
Customer Journey Map
Improvements after the tests