ui/ux case study interactive prototype

Tablet app for truckers

Driver App 2.0

Jupigo is a software company in the trucking business, providing digital solutions for freight forwarders.

The design team was asked to make improvements on the driver(trucker) mobile app after version 1.0 had received many complains and low ratings from our clients.

I was honored to led this project, from research to hi-fi prototype.


The existing app had 3 major problems which were often mentioned by current users:

1. Button for switching between driver and dispatcher mode. It was very confusing, especially to truckers. They did't understand why we place the button there. It's rare to see someone who needed both.

2. Shipments were organized by groups in a list but displayed individually on the map. Truckers had hard times figuring out which shipment they should start first. They had to called their dispatchers all the time to clarify shipment details.

3. The app was installed on truckers' personal devices. Since location service was always on, it often killed their batteries fast. On the other hand, using the app while driving is dangerous, especially when driving a big truck.




To learn more about our user, we sent a survey to them, asking feedbacks on the existing app;
We asked them to rate the following on a scale from 1 to 5. 1 being strongly disagree, 5 being strongly agree;
We also asked them to explain why they gave certain scores;

Numbers shown here are average scores.

  • Receiving shipments from my dispatcher is easy. 4.6
  • When there are many shipments on my plate, I know which one I should go for first. 2.6
  • Shipments are well organized. 3.2
  • Shipments information (shipment number, address, contacts...) are clear and instructional. 4.8
  • The "dispatch mode" is helpful for me. 1.5
  • Communication with dispatcher using the app is easy. 4.2
  • I would prefer using this app to send proof of delivery. 4.1
  • I would use the app when driving, to lookup shipments. 3.5
  • I would use the app when driving, to message dispatcher. 1.2
  • Any suggestions on how we can improve?

Current users were confident of receiving shipments, however, when shipments piled up, they wish the app can do more on just throwing them on the map.

They had no problem sending/receiving messages, but if a message come in when they are driving, which happened a lot, it's risky for them to view or reply that message.

Being able to switch between "driver mode" and "dispatcher mode" confused them. Some pointed out that there might be truckers as independent contractors, would hire others to drive for them. It would be an edge case which doesn't happen to the majorities.

  • We should consider grouping shipments by looking at how are they relate to each other, rather than treating them as individual items.
  • We should change the way how new messages behave, optimize them to be less distractive yet readable.
  • Redesign the driver app exclusively for truckers, taking the mobile first approach.
  • Since we are only working within the trucking business, in which safety is among its top priorities, we should consider devices with larger screens rather than being limited by the real estates of smartphones.


The best way to find out users work in their own environment is to conduct interviews with them in their trucks. We also ride with them on a couple delivery missions to observe how they interact with the existing app.

We kept our hypothesis in mind when interviewing, trying to get more insights from them.


The image on the right shows a perfect picture of what truckers are dealing with everyday.

Problem One, Communication:
Smartphone that are often used for navigation and communication, are too small for truckers to operate in the cabin. Operating a cell phone when driving is just not safe.

Problem two, ELD:
ELD (Electronic logging device) is mandatory in the trucking industry. There are many ELD providers but they seem to only focus on providing solid devices, but not intuitive user interface.

The Peanut Butter Problem:
Peanut butter is a good protein source, but in our research we found that while truckers spent most of their time on the road, they often had a hard time finding places to eat and rest well.

A Closer Look at Our Users

Project Goals

  • Design a dedicated app running on dedicated device, for truckers
  • Find a better way to organize shipments
  • Make communication effortless
  • Lower distraction when driving
  • Bonus: remind and guide truckers to places where they can park and rest


When exploring possibilities from both hardware and software side, we came up with some basic functionalities this device should carry. We focused on the benefits and limitations that the hardware may impact user experience.

Information Architecture

We put together a skeleton of this new version, tried to sort out the information hierarchy.

Since we found out during interview, that safety is crucial in the trucking industry. We separated the use cases into "When parked" and "When driving" from high level.

User Journey & Task Flows

Going back to the user, this time we moved on to defining the key moments in a day of trucker's life. Those could help us understand how to make his/her day better.

I also created the task flows for those interactions.

View PDF  


Moving forward from the task flows, it's time to to populate wireframe ideas on the whiteboard.

We collected all our drawings and generate our first set of wireframes.

Again we adapted two different designs intentionally for "When parked" and "When driving" -- Parked mode and Drive mode.


Using an iPad mini, which is about the same size of our ideal device, we conducted user testings with inside their trucks. We wanted to validate our design with them, and tried to answer these questions:

  • Do users interact with the app as we assumed based on the task flows?
  • Are those flows hard to be memorized? Are users able to learn and adapt this new design pattern?
  • Are users motivated to finish each task?
  • Is the information hierarchy clear and easy to understand?
  • How do users rate each task based on its frequency?
  • Is there anything else we missed since last interview? And how can we improve based on that?


Changes we made after the user testing:

Switched to design for landscape mode because we found that it helps us structure our information better. Adjusting font size that fulfilled minimum font size required by the viewing distance.

Designed a toggle button which takes users back and forth between map view and list view of their shipments. We found that those are two of the most used methods to look for their orders -- "focus on their trip using map" and "focus on the shipments details side by side to each other".

Restructured the Drive mode to meet users' goals yet reduced frequency of possible interactions to lower distraction.

Using map view as background of Drive mode, we could potentially shows trucks their POIs and guide them there.

Visual Design

Jupigo's brand color is used throughout the app in order to maintain continuity. However, night mode uses a color pallet on the opposite side, enhancing the night drive experience by reducing brightness, yet keeping contracts the same as day mode.

Interactive Prototype

When truck is parked:

When driver starts driving:

Conclusions & Reflections

We were able to achieve our goals set after the interview phase. Trucker's needs are better fulfilled by the redesign. There are still blanks we needed to fill, to make both sides (truckers and dispatchers) work together smoothly.

During research and planning, we wished we could look more into our competitors, learned their solutions and analyze pros and cons, and use these findings to improve our upcoming design.

Ask questions like, "What do you think that button will do", instead of explaining your thoughts right away. I know this is an obvious one, but when listening to the stories of our trucker friends, we even forgot that we were in an interview!

As we kept simplifying the interface, we didn't pay attention to labeling our menu icons. If we decided to go with icons with no label, we should do an icon study to pick the ones that resonates with users the most.

We want this app to be scalable and flexible. We know if it can include 3rd party hardwares (e.g. dashcams, ELDs, and onboard computers), it could create an ecosystem and help us reach more customers. 💰

If you ran out of ideas, make you grab a coffee and sit down to chat with your users!

That's it! Thank you for viewing. Are you ready for the next one? 👇