Designing a Better Platform for Truck Drivers – This is Fr8Hub
A look at how my studio and I approach product design, starting with a satisfying user experience and working toward an accurate extension of the company’s brand identity.
Fr8Hub is a marketplace that connects shippers with carriers more efficiently and at a lower cost than existing methods like brokers and load boards. For those not steeped in trucking lingo, load boards are essentially “Craigslist for trucking” where companies post loads they need to move, and truckers respond with the price at which they can haul said load. It’s messy, old school, and favors the load board platforms, who take a sizable cut of the transaction for simply playing host to both parties.
Enter Fr8Hub. Here, a centralized digital platform provides the tools necessary for shippers to easily post the freight they need to move, and for drivers to find those loads to transport. While on the surface it sounds like the load boards I just described, Fr8Hub offers two key advantages:
- Fr8Hub’s fee is smaller (~20% compared to brokers’ 25–35%)
- Fr8Hub’s tech. platform is an end-to-end shipping management solution.
Rainfall was asked to design the platform’s user experience to encourage repeat use, and cater specifically to individuals who are not avid technology enthusiasts. This meant addressing complex processes one by one to remove unnecessary roadblocks and keep users engaged as they’re guided through each transaction, the principal of which (shipping) takes several days.
To add to the complexity, a single experience lives cross-device, as both shippers and carriers use desktop and mobile tools to facilitate the transfer of documentation, as well as communication and shipment status updates from initial posting to final delivery.
Just like truck drivers we needed to show up. Here’s how we delivered.
The Fr8Hub platform design brief
Fr8Hub must cater to two types of users, each with a unique set of needs and technical know-how. Those two archetypes are Shippers and Carriers.
Shippers are companies with goods to move.
Their freight might be pallets of bottled water, frozen food, or car engines. Regardless, these loads need to arrive at their respective destinations without delay. Shippers are no strangers to digital tools, but are accustomed to finding drivers by posting individual shipments to load boards as mentioned previously, or by paying inflated shipping costs determined by brokers’ high take-home rates.
Due to a lower transaction fee, Fr8Hub offers shippers the opportunity for lower rates as well as direct access to a community of trusted and verified drivers who are immediately available.
Carriers, or owner operators, are the men and women driving tractors needed to carry shipments.
They are accustomed to browsing load boards online, but are often forced to rely on low-tech. conversations with brokers to find find work, especially shipments that take them to desired destinations, or help them meet monthly revenue goals.
Carriers are Fr8Hub’s key customer, as mobile tools greatly increase their ability to efficiently find new jobs while on the road, as well as manage the logistics related to their current shipment. Without the presence or interference of a traditional broker they can focus on what they care about: safely and effectively completing each job while providing for their families.
How Rainfall approached product design
Rainfall designed an intuitive experience that streamlines interaction for both shippers and carriers and caters to their individual needs and behaviors.
By developing an efficient and engaging interaction model, more loads are posted, more drivers earn better wages, and more users return to the marketplace, choosing Fr8Hub for an increasing number of loads.
Competing via design was an important and intentional strategy given that Fr8Hub’s key competitors are all backed by massive funding and best–in–class technology platforms. Fr8Hub has the tech, but not the huge marketing budget, and subsequently needed to sell itself based on the simplicity and usefulness of its platform.
With that in mind we stripped the brand’s visuals down to their bare bones and relied on three things to carry the experience:
- A map
- Clean typography
- Considerate motion design
1. A map is central to the product experience
From the moment a shipment is approved, its ongoing location and progress towards the intended destination are paramount. We put a map at the center of the experience and built all interface elements and interactions around it. From a single location carriers can view their entire fleet, and shippers get real-time updates of all loads in progress.
While this may seem obvious, the real breakthrough was using a single map that adjusts its content and surrounding information depending on user context. This approach creates a continuous thread of interaction, void of page refreshes, that succeeds in maintaining user orientation.
See the map in action throughout four key tasks:
Managing all active loads and drivers
Larger carriers might have hundreds of trucks actively moving loads throughout the U.S., Mexico, and Canada, so we designed the core experience to scale from this use case down to the other extreme — a single driver managing the movement of their own load.
At any time, information regarding each driver’s position as well as their status is indicated with a pin, and additional data is exposed in a list on the left. The two elements can be toggled in order of importance, and key actions such as booking future loads for each driver can be initiated from this point.
Posting equipment to the Fr8Hub marketplace
Carriers and drivers are brought onboard by enrolling their equipment in the marketplace. The map takes charge, as carriers start the process by specifying their desired origin and potential destinations, indicating a qualified driver (which may be themselves), and adding certified tractors and trailers. Shipping lane preferences can be adjusted at any time, which allows carriers to adapt to market demand.
Pairing a driver with an available load
Once carriers and drivers have enrolled their equipment on the platform they will see all available freight that matches their preferences, and can choose to bid on enticing shipments. After indicating the minimum price per mile at which they’d carry a load, the driver’s bid is sent to the shipper for approval, and a match is made. Throughout this process the map provides additional background, orienting the user in terms of their load’s origin, destination, and anticipated duration.
Carrying the load
After connecting a shipper with a carrier, Fr8Hub’s platform manages all of the communication and document coordination necessary for proper pickup, transport, and delivery, including the bill of lading and insurance information. Throughout the life of the job all parties can connect via instant message, and the driver can update the shipper if there are any issues along the route.
The map provides shippers with access to real-time location information for all open jobs, and serves as an entry point for driver information, load details, and real-time communication.
2. Typography activates information hierarchy
Fr8Hub’s brand font is Calibre, a face that excels in legibility through multiple weights and clean, humanist geometry. This diversity in form is a designer’s dream, as it allows us to create a high level of contrast despite large amounts of content.
For Fr8Hub’s product we consider the presentation of each weight in addition to various sizes to direct a user’s focus toward whatever task is paramount in each flow. Surrounding this primary information we also display the wealth of data necessary to complete that core task with the intention that it does not interrupt the user’s expected journey.
A simple set of type rules
Fr8Hub’s marketing messages follow a Bold + Regular combination that create a natural conversation through their juxtaposition. We brought that scheme to the product, minimizing each data point to just two lines, one bold, one regular, to force information to be succinct, actionable, and legible. When qualifiers such as units of measure are required, we actively employ multiple weights and sizes per line to further enhance that legibility.
As seen here, multiple pieces of information can be presented in confined real estate without sacrificing clarity. This continues Fr8Hub’s brand promise of transparency and honesty beyond their guiding principles through to the physical design of the product’s various screens.
3. Deliberate motion design inspires engagement
Ignoring sound design and haptics, a product’s experience is a combination of three elements: the interaction model, visual design, and motion design. These elements determine the feeling of the product, and more importantly are an extension of the brand’s identity that’s increasingly of greater significance than their traditional visual identity.
Poor product design and execution reflect poorly on the brand, and deflate user perception of quality and trustworthiness. Combine that with the ubiquitous presence of well-crafted platforms like Facebook and Instagram on most consumer devices, and expectation for excellence is high, even for young startups.
All of this is to say that Fr8Hub’s perception of quality needed to be exceptional, and motion design was the glue that bound excellent user experience with visual design to make that happen.
Motion design — inspired by transport, and items showing up
- Inspired by transport
Side to side movement between views connects the experience - Items showing up
Sequential loading paces the user’s consumption of information
“Sliding” and “appearing” are Fr8Hub’s two key animation tactics, as we avoided more “bubbly” or “bouncy” approaches used in many consumer-facing products.
Regardless of the device context in which users interact with Fr8Hub, these two pillars make the experience consistent and familiar.
On mobile specifically, motion is incorporated into the gestural interaction framework, with vertical movement aiding in the completion of a task, and horizontal movement indicating a transition to a different task.
Fr8Hub’s brand personality prevails through consistent, friendly execution, designed with just the right level of elasticity to establish an approachable personality while also maintaining the sophistication required to develop trust from its broad range of users. This method of animation extends Fr8Hub’s conversational character beyond marketing materials and typography to the product experience, where the brand’s identity must balance professionalism with affable customer service.
Fr8Hub’s product framework combining a map, considerate typography, and reserved yet intentional movement, drive an experience that stands up in an increasingly noisy category. Prospective users are easily compelled to give Fr8Hub a chance, and current users are happily committed to shipping with the platform.
This eagerness is due in large part to the platform being a natural extension of the brand and a materialization of the company’s belief that pairing shippers and carriers should be far more simple than alternative methods.
Current mileage
Fr8Hub has seen strong traction in its early stages as an increasing number of shippers and carriers return to the platform after each successful load, and larger national shippers have signed up to ship recurring loads.
Continuous iteration and testing make the product is a joy to use, and promotes the importance of user experience to the success of the platform.
Marc founded Rainfall, a brand experience design studio in Seattle and New York that specializes in graphic, app, and website design. We are always hungry for new clients. You can also follow Rainfall’s work on Instagram. Or reach out directly to discuss product design and branding.
This story is published in The Startup, Medium’s largest entrepreneurship publication followed by 289,682+ people.
Subscribe to receive our top stories here.
