Cards management platform
INDUSTRY
Energy and Oil industry
Duration
3 months
Release
2022
🔬 Overview of the Project
The Tamoil Fleet Management platform was developed to streamline fleet operations for small businesses with up to 5-8 vehicles. It offered robust tools for:
Allocating and managing fuel card resources (creation, editing, blocking, and deletion).
Tracking fuel transactions, consumption, and remaining balances.
Analyzing benchmarks and accessing detailed statistics for improved decision-making.
As the Senior Product Designer, I led the design efforts, crafting the platform’s user experience, user flows, and interface designs from scratch. Additionally, I collaborated closely with stakeholders to align business requirements and created a scalable Design System to ensure long-term consistency and usability.
📋 Task
Design and implement a fleet management platform for Tamoil that enables small businesses with up to 5-8 vehicles to:
Manage fuel cards, including allocation of funds, creation, editing, deletion, and blocking.
Monitor transactions, track fuel consumption, and view balances for each card.
Access detailed benchmarks and statistics to support better decision-making and
operational efficiency.
Establish a comprehensive Design System to ensure consistency, scalability, and seamless collaboration between design and development teams.
✅ Solution
Collaborated with stakeholders to understand user needs, designed a comprehensive user flow and information architecture, and created a scalable Design System to ensure consistency. Developed a
user-friendly platform with intuitive navigation, data visualization, and seamless card management features, all while maintaining accessibility and usability standards.
👨🏻💻 Contributions
Conducted stakeholder interviews to gather insights and align on platform goals.
Created an empathy map to understand user pain points and behaviors.
Designed both simple and complex user flows aligned with backend processes.
Developed the information architecture for seamless navigation.
Built a comprehensive Design System with tokens, reusable components, and documentation.
Defined the visual style through moodboards and iterative design.
Designed all platform pages, including dashboards, card management, and data visualization.
Ensured accessibility compliance with WCAG AA standards.
Collaborated closely with developers for accurate implementation of components and flows.
Delivered a fully functional and user-friendly platform tailored to Tamoil’s needs.
Methodology
Agile Workflows
Employed iterative sprints for continuous progress and adaptability.
Fostered close collaboration between stakeholders, designers, and developers.
Prioritized tasks to focus on high-value features, ensuring timely delivery.
Design Thinking
Applied a structured process: Empathize, Define, Ideate, Prototype, and Test.
Balanced user needs with business objectives through iterative problem-solving.
Systems Thinking
Ensured the design approach considered scalability and interconnectivity across all platform components.
The Tamoil Fleet Management platform was developed using a combination of Agile workflows and Design Thinking methodologies to ensure efficiency and user-centricity:
Adrian Ionescu
Adrian oversees a small fleet of 5-8 vehicles and is responsible for managing fuel expenses, monitoring driver activity, and ensuring operational efficiency. He uses the platform to allocate funds, track spending, and analyze fuel consumption to make informed decisions that optimize costs and performance.
Age
32
Ocupation
Fleet manager
Frustrations
Lack of transparency in fuel spending, making it difficult to track costs effectively.
Time-consuming manual processes for managing multiple cards and transactions.
Difficulty accessing data insights or generating useful reports for decision-making.
Inconsistent interfaces in other tools that cause confusion and errors.
Inability to quickly react to urgent situations like lost or stolen cards.
Goals
Simplify the process of allocating and managing funds for each vehicle’s fuel card.
Gain clear visibility into fuel expenses and driver transactions to ensure accountability.
Monitor remaining balances and ensure cards are always topped up for smooth operations.
Access benchmarks and statistics to identify trends and make data-driven decisions.
Quickly block or update cards when changes occur, such as replacing a driver or addressing security concerns.
Streamlined Design for an Exceptional User Experience
Access critical data at a glance with an intuitive dashboard tailored for small business needs.
Simplify Fleet Management with
HEM MyCard
Track expenses, allocate funds, and gain insights effortlessly. Manage fuel cards and monitor fleet activity with one intuitive platform.
Seamless Fund Allocation
Allocate, edit, and monitor card funds in real-time, ensuring smooth operations for your fleet.
87%
faster Card Management
Our platform reduces manual
card management time, boosting operational efficiency.
100%
increase in Cost Visibility
Detailed transaction insights help
fleet managers make data-driven decisions.
1. Research and Analysis
2. Structuring the Platform
3. Design System Development
4. Platform Design and Implementation
3
months
7
screens
Process
UX Laws & Principles used
Jakob’s Law
Aligned the platform’s interface with familiar patterns from other fleet management tools to reduce the learning curve and increase usability.
Fitt’s Law
Elements are large enough and conveniently placed, reducing the distance to the target.
Hick’s Law
Simplified decision-making by minimizing the number of actions required for key tasks like fund allocation and card management.
Miller’s Law
Organized complex information,
such as transaction histories and benchmarks, into smaller, digestible chunks for easier comprehension.
Consistency
Design System was used for consistency across all pages for familiarity and ease to use.
Hierarchy
Font size, color, and spacing are carefully chosen to indicate the importance and draw the user’s attention to key elements.
Accessibility Principles
Ensured WCAG AA compliance with high contrast ratios, keyboard navigation, and screen reader support, making the platform accessible to all users.
Pareto Principle
(80/20 Rule)
Focused on designing features that addressed the most critical user needs, such as card management and transaction tracking, to maximize impact.
Error prevention
I used confirmation prompts alongside password confirmation
for significant actions (e.g. deleting
a card).
Weeks
Weeks
Weeks
Weeks
#282827
#72A400
#FFFFFF
#282827
#72A400
#747474
Aa
Inter
Simplify Your Fleet Management
Access all your fuel card operations in one intuitive platform. From tracking balances to managing transactions, HEM MyCard streamlines your fleet’s daily needs with ease and security.
📚 Lessons Learned
Balancing Simplicity and Functionality
Designing for small businesses requires creating intuitive workflows that simplify complex processes without sacrificing essential features.
Importance of User Feedback
Continuous user testing and feedback were crucial to identifying pain points and improving the platform, ensuring it met real-world needs.
Scalability Matters
Building a Design System from the start provided a solid foundation for future updates and expansions, reducing development time and ensuring consistency.
Accessibility as a Priority
Achieving WCAG AAA compliance taught us that accessibility isn’t just a standard—it’s a competitive advantage that broadens the platform’s user base.
Collaboration Drives Success
Close collaboration with stakeholders and developers was essential in aligning business goals with user needs, ensuring a seamless implementation process.
Data-Driven Decisions are Key
Leveraging analytics tools like user behavior data and patterns highlighted areas for optimization and helped prioritize feature development.
Clear Documentation Saves Time
Thorough documentation of components and workflows significantly streamlined the development process and minimized miscommunication.
📑 Design System
Consistency Across the Platform
The existing platform lacked uniformity in its components, leading to inconsistencies in user experience and development workflows.
Atomic Design Principles
Components were built using a structured approach, including Tokens, Atoms, Molecules, and Organisms.
Comprehensive Documentation
Each component was documented with states, variations, anatomy, accessibility guidelines, and best practices.
Streamlined Collaboration
Provided developers with reusable components and detailed specifications for seamless implementation.
Scalable and Future-Proof
Designed to support future platform updates and new feature integrations effortlessly.
Other case studies
BCR
Empower Your Financial Future
Pazanga
Full service marketing and PR for healthcare and life sciens.
Tamoil
Empowering fleet management with flexible budgets
BCR
Empower Your Financial Future
