Designing a software solution to provide a better user experience for over-the-road freight customers.
Seeing through the customers’ eyes and designing an application interface according to user research results.
​

The Team
-
Director of Product Experience:
John Karl
​
-
Product Owner:
Steve Zarkos
​
-
Development Architect :
Denis Santana
​
​
Applications
-
Sketch
-
InVision
-
Anima
-
Zeplin
-
Maze
-
Figma
About
Client - Transflo:
Software solutions for over-the-road freight movement.
Roles & Responsibilities: I was the lead UX/UI designer. I conducted user interviews and user research to define the problems and ideate potential solutions. In addition, I created a user journey maps, user flows, Mid fidelity and High-fidelity wireframes and led user testing sessions.
Project Timeline:
I took the project in February 2021 and development completed in Oct 2022.
​
Overview
There are a lot of tasks involved in running a trucking company, no matter how small your fleet might be. In order to operate smoothly, Driver Managers needed a streamlined and simple way to connect their drivers to the Transflo Mobile + App.
One of the biggest challenges is creating and developing a system that provides a one-stop solution for fleets to manage their drivers.
Using the One Portal Platform, we will create a role of a Fleet Manager who can create drivers, send invitations and allow for integration to carrier TMS driver management solutions.
Doing so will ease the driver onboarding process for the drivers and the driver manager. The Carrier’s operations team will most likely manage this. It could include Safety Managers, Driver Managers, and HR admins.
The high-level screen would surface the ability to see the total license/seats the fleet has purchased, the ability to see how many drivers/seats have taken seats (license, seats, etc.), the ability to add drivers individually, add drivers through bulk upload, add drivers via API, ability to activate drivers, ability to block drivers, ability to remove drivers, and the ability to see historical drivers that have been removed.
The application design will offer solutions to the existing challenges and essential functionalities to enhance users’ experience.
We initiated the design process with the end-user in mind, and deeply understood the users’ and market’s needs, to design a simple and delightful experience.
Objectives
-
The main object of this project was to create a single sign-on solution for Transflo’s enterprise of applications.
-
Design the software from scratch and incorporate smart solutions by learning directly from the customers - what/why they will use the software, what can cause problems, what they are looking for, etc.
-
Provide a SaaS platform and a single sign-on portal for Transflo customers.
-
Make sure it is an easy-to-use software and the user experience is built for convenience.
-
The proposed product design should also meet several dimensions that enable the essential services and enhance users’ experience.
-
We also wanted to use a few predictive technologies to help users find important contextual features.
Challenges
-
Create a design better than existing/competitors’ software that attracts users through a simple and accessible experience.
-
The software structure, user interface, and functionalities must be designed to connect with its users better.
-
Figure out the ways to enable users to understand the product at a glance and easily achieve their goals.

User & Audience
-
Back-office Admins for transportation companies, personas ranged from finance to company Admins, human resources, drivers, safety coordinators, and more.
-
Driver management was designed specifically for driver managers and to be able to control what drivers had access to their mobile plus application subscriptions.
The Design Process
-
The Transflo One Portal was a massive project and had multiple individual features and functionalities, with each of the features and functionalities we followed this process to create a user-centric application.

1. Discover - Understand
-
A single sign-on solution has become table stakes in the transportation industry in the last few years, Transflo had a unique opportunity, because many of our competitors had already launched single sign-on portals which gave us an opportunity to learn from our competitors.
-
We were able to take a deep dive into learning about our competitor's platforms through talking with customers as well as receiving login access to similar single sign-on portals.
-
Utilizing the success and failures of our competition we had a great jumping-off point.
​
2. Define – Empathize
User research:
Firstly, we performed qualitative information research to give ourselves some direction. For example, we wanted to find out...
-
How often have users encountered difficulties performing different tasks?
-
What are their current pain points, and needs?
-
We also figured out what motivates or demotivates users from using the existing solutions.
User interviews:
The product owner and I conducted in-person interviews with many potential stakeholders to understand how our applications are being used, under what circumstances they will trigger issues, and how effective the existing solutions are.
We also figured out why they use the applications, what they look for, and what they need, trying to learn and understand their experience and pain points.
Throughout the interview, we received the voice of the customers and gathered qualitative data about their goals, needs, frustrations, and motivations.
​
Here are the questions we asked during the interviews:
​
-
What are some of your most significant pain points or gripes when interacting with the applications?
-
How would you describe your typical workday experience managing the Transflo suite of applications and the ability to manage your fleets?
-
What controls and provisions would improve management of both your fleet and your employees?
Findings from the interviews:
​
-
Throughout the interview, we came up with an initial requirements document. It helped us implement changes based on customer requests.
-
We utilized that requirements document to create mid-fidelity and high-fidelity wireframes.
The user research and interviews helped us confirm or invalidate assumptions about our users and their expectations regarding both Transflo's products as well as how they're utilizing our competitors.
3. Design - What is next
After specifying the issues and analyzing each stage, we were prepared to produce solutions. We also considered what design principles are essential to carry through the product.
Brainstorm
Conception After consolidating all issues and prioritizing them according to their frequency, the research outcomes and brainstorming enabled us to narrow down the approach.
​

