Empowering Efficiency
In this case study, I share my personal journey as a UX designer in transforming Transflo's Loads workflow. I detail how we developed a node-based workflow designer and driver interface that empower customers to create, manage, and deploy custom workflows with ease, driving operational efficiency and agility in the OTR Freight industry.
Tools
-
Figma
-
ADO
-
Flutter
-
​Prime NG
Roles
-
Lead Designer
-
Design Manager
-
Associate PM ​
-
Design System Manager
Timeline
-
June- July 2025
-
6 week Sprint
Transflo’s New Workflow: Built for Customers, Designed for Drivers
For years, Transflo’s workflow was a basic form generator.
Rigid, limited, and requiring professional services for setup. Customers repeatedly asked for more control, flexibility, and robust workflows tailored to their operations.
We listened.
We built a powerful workflow designer and executor that gives customers full control. Now, they can create complex, conditional workflows that scale effortlessly, no matter the number of stops. Drivers get clear, actionable tasks that guide them through their workday with ease.
The new Loads Workflow seamlessly integrates conditional logic, HOS tracking, and even navigation, making it one of the most advanced workflow solutions in the logistics industry.
Workflow Studio
Problem Statement:
As a back office admin, I need to create comprehensive workflows for my drivers so that every stop is clearly defined and there’s never any uncertainty about what needs to be done. However, current tools only support very simple workflows, falling short of addressing the complex and dynamic requirements of the transportation industry. This limitation creates gaps in operational clarity and efficiency, underscoring the need for a more robust, flexible solution.
Defining the Building Blocks: Segments, Steps, and Actions
Customer feedback revealed that admins and drivers naturally think of their processes in terms of distinct stops and tasks. To mirror this, we designed our workflow structure with three key elements:
Segments: Represent major sections of the workflow (e.g., stops, pickups, drop-offs, fueling) that may involve multiple steps.
Steps: Break segments into manageable tasks, such as filling out a form, starting a detention timer, or simply executing a single action.
Actions: Are the specific operations within each step, like input fields, geofence triggers, or document scanning.
This layered approach simplifies complex workflows and creates an intuitive experience for everyone involved.
By designing around this hierarchy, we empowered our users to:
✅ Customize workflows to match real-world operations.
✅ Streamline driver experiences with intuitive, stop-based structures.
✅ Reduce friction by ensuring only the relevant steps are surfaced when needed.
​
This layered approach simplifies even the most complex workflows and ensures that every step in the process is logical, intuitive, and actionable—for both admins and drivers alike.
Workflow
Segment 1: Pick Up
Step 1: Pick Up Form
Action 1: Text Input
Action 2: Drop Down Multi-Select
Action 3: Date/ Time Picker
Step 2: Pick Up Form
Action 1: Geo Fence Exit
Action 2: Send SMS
Segment 2: Fuel
Step 1: Expenditure Form
Action 1: Text Input
Action 2: Radio Button
Action 3: Scan
The Role of Form Components in a Driver’s Workflow
Form components are the backbone of a driver’s workflow, capturing essential data at every step. From load check-ins to delivery confirmations, these forms ensure drivers complete tasks accurately and efficiently. With dynamic fields, conditional logic, and real-time validation, form components adapt to each job’s needs
Smarter Workflows with Conditional Logic
Not every driver needs the same steps—so we built conditional logic to keep workflows efficient. Using AND/OR statements, steps, segments, and actions appear only when needed, based on load metadata or driver actions. This gives the workflow designer full control over how a driver operates, ensuring they see only what’s relevant—nothing more, nothing less.
Easily Editable Properties for
Every Step
Every segment, step, and action in the workflow designer has intuitive, editable properties, making customization simple. Users can modify titles, descriptions, required fields, visibility rules, conditional logic, and more—all with a direct, in-workspace editing experience. Just select a component and update its properties instantly, without navigating complex menus. This streamlined approach ensures workflows are flexible, easy to adjust, and tailored to real-world operations.
Effortless Workflow Design with Templates
Templates make workflow creation faster and more consistent by allowing designers to reuse segments, steps, and actions. Customers can create their own internal templates for frequently used workflows, while Transflo provides pre-built templates for common use cases—giving everyone a head start and reducing setup time.
Previewing Workflows: A Market Differentiator
Early in the project, I recognized that without a mobile preview functionality, users could easily get lost in complex workflows. I designed this feature to let users run the entire workflow—from start to finish—with sample load data and conditional responses. This not only helped validate design decisions in a real-world scenario but also became a key market differentiator by ensuring clarity and confidence for our end users.
Driver Mobile SDK
Problem Statement for the Driver Mobile:
Drivers are often left confused at each stop due to the current mobile app’s static, non-contextual interface, which fails to adapt to real-time workflow changes. This lack of dynamic, clear guidance forces drivers to interpret their next actions on the fly, leading to inefficiencies, errors, and a subpar user experience. A more intuitive, context-aware solution is needed to ensure drivers receive precise, actionable instructions at every step of their journey.
Four Main Sections
Loads:
This tab functions as the central dashboard, displaying all active, available, and completed loads along with the essential information drivers need at a glance.
Details/ Overview:
Here, drivers can access comprehensive load information—the who, what, when, and where—ensuring clarity and reducing uncertainties on the job.
Steps:
The "Steps" tab is a dedicated workspace that keeps the driver focused on their tasks, automatically opening to their current progress for a seamless experience.
Map View :
The Map View provides a visual layout of all required stops along the route, displaying associated steps and segments for each stop, helping drivers plan and execute their journey effectively.
LOADS
The primary goal of the new Loads page design was to enable drivers to quickly identify and absorb key load details at a glance. I focused on creating a clear information hierarchy so drivers could effortlessly spot loads of interest or those they were actively working on.
Overview
After selecting a load, drivers told me that they immediately need a clear summary of what the job will entail. With this feedback in mind, I designed the overview page to deliver a concise and easily digestible summary of essential load details. This quick reference not only helps drivers understand the requirements upfront but also provides pertinent information throughout their route.
Steps:
The Steps tab is the core of the driver's workflow—it’s where they fill out forms, scan documents, and complete tasks throughout their journey. To cater to different working styles, we designed two interfaces:
Standard View: Allows drivers to select the most efficient sequence for their tasks.
Guided View: For when carriers dictate the workflow in a specific, sequential order.
Our dual-interface design ensures that drivers always know exactly what to do next. Whether they’re following a guided sequence or choosing their own path. Beta testers have consistently praised this clarity, noting that they always have a clear next step in the workflow. One of our key performance metrics focused on improving driver log certification, and early results show a 70% reduction in uncertified logs. By seamlessly integrating every form component from the workflow studio, we created a cohesive, intuitive experience that meets all go-to-market requirements in usability, scalability, and operational efficiency.
Map View:
Our map view seamlessly organizes each stop on a location-based map, aligning the specific workflow steps required at each point. This clear visual overview allows drivers to quickly grasp what tasks need to be completed at every stop. By linking tasks to their geographic locations, drivers can efficiently manage multiple stops and choose the most effective route for their day. This feature not only enhances situational awareness but also creates a flexible, adaptable workflow that streamlines operations and optimizes overall efficiency.
Retrospective:
This project was one of the most robust and complex challenges I've tackled to date.
​
Developing conditional logic that resonated with end users while rethinking the information hierarchy within the workflow studio significantly sharpened my problem-solving skills. I worked closely with product managers and developers, ensuring that every design decision met the real-world needs of our users.
I made it a priority to interface with customers and professional services to understand their current pain points. By engaging directly with drivers, I gained invaluable insights into how they envision workflows, which deeply informed the design process. This user-centered approach was critical in shaping a product that truly addresses the challenges of the transportation industry.
My design process was straightforward yet demanding: I designed the initial screen concepts, reviewed them with product managers and my manager for approval, and managed a talented designer who broke these concepts down into actionable components. This teamwork allowed me to focus on refining our design system and ensure our solution was both cohesive and scalable.
Working hand-in-hand with both web and mobile developers, we navigated a tight timeline with a lean team structure. Early beta feedback has already highlighted areas for refinement, proving that while the project is off to a strong start, there remain opportunities for continuous improvement.
This experience not only enhanced my managerial capabilities but also reinforced my commitment to delivering innovative, user-focused solutions that are ready for the real world.