Automating the Fueling Process of Africa’s Largest Digital Logistics Marketplace
Learn how I used the power of design thinking and human-centered design to help Amitruck streamline its fuel operations by reducing friction, reconciliation errors & improving reporting
1. Project Overview
Who is Amitruck?
Amitruck is a digital marketplace for trucking in Kenya. It connects cargo owners and transporters by providing a platform where cargo owners have access to a readily-available fleet of transporters and allows transporters to access entirely new markets on a daily basis. The platform connects clients directly with transporters, cutting out expensive middlemen.
The Product; The Fuel Module
The fuel module is a software component in Amitruck’s admin portal that allows fueling the fleet of dedicated customers.
Essentially the fuel module allows the following operations:
• Reporting on the fuel performance of a fleet.
• Fuel planning and placing fuel requests for transporters.
• Fuel authorization by senior team members when needed.
• Review of fuel documents.
• Adding new fuel stations and editing their details.
• Payment of fuel stations for fuel consumed.
• Reporting on the fuel performance of a fleet.
• Fuel planning and placing fuel requests for transporters.
• Fuel authorization by senior team members when needed.
• Review of fuel documents.
• Adding new fuel stations and editing their details.
• Payment of fuel stations for fuel consumed.
My Contribution
The project went on for 6 Weeks, kicking off on October 3rd, 2022 to November 18, 2022. I was a UX/UI Designer designing the module from conception to delivery.
My responsibilities included:
• Interviewing operations associates (the end users) and other internal business stakeholders
• Designing paper & digital wireframes
• Designing low & high-fidelity prototypes
• Conducting usability studies
• Improving the product information architecture
• Collaborating with the product manager to build the module’s backlog
• Collaborating with the front-end engineer during the implementation
• Building and maintaining the Amitruck Core Design System
• Designing paper & digital wireframes
• Designing low & high-fidelity prototypes
• Conducting usability studies
• Improving the product information architecture
• Collaborating with the product manager to build the module’s backlog
• Collaborating with the front-end engineer during the implementation
• Building and maintaining the Amitruck Core Design System
The Design Prompt
The current process for fueling Amitruck transporters is manual and needs automation e.g. drivers have to call operations associates to request fuel. The operations associates want the system to automatically inform them when a transporter needs fuel.
Product Goals
The main goals of this module are to:
• Streamline the fueling operation process, and reduce friction and reconciliation inconsistencies.
• Reduce fuel transaction costs by removing OpenFloat (a system for making large amounts of corporate payments) and integrating directly with Mpesa (a virtual banking system that provides transaction services through a SIM card.)
• Provide a better view and reporting on fueling operations.
• Reduce fuel transaction costs by removing OpenFloat (a system for making large amounts of corporate payments) and integrating directly with Mpesa (a virtual banking system that provides transaction services through a SIM card.)
• Provide a better view and reporting on fueling operations.
Success Metrics
1. Reduce friction by automating outgoing messages to transporters, fuel stations, & the operations team.
2. Reduce reconciliation errors & improve reporting by ensuring all transactions go through the system, allowing for more comprehensive reporting.
3. Streamline fuel operation by reducing the time required to process and fulfill a fuel request by removing redundant operations of double input.
2. Reduce reconciliation errors & improve reporting by ensuring all transactions go through the system, allowing for more comprehensive reporting.
3. Streamline fuel operation by reducing the time required to process and fulfill a fuel request by removing redundant operations of double input.
My Process and Tools
In order to create a successful user experience for the Amitruck Fuel Module, it was essential that I utilize a variety of tools and follow a well-defined process. I used design thinking as a user-centric problem-solving approach to understand users, identify their needs, and generate and test innovative solutions. The process consisted of several stages that I applied in an iterative manner, which allowed for continuous improvement.
Here's a simplified overview of the user-centric design thinking process:
Here's a simplified overview of the user-centric design thinking process:
2. User Research: Learning from the Ops Team
Research Objective
The objective of this UX research was to gain insights into how the operations team interacted with the Amitruck Admin Portal, and their perceptions, needs, and expectations. I specifically wanted to learn how the module's design could enable them to create and approve fuel requests, approve fueling documents, and add and approve fuel stations. I also wanted to learn how the module could deliver an optimal yet easy-to-use solution and not create any loopholes in the system.
Methodology
In-depth User Interviews: I conducted in-depth interviews with a sample of operations associates to understand their motivations for using the portal, their expectations, and their overall experience. The interviews explored topics such as user goals, portal usage patterns, features that are liked or disliked, and other challenges faced.
User Surveys: I administered a quantitative survey to a sample of portal users to gather data on user satisfaction, ease of use, and perceived value of the portal. The survey also included open-ended questions to collect additional feedback and suggestions.
Usability Testing: I conducted usability testing sessions where users performed common tasks on the portal while observing and recording their interactions. This provided insights into how they navigated the portal, the difficulties they faced, and areas where the UI needed improvements.
Analysis
I analyzed the data collected from research to identify patterns, trends, and common themes. I synthesized the findings to generate insights and recommendations for designing the fuel module and improving the current UI of the portal.
Outcome
The outcome of the UX research was a list of user stories that the product owner used to build and prioritize a backlog and a comprehensive report that highlighted the key findings, insights, and recommendations for designing the fuel module and improving the current UI of the admin portal. I shared the report with the product team, and the insights gained informed my design decisions.
Persona Development
Creating a persona based on the findings from the research to create fictional representations of typical users helped inform my design decisions and prioritize features. I kept in mind their goals, needs, and frustrations.
Problem Statement
Duet is a busy operations associate who needs an efficient and robust fuel management software module on the Amitruck Admin Portal because they have other tasks that they need to attend to during the day.
User Journey Map
Mapping Duet’s user journey revealed how helpful it would be for users to have access to a dedicated fuel module with Amitruck Admin Portal
User Flow
I made a user flow for fuel requests, approval, and payment handling. By breaking down the process into steps, I tracked user interactions and labeled screens with descriptions. This helped during design reviews and handoff to the engineering team.
3. Starting the Design
Wireframes
Wireframes enabled me to lay out content and functionality on pages while taking into account user needs and goals. They helped to establish the basic structure of the pages before committing to visual design. I created paper wireframes to help me rapidly put down design ideas and digital wireframes which helped to transition into the prototyping stage
Paper Wireframes
Paper wireframes acted as a tool that allowed me to rapidly visualize the module designs, share them with team members, and get early concept feedback. The speed of creation was its major advantage, and it made this tool extremely invaluable during our brainstorming sessions. It helped show the zones where our product’s major content elements will appear on the page.
Paper wireframes from a brainstorming session with Ops.
Digital Wireframes
Throughout the design phase, I used user research feedback to improve screen designs. Desktop users reported poor navigation on the original portal, so I added breadcrumbs to the new portal to address the issue. This solution enabled them to navigate backward and forward without opening multiple browser pages.
Low-fidelity Prototype
I developed a low-fidelity prototype that linked the main user process, which involved transporters requesting fuel, the ops team approving the requests, and the finance team releasing payments. Next, I conducted a usability study with users to test the flow before moving on to creating mockups and high-fidelity digital prototypes.
Usability Study Parameters
I conducted two rounds of usability testing. Findings from the first study helped guide the designs from digital wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Research Questions
• How easy or difficult is it for Ops & Senior Ops Associates to; create and approve fuel requests, approve fueling documents, and add, approve, and edit fuel station details?
• What can we learn from users' steps while carrying out the above tasks?
• Which areas of the design need troubleshooting to close any potential loopholes before committing to engineering?
• How can we improve the overall user experience and interface design for the module?
• What can we learn from users' steps while carrying out the above tasks?
• Which areas of the design need troubleshooting to close any potential loopholes before committing to engineering?
• How can we improve the overall user experience and interface design for the module?
Test Parameters
Method: Moderated usability study (Open Analytics; Participants freely navigated through the prototype to help us get the following insights: heatmaps, video recordings, user flows, and visit time)
Participants: 7 participants completed the tasks of creating and approving fuel requests, approving fueling documents, and adding, approving, and editing fuel stations individually. Participants were members of the ops team who had used the Amitruck Admin Portal for at least 2 months to manage customers' fleets & carry out fuel authorization and monitor compliance.
Length: Each session lasted an hour and included an introduction, a list of tasks, and an opinion scale questionnaire at the end of the study.
Participants: 7 participants completed the tasks of creating and approving fuel requests, approving fueling documents, and adding, approving, and editing fuel stations individually. Participants were members of the ops team who had used the Amitruck Admin Portal for at least 2 months to manage customers' fleets & carry out fuel authorization and monitor compliance.
Length: Each session lasted an hour and included an introduction, a list of tasks, and an opinion scale questionnaire at the end of the study.
4. Refining the Design & Handoff
Mockups & Visual Design
After rounds of testing and iteration, it was time to prepare the designs for handoff.
High-fidelity Prototype
A high-fidelity digital prototype allowed us to design a realistic clickable proof of concept that allowed users and stakeholders to understand what we were building. The prototype enabled us to test our ideas and move progressively toward the finished solution.
The final high-fidelity prototype presented cleaner user flows for the fuel module feature set. It met the user needs and business requirements for securely creating and approving fuel requests, recording fueling documents and adding and approving new fuel stations.
Accessibility Consideration
1. Provided access to vision-impaired users by adding alt text to images for screen readers
2. Used easily recognizable icons from Microsoft’s Fluent Design System to improve navigation
3. Used detailed imagery for meals and cocktails to help all users better understand the designs
2. Used easily recognizable icons from Microsoft’s Fluent Design System to improve navigation
3. Used detailed imagery for meals and cocktails to help all users better understand the designs
Handshake & Engineering Support
After conducting the second round of usability study & implementing priorities 0 and 1 insights, the team decided that we roll out the MVP and improve the product as we go based on insights from subsequent research. For me, this meant handing over the UI kit to the engineering team and supporting them throughout the implementation journey. Below is a sample of some of the elements from the design kit that I shared.
5. Going Forward
Product Impact
Increased Process Efficiency
The module reduced the average time required to process and fulfill fuel requests by 80%, streamlining operations for the team.
Reduced Reconciliation Errors
By ensuring all transactions went through the system, the fuel module minimized reconciliation errors by 60%, improving financial reporting accuracy.
Improved Reporting Capabilities
The module allowed the operations team to generate detailed reports on fuel performance and transaction history, increasing reporting efficiency by 25%.
Cost Savings
Integration with Mpesa eliminated reliance on OpenFloat, reducing transaction costs by 100%.
What I learned
While designing the Amitruck Fuel Module, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app's designs.
Next Steps
After handing off the UX design to engineering, I collaborated and communicated with the engineering team to ensure successful implementation. Here are the key actions I took:
1. Collaboration with the engineering team: Engaged in regular meetings and discussions with the engineering team to address any questions or clarifications they had regarding the design. Stayed available for ongoing collaboration to provide guidance and resolve any design-related issues that arose during implementation.
2. Provide design specifications: Created detailed design specifications that outlined the desired interactions, animations, and visual elements of the user interface. These specifications helped the engineering team understand the intended behavior and aesthetics of the design.
3. Support implementation: Assisted the engineering team in the implementation process by providing any necessary design assets, such as icons, graphics, or animations. Worked closely with developers to ensure the design was accurately translated into the final product.
4. Conduct regular design reviews: Scheduled design reviews with the engineering team to evaluate the progress and ensure that the design was being implemented as intended. Provided constructive feedback and addressed any inconsistencies or usability issues that arose during development.
5. Test and iterate: Collaborated with the engineering team to conduct user testing and gathered feedback on the implemented design. Analyzed the results and worked together to make any necessary refinements or iterations to improve the user experience.
6. Maintain communication: Kept open lines of communication with the engineering team throughout the development process. Addressed any design-related questions promptly and maintained a collaborative environment to ensure a successful outcome.
By following those steps, I helped ensure a smooth transition from design to development and maintain the integrity of the user experience in the final product.