User Journey map
We analyzed and mapped out the user journey to find the redundancies in the process and saw how we could simplify the journey and help them reach their most important goals.
​

User flow
Mapping out the users’ steps helped us create a frictionless user flow that allows them to quickly and seamlessly perform the specific tasks in the software.

Back End VS User Experience:
One of the most difficult aspects of this design process was creating a way to manage both users and drivers in a way that matched our backend processes and database organization. To create a seamless user experience while taking into account how our systems operate, I had to map out both database organization and user paths to completely understand how the backend would support the user's end goals.
User relation to Transflo Database

Group hierarchy visualization:

Customer, user, group, driver correlation map:

Hierarchy and provision chart:

Mid-fidelity Wireframes:
We started building screens, buttons, and all sorts of other artwork, trying to create something clean, modern, and simple. Then we defined functionality, content, and navigation through Mid-fidelity wireframes. It helped us conceptualize the application’s blueprint early in the design process.





Hi-fidelity wireframes:
We created clickable Hi-fidelity wireframes, maintaining interaction and visual consistency to communicate the design strategy effectively. This is considerably quicker than diving into the complex application build.
​
Each feature was broken down and managed as its own individual product. This allowed us to get extremely granular in our testing and designing. Breaking up a large project like this into individual pieces allowed for more precise updates based on user feedback.
This is an example of a single-feature prototype, almost every feature in the entirety of the application was broken down by feature and designed and tested individually.
Solutions & Features:
Users can access the best of Transflo Technologies in a single place. It puts the speed of Transflo directly in the browser and provides customers with powerful tools to manage and administer users, groups, and drivers.
This can be broken up into three parts:
​
-
The shell that houses the applications

2. People management
The application section that provisions users who operate the applications within the portal. These are applications that help manage documentation, hours of service, the mobile menu admin (this controls how Driver’s applications look and function), and any other application in the Transflo back-office ecosystem

Driver management:
Allows Company Admins to invite drivers into the Transflo mobile plus application. Many of the companies have multiple fleets within their subscription; each has its unique dashboard that drivers can access on the mobile plus application. Through driver management, driver managers can manage what fleets individuals or groups of drivers have access to.

4. Validate &Deliver
Conducting usability testing helps detect issues in the design process. So, we created tasks based on the persona’s goals, needs, frustrations, and motivations found during user research and interviews. We then asked the participants to complete the tasks.
To measure how ‘usable’ the application is, we measured three things:
Effectiveness - Whether users can complete a task
Efficiency - How long it takes them to complete a task?
Satisfaction - How do users feel about the task?
The outcome of the usability testing The Hi-Fidelity wireframes tested exceptionally well during the last round. We received positive reviews, and not many changes were made to the application based on the usability testing.
​
​
"What our customer said"
​
Brent Ellis, Decker
“Driver management concept is intuitive. We are really looking for a way to manage drivers, access, and invites to the application. We want interconnectivity between TMS and Transflo Driver Management.”
Nick Brooks, Western Express
“Great design work.”
Courtney Jaeger, Heartland Express
“We will get the most out of the Driver Management tool due to the ability to view driver status to have visibility of drivers who have set up their mobile app.”
Fred Bruno, Sunteck/Evans Group
“Transflo is ahead of the curve.”
Ryan Steagall, Big G Express
“Sees the value and need for this product.”
Tyler Coatney, Acme Trucking
“Looks simple and easy to use”
Ray LaPrade, CalArk
"Truly meets the need and gives us more."
Next step After completing the usability testing, we worked closely with the product developers to ensure the correct implementation of the application as designed.
Projects outcomes:
​
One portal and driver management are officially in beta testing, and the reviews have gone very well so far. Coming out with the design based on user research helped us understand a lot. We created simple and intuitive software solutions to make over-the-road freight customers’ lives more convenient.
We followed a light design style because we wanted the project to come off friendly and ultimately not give off a technical “database” vibe. Instead, the design will give users a familiar and delightful experience.
​
To learn more about Mobile plus and updates to our Driver experience please check out my case study for the Mobile+ Refactor.
If you skipped over the video I recommend watching it now to understand what Transflo ONE brings to the table.
The next step in this process was to optimize our mobile application for the new on boarding experience as well as bring new functionality to drivers Read more about our Mobile Plus Refactor.