Rebekah Champa
Sr. UX/Product Designer based in the Austin, TX area
Mobile Booking
COMPLETED: MID-LATE 2022
Scope
Medium (2-4 mo.)
My Role
Lead UX Designer
Platform
Responsive mobile-first approach
Tools
Sketch, Abstract
Project Summary
This project was a segment of the larger Mobile Load Overview project. Check out larger project to view user and persona insights, research, iterations, and landing page designs. This portion provides our Reps with the ability to book an available load right from their mobile device.
Objective
To build an easy way for Reps to quickly book a load and input relevant details and information.
Mobile Booking Process
We divided the booking process into 4 steps to make it simple to complete important information in each step and easy to tell where in the process you are at any given point. This ensured that necessary information was not missed and the booking experience was as smooth as possible.
Why Dark Mode?
I chose to design the booking process in dark mode even though the regular load overview experience was in light mode. The reason for this was to make the booking process command greater attention from the user due to the critical information needed in the process. The idea was that the user would feel the difference from just looking at load information to actually securing, selling, and locking the load (preventing the load from being booked by anyone else).
Attentions and Error States
Before starting the booking process, we wanted to surface any attentions or errors that may be relevant to the load that our Reps would need to be aware of, as well as any actions they may be able to take.
Initial "Attentions" Callouts
Errors
Loading UI
Cancel Confirmation
Step 1 - Select a Carrier
The user searches for a carrier and inputs carrier details. In some cases this is auto-filled (like if they are coming from a carrier or offers screen).
Select Carrier
Smart Search
Carrier is Compliant
Carrier is not Compliant
Input Error
Step 2 - Truck Information
In step 2, the user inputs any relevant information about the truck, empty city, empty date/time, and type of equipment, as well as optional information about the drivers.
Main Truck Information (Req)
Smart Search
Date/Time Picker
Additional and Optional Info
Step 3 - Carrier Charges
In step 3, the Rep will put in any charges they have previously agreed to with the carrier as well as any per mile charges such as fuel. They can add as many charges as they need as well as edit mistakes.
No Charges Yet
Create New Charge
Input Examples
Charges List
Available Actions on List Items
Edit Charge
Delete Charge
Step 4 - Comments and Rate Con
In step 4, the Rep will add any internal comments they wish as well as choose where to send the rate confirmation. Then they will move on to the preview and complete the booking.
Comments and Rate Con
Rate Con Options
Preview and Book
When the Rep is satisfied with the information in the preview, they will book the load, see one of several randomized validation screens while they wait, and get their booking confirmation!
Booking Preview
Randomized Validation States
Booking Confirmation
