Atlas Fleet Management
Truck Fleet Management WebApp
- March, 2023 - Feb, 2025
Project Overview
A truck fleet management system has two main user groups: drivers and vehicle representatives. We used two products, Atlas WebApp as the representative’s product and Compass Mobile App as the driver’s product.
Atlas began with the goal of consolidating processes previously managed across multiple platforms into a single unified platform for the representatives.
My Role
- Initiated the brand identity creation process and designed the logo of the product.
- Analyzed user needs through interviews with the business team.
- Developed a new UI theme utilizing the EVA Design System.
- Designed all processes from wireframes to final designs using Figma.
- Supported the UI development process with HTML and SASS.
- Improved the design through iterative updates based on user feedback.
User Research
When onboarded onto project, I’ve organized a meeting with business team to get more information about the users to create the user profile.
Vehicle Representative User Profile
- Age: 26-32
- Gender: Male > 85%
- Working Hours: Two Shifts: 08:00-18:00 (day), 18:00-08:00 (night)
- Devices: Same computers & monitors (Device Specific App)
- Browser: Google Chrome
Problem Summary
Atlas was previously developed by another team. But ended up with low usage due to the problems below:
- The app didn't adhere to modern UX principles (for ex over-used popups)
- UI inconsistency occurred due to third-party UI components
- The app did not have a brand identity
- Icon styles inconsistency.
- Colors inconsistency and usage of static color codes.
- Typography inconsistency.
Solution Summary
To Solve the problems, I’ve gone through the following steps:
- Designed a logo for the application
- Prepared several style boards for the business owner to choose from.
- After the styleboard selection, I’ve prepared Eva Color Palette using color theory.
- Developed a new theme including custom Eva Color Palette and typrography for the app using Nebular theme variables.
- Third-party components bound the design system colors.
- I’ve upgraded to Font Awesome to Pro and created custom icons for logistics operations.
- Designed components in Figma to improve the overall user experience.
- Designed data visualizations when needed, using data components and semantics
Project Stack
Figma
I've used Figma to design both low and high-fidelity wireframes before development.
HTML5
Fixed semantic HTML5 issues to enhance code readability and maintain a clean, structured layout.
CSS3
Fixed issues and optimized CSS 3 codes; used together with SASS to build a custom UI.
SASS
Used SASS to build a branded design layer over Eva Design System for theme-based visual consistency.
Bootstrap
Used Bootstrap’s utility classes and flex layout to support Eva and build a custom UI
Atlassian Jira
The team used Atlassian Jira for issue tracking and project management with Agile Methodologies.
Eva Design System
I have used Eva Design System to develop a custom theme for the product and it's components.
Bitbucket
Together with the development team I've used Bitbucket to deliver my code.
Usability Testing & Design Iterations
- Conducted UI iterations based on user feedback.
- Enhanced the user experience through UI updates after discussions with the business team.
- Provided dynamic usability with expandable/collapsible, multi-mode, and zoomable components.
- Introduced customizable column selections for data table components, enhancing user personalization.
Product Success
- Initially used by only 1-2 vehicle representatives, Atlas now supports over 100 users.
- Tasks previously performed across three different platforms were consolidated into a single platform.
- Atlas achieved a modern and branded user interface.
- Usage within the company significantly increased, streamlining business operations.
What I've Learned
- I’ve learned the color theory and design systems
- Observed the positive impact of iterative UX design based on user feedback on business processes.
- Learned the significance of designing customizable UI components by thoroughly understanding users' data management needs
Want to build a project like this?
or