Logistics drivers app
Logistics drivers app
native app - Internship
native app - Internship
Embedded Files
During my internship at LUP Technologies I had the honor to design a native app for their SaaS system. The apps purpose is to; help drivers check-in at locations, keep track of previous jobs and save important documents.
During my internship at LUP Technologies I had the honor to design a native app for their SaaS system. The apps purpose is to; help drivers check-in at locations, keep track of previous jobs and save important documents.
Tools and techniques
Figma, Material ui, sketching, interviews, flowcharts and brainstorming
Duration
Feb 2025 - May 2025
Research
Research
Preparations & background
Preparations & background
The project started with all important parts of the app being summarized, this was everything from visual identity to what frames should be included.
Previous to this I had for about a month been getting familiar with the system. Which gave me knowledge on the users, features and overall purpose of the system.
Frames
Profile
Name, language, phone number, company, trucks
Recents
Visited
Check-ins
Chats
Check in:
QR-Code
GPS activated
CTA button
Search
List
Map
Info about site
Users
Truck drivers
The majority use android
The majority don't speak Swedish or very little English
Permissions
Location
Camera
Notifications
Ideation
Ideation
Lofi wireframes
Lofi wireframes
When all important frames and features had been noted, I started working on wireframes. Through these I made 2 alternative flows on how the app could look. These were mostly based on the features in the existing system.
The iteration of these lasted until all elements felt good. Feedback on the wireframes was given to me by my handler and everyone else on the team.
Flow 1
Flow 1
The first flow was based on the user searching for the facility they are at and wanting to check in. Then, once you are inside the facility in the app, you select the CTA button to check-in.
Flow 2
Flow 2
The second flow has its own tab at the bottom navbar, which enables more efficient check-in. This is because the user only needs to press this tab to access the check-in page, where two check-in options are available:
Scan with QR code.
GPS when near the site
Based on feedback from the team and my supervisor, we decided to proceed with flow 2. This was because the integrated QR code check-in was already in place at the sights and streamlined the check-in process.
Design
Design
First iteration prototype
First iteration prototype
Then I started working on the high fidelity prototype. The first step here was to choose what design guidelines would be used.
Since the majority of users accessed the existing system on android phones, material ui was chosen.
Iterations
Iterations
The prototyping was then done in iteration where I worked on the design and showed it to the team and/or my supervisor.
During each feedback session we discovered new things that could be added or edited.
Example:
Changing the profile
Before - All profile information was displayed in a single frame, forcing users to scroll through long forms to find specific details. This made the experience cluttered and inefficient.
After - The information was divided into separate sections, making navigation clearer and reducing cognitive load. This streamlined structure allows users to quickly access what they need without unnecessary scrolling.
Evaluation
Evaluation
Flow charts
Flow charts
While working on the hifi prototype, flowcharts were also made. This was to better understand the user flow. Parallell with this a new idea was made, brought up by one member of the team:
Driving permits for forklifts.
This was important because through research I realized there is no common method for checking these permits. And both neglecting to do so as well as the dangers of operating these are severe.
Driving permits
Driving permits
To better understand the parts about driving permits, we interviewed a gate guard. In addition to this we read through existing documentation on how these permits are handled.
Interview insights
Interview insights
Drivers display different forms of permits; diplomas, cards, papers, emails etc.
No universal type/form of permit.
The guards document the permits in an excel form.
Translating to Figma
Translating to Figma
The insights gathered helped us sketch a flow on how this could be implemented in the app.
I then translated this flow into Figma, and then received feedback on this.
Sign up flow
Sign up flow
The last question left was how the sign up flow should be designed. We already knew the service Auth0 would be used. The users did not already have profiles in the existing systems, and we knew this was something we wanted to incorporate.
To better understand how this should be implemented we started drawing on the whiteboard again.
Through iterations we finally decided on the best solution.
The final product:
Page updated
Google Sites
Report abuse