Project Introduction

Revamping VognPlan's management software for businesses engaged in trucking, school transport, taxi, and related services. This tool helps hundreds of drivers in Denmark optimize their workload.

Client — VognPlan | Transport (B2B) | 2022

Team — Šeherzada Mujkić - UX/UI Design, Ademir Alimanović - Lead Product Designer

We began the project by holding a discovery session with the client. He introduced us to the platform structure, which consists of 6 separate apps for managing all the parties involved in the service. Our goal was to improve the two mobile apps for driver and car management, aiming to optimize daily and monotonous tasks.

Outdated design: The initial apps had an outdated and plain UI. We saw a major improvement opportunity here by introducing more visual indicators such as colors or icons for better differentiation.

Lack of accessibility: Since majority of the users for the two mobile apps were older men, we recognized a need to introduce larger UI elements such as buttons and fields. This was also confirmed by the client, who agreed that this change would be of benefit.

No design system: There was no previous design system created for any of the apps, which led to a lack of design guidelines and no structure within existing design files.

Inefficient table layouts: Certain views with lots of data were overcrowded, such as the Shift overview. This made shift tracking more difficult and left open space for mistakes.

After the onboarding phase, our goal was to have a full overview of all features due to the complex structure. I worked with the PM on writing out user stories for each of the platforms, so that the design and dev team had a clear scope overview.

We continued with research and wireframes as a base to discuss improvement ideas with the client. Upon client approval, we continued high fidelity iterations where we enhanced the design with additional visual indicators such as status colors or icons where possible.

App usage: This app is always located within the driver's vehicle. Drivers log in using the Car ID and password. They use it to confirm their shift, manage payments and certificates for that vehicle.

UI updates: We revamped the entire UI of both apps to a clean and modern style that also ensures accessibility. For this reason, the UI consists of slightly bigger components such as buttons, cards and input fields.

Managing new payments: Once the driver wants to confirm that he's received his payment, he does so using a slider to confirm. Due to the importance of this action, we wanted users to be more conscious while performing it - which is why we used a slider over a regular button.

UX edge cases: Drivers confirm their shift by entering their personal driver PIN. In case of a wrong PIN, they can be identified as someone else. We solved this issue by an additional screen that displays the driver's name which he can either confirm, or click on Re-enter PIN in case of a mistake.

Hired drivers are obligated to keep track of their work certificates or permits, which they have to display when interacting with officials. Our goal was to ensure easy view access, with a clear overview of the certificate status and due date. When uploading a new permit, it is first sent to be approved by the admin, which is why we included the status overview within separate tabs and icons as a visual indicator.

App usage: This app is installed on the driver's phone and is carried with him at all times. They use the app for shift schedule and overview, receipt and certificate management, editing profile information and managing their work absence.

Shift schedule overview: The initial design of this screen was overloaded with data. The client agreed that he wanted a more clear overview where the data would be easier to navigate. The end solution included a cards overview with a clear structure, with days off being grayed out.

Notifications: We introduced notifications to the app, which inform drivers about the status of their submitted documentation. This allows drivers to easily be updated about the status, without having to go back to the Certificates screen.

User stories: This project has brought me the opportunity to enhance my skills of writing detailed user stories, which were further used to simplify planning of overall scope and estimations.

Accessibility: During the discovery session with the client, we discussed the actual users of the apps and aspects specific to them. One of these was the need for an improved accessibility in terms of bigger UI elements such as buttons, cards and input fields.

File organization: We set up a clear structure in Figma and shared it to the client and the rest of the team. The page structure was in sync with the design progress, allowing a clear overview at all times.