UX UI Design
MAN Driver App
The MAN Driver App intelligently assists you the truck driver in your day-to-day work, supporting you with routine tasks as well as providing valuable support in the event of a breakdown.
Introduction
🎯 Challenge
Making the truck driver life easier with this application and the features that are available to them every day 24/7 and giving to them support in critical situations during the trips.
👨🏻‍💻 Responsabilites:
• Conducting UX research
• Creating site maps and flows
• Setting goals and objectives
• Creating wireframes
• Low-fidelity prototypes
• High-fidelity prototypes
• Usability Testing
• High-fidelity design
• Design System creation and maintenance
🛠 Tools:
• Figma (Design & Prototyping)
• Whimsical (Flow charts)
• Pen and Paper (Wireframing) ❤️
The process
Design process & improvements
My process will be different in different projects and will be determined by many factors such as the project goals, business needs, problem to be solved, time and etc.

In this case, the goal was to improve a complete project, starting from the begin.

 I decided to start to analyse the material that I already had in Figma and then I started to remake everything from scratch (Styles, Components, Typography, Native iOS & Android components, etc).

First of all, I started from styles using the atomic design and make the Typography, Colours, Icons library, Shadows, etc.
🔎Research
✏️Ideate
& Sketch
🖥Design
& Prototype
✅Test
🔄Iterate
🚀Delivery
Information architecture
User flow
The essential part of this case was to understand perfectly what’s the user flow, if the user flow need to be improved or what are the key point, what are the essential feature for the truck drivers, the value of the features and which features need to be improved.
User flow with the app screens
After the analysing of the low-fidelity user flow, I passed on the next step and I started to analyse the full user flow process with the real app screen.

The first huge problem that we found was on the “Pre-Departure Check” part of app, it was difficult to use for the truck drivers.



We start immediately to work on the UX flow of this part whit a whole team (Product owner, Middleware, Android and iOS engineers, etc)
Pre-departure check
Pre-Departure Check improvements
An essential part of a truck driver is to execute every day when they are driving the pre-departure check. This process requires around 10 minutes, and you need to report everything on the structured paper and after your journey report that to your fleet manager. We agreed after a few user interviews and testimonials that are a massive waste of time, and we need something more interactive and faster.
Solution
With our solution that we tested with truck drivers, we saw that it takes just 6 minutes instead of 10. It's way better and faster the process, and you are reporting everything to your fleet manager if you have an internet connection.

At the same time, you can continue your trip safe and keep updated your fleet manager about the truck status.
This process has improved the truck driver lives, with this feature you can organise immediately a repair in the garage if you need without losing time, maybe days, often.
Design System
Atomic Design System
This system is based largely on the principles of atomic design. The key idea behind this methodology being small, independent - atomic - parts, can be combined into larger molecular structures.

This foundation loosely defined our typography, colours, icons, spacing, navigation and information architecture. We proved essential for guiding our work in a unified direction. Reviewing our collective work at the end of each day, we began to see patterns emerge.
Let’s start with the styles
Styles are one of the key points for a Design System, and this part of the process it can have a massive impact on the complete product for this reason we need to invest our time during this process.
Molecules and Organisms
When I defined the atoms and the style guide, I continued to create molecules and organism that I will use to assemble the fundamentals part of the product and test it if they are working well. An essential part of this process is also to create everything responsive because we will use the same components for Android and iOS devices.

I organized everything into the project so every team member can easily manage to change something or just to use it. Here you can see the force of the Atomic Design and how its functions in the right way.
Conclusion
The outcome
We can be proud of the work that we did. During one year of this journey, we created four new features, we improved the experience of the whole product, and we created life easier and more safe for the truck drivers.
Check the products on:
Thanks for watching!
Go on top
GET IN TOUCH.
DribbbleLinkedinhello@markoperic.ch
© 2016–2019 Marko Perić. Made in Webflow with 💜