FuelRunner
Fuel Runner is a mobile application designed to provide seamless on-demand gasoline and diesel delivery. The app consists of two key sections: one for customers, allowing them to place fuel orders effortlessly, and another for admins, responsible for managing and accepting orders. The goal of this project was to design an MVP from scratch, covering the entire process from UX research to prototyping and documentation, ensuring an intuitive and efficient experience for both customers and administrators.
Role
UX Research, UX/UI Designer
UX Research, UX/UI Designer
Industry
Delivery Mobile App
Delivery Mobile App
Stage 1: Requirements Gathering
The first stage involved defining the core requirements of the platform by understanding user needs and business objectives. Research focused on identifying key pain points in fuel delivery, analyzing competitors, and outlining essential features for both customers and admins. This stage shaped the MVP’s functionality and ensured alignment between business goals and user expectations.
Stage 2: User Personas & Benchmarking
To create a user-centric experience, user personas were developed to represent different customer types (e.g., individuals, fleet managers) and admin roles. A competitive benchmark was conducted to analyze existing fuel delivery services, identifying best practices and areas for differentiation.
Stage 3: Feature Prioritization & Sitemap
Based on insights gathered, essential features were prioritized, balancing user needs with business feasibility. A sitemap was created to define the app’s structure, ensuring clear navigation for customers to place orders, track deliveries, and make payments, while admins could manage and accept orders efficiently.
Stage 4: User Flows & Wireframes
Detailed user flows were designed to illustrate how customers would place orders, track deliveries, and make payments, while admins could accept, assign, and manage fuel deliveries. These flows were transformed into wireframes, providing a structural layout of the app before integrating visual design elements.
Stage 5: Look & Feel Definition
To establish the app’s visual identity, two distinct style proposals were created, including color palettes, typography, icon styles, and UI components. The selected style defined the mood and branding of Fuel Runner, ensuring a modern and professional appearance that instilled confidence in users.
Stage 6: Design System
A comprehensive design system was built to ensure visual and functional consistency throughout the app. This included guidelines for UI components, button styles, input fields, icons, and color schemes, creating a scalable and efficient framework for both customer and admin interfaces.
Stage 7: UI Design
High-fidelity UI screens were created for both the customer and admin dashboards, ensuring an intuitive and seamless experience. The design emphasized clarity, accessibility, and ease of use for all users, while maintaining a cohesive visual language across the app.
Key Takeaways
The design process for Fuel Runner followed a structured approach to create an intuitive and efficient fuel delivery experience. User personas and benchmarking helped define key needs, while feature prioritization and a clear sitemap ensured a seamless navigation flow. A design system maintained consistency across both customer and admin interfaces, and the interactive prototype allowed for early testing and refinements. Finally, comprehensive documentation ensured a smooth handoff to development, providing a scalable foundation for future iterations.
See More Projects
SerenityMate
Mobile app and platform supporting rehabilitation clinics and individuals recovering from addictions
See the project
SerenityMate
Mobile app and platform supporting rehabilitation clinics and individuals recovering from addictions
See the project
SerenityMate
Mobile app and platform supporting rehabilitation clinics and individuals recovering from addictions
See the project
See the project
Mackinaw
This project involved designing a video-based dating app to foster authentic connections, covering everything from user research to prototyping and documentation.
See the project
Mackinaw
This project involved designing a video-based dating app to foster authentic connections, covering everything from user research to prototyping and documentation.
See the project
Mackinaw
This project involved designing a video-based dating app to foster authentic connections, covering everything from user research to prototyping and documentation.
See the project
See the project
La oferta de la Semana
Design for a user-friendly and attractive interface for a website that compiles offers from various sectors and stores.
See the project
La oferta de la Semana
Design for a user-friendly and attractive interface for a website that compiles offers from various sectors and stores.
See the project
La oferta de la Semana
Design for a user-friendly and attractive interface for a website that compiles offers from various sectors and stores.
See the project
See the project
Listas Negras
This project involved designing a website to verify fiscal incidents and creating two separate platforms for client monitoring and administrator management.
See the project
Listas Negras
This project involved designing a website to verify fiscal incidents and creating two separate platforms for client monitoring and administrator management.
See the project
Listas Negras
This project involved designing a website to verify fiscal incidents and creating two separate platforms for client monitoring and administrator management.
See the project
See the project
Let's talk!
Don't hesitate to contact me for initiating unique projects, shaping concepts, challenging my endeavors, or discussing potential job prospects.
Let's talk!
Don't hesitate to contact me for initiating unique projects, shaping concepts, challenging my endeavors, or discussing potential job prospects.
Let's talk!
Don't hesitate to contact me for initiating unique projects, shaping concepts, challenging my endeavors, or discussing potential job prospects.
Let's talk!
Don't hesitate to contact me for initiating unique projects, shaping concepts, challenging my endeavors, or discussing potential job prospects.
FuelRunner
Fuel Runner is a mobile application designed to provide seamless on-demand gasoline and diesel delivery. The app consists of two key sections: one for customers, allowing them to place fuel orders effortlessly, and another for admins, responsible for managing and accepting orders. The goal of this project was to design an MVP from scratch, covering the entire process from UX research to prototyping and documentation, ensuring an intuitive and efficient experience for both customers and administrators.
Role
UX Research, UX/UI Designer
Industry
Delivery Mobile App
Stage 1: Requirements Gathering
The first stage involved defining the core requirements of the platform by understanding user needs and business objectives. Research focused on identifying key pain points in fuel delivery, analyzing competitors, and outlining essential features for both customers and admins. This stage shaped the MVP’s functionality and ensured alignment between business goals and user expectations.
Stage 2: User Personas & Benchmarking
To create a user-centric experience, user personas were developed to represent different customer types (e.g., individuals, fleet managers) and admin roles. A competitive benchmark was conducted to analyze existing fuel delivery services, identifying best practices and areas for differentiation.
Stage 3: Feature Prioritization & Sitemap
Based on insights gathered, essential features were prioritized, balancing user needs with business feasibility. A sitemap was created to define the app’s structure, ensuring clear navigation for customers to place orders, track deliveries, and make payments, while admins could manage and accept orders efficiently.
Stage 4: User Flows & Wireframes
Detailed user flows were designed to illustrate how customers would place orders, track deliveries, and make payments, while admins could accept, assign, and manage fuel deliveries. These flows were transformed into wireframes, providing a structural layout of the app before integrating visual design elements.
Stage 5: Look & Feel Definition
To establish the app’s visual identity, two distinct style proposals were created, including color palettes, typography, icon styles, and UI components. The selected style defined the mood and branding of Fuel Runner, ensuring a modern and professional appearance that instilled confidence in users.
Stage 6: Design System
A comprehensive design system was built to ensure visual and functional consistency throughout the app. This included guidelines for UI components, button styles, input fields, icons, and color schemes, creating a scalable and efficient framework for both customer and admin interfaces.
Stage 7: UI Design
High-fidelity UI screens were created for both the customer and admin dashboards, ensuring an intuitive and seamless experience. The design emphasized clarity, accessibility, and ease of use for all users, while maintaining a cohesive visual language across the app.
Key Takeaways
The design process for Fuel Runner followed a structured approach to create an intuitive and efficient fuel delivery experience. User personas and benchmarking helped define key needs, while feature prioritization and a clear sitemap ensured a seamless navigation flow. A design system maintained consistency across both customer and admin interfaces, and the interactive prototype allowed for early testing and refinements. Finally, comprehensive documentation ensured a smooth handoff to development, providing a scalable foundation for future iterations.