Project Overview:

Fleet is managed by vehicle representatives and drivers. We used two products, Atlas webApp as the representative’s products and Compass Mobile App as the driver’s product.

Atlas began with the goal of consolidating processes previously managed across different platforms into a single unified platform.

My Role

  • Initiated the brand identity creation process and designed a new logo.

  • 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.

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

  • Icons inconsistency.

  • Colors inconsistency.

  • Typography inconsistency.

User Research Summary

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 and monitors (turns out to be a device specific app)

  • Browser: Google Chrome

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 for the app using Nebular theme variables.

  • Third-party components bound the design system colors.

  • Created a font pairing that matches with the brand identity

  • 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.

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 or multi-mode components.

  • Introduced customizable column selections for data table components, enhancing user personalization.

Final Designs

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, user-friendly brand identity.

  • 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