This trucking logistics startup provided freight hauling services to various industries. As a startup, they had a small team trying to manage lead generation, sales, and operations. That’s a mighty tall order.
I was hired to design their website in a user-friendly way that would appeal to anyone from a person looking for competitive freight hauling solutions to a truck driver looking for new opportunities.
There were two critical areas of their business that they struggled with the most: talent acquisition and lead generation. My goal was to automate as much of this work as possible, allowing their small team to focus on more valuable aspects of the business like their sales pipeline, operations, and managing existing client relationships.
In my first meeting with the client, they gave me an overview of recruitment and lead generation challenges and how they saw a new website as a tool to combat them.
To supplement and confirm the client’s information, I conducted user research on two main target groups: drivers and freight brokers. I interviewed their current clients and prospects to identify what factors informed their decision to choose a carrier.
Insight 1: It’s important to easily view where shipments are during transit. They felt like most companies typically lacked a way to view the supply chain status during transit.
Insight 2: Costs and timelines needed to be accurate, and possible delays needed brought to attention earlier rather than later. Nearly all interviewees had experienced unexpected delays and additional costs from other freight hauling companies.
Insight 1: Compensation, benefits, and time off are essential information to have before applying to openings; and were often not mentioned until late into the interviewing process.
Insight 2: Application processes were often too long and cumbersome. They wanted to be able to easily apply without entering a lot of redundant information.
With a shoestring budget, more elaborate methods of information architecture development were off the table. Instead, I used a mind mapping application I already owned to craft a content flow for the site.
I then enlisted some existing clients to participate in a bootstrapped card sorting exercise to validate my sitemap and verify what information they most needed to choose a freight partner.
Because the drivers I interviewed were generally less tech-savvy, the information architecture was built with usability edge cases in mind.
The below image represents a glimpse at the brainstorming and ideation that led to the initial prototypes. The website needed to be easy to navigate while effectively funneling interested parties to contact Corona Northern.
Initially, I examined various comparative experiences, including larger competitors’ sites, businesses in similar verticals, and the latest research on CTA efficacy in B2B applications. I spent a lot of time looking at the experiences of their larger competition to see if/how they solved some of the challenges they were facing.
Because the budget was so small, I did everything I could to glean wisdom from successful brands and, where applicable, emulate (but never duplicate) their work in my designs.
[insert sketches image]
My initial low-fidelity prototypes incorporated many assumptions from my user research and competitive analyses. I’d later discover that several of my ideas didn’t work out in testing.
When I sat down with my testers (many of whom were the same users I had previously interviewed), I found that, while the layout was very typical for the time, my users found performing specific tasks more challenging than I had anticipated.
Through three rounds of testing, I refined the design to a point where users who had little technical skill could efficiently complete their given tasks.
Here are three of the revisions in more granular detail:
At the time, most sites were still being built with hero carousels. In the spirit of not reinventing the wheel, I incorporated one.
What is evident with the benefit of hindsight is that unless prompted, not a single user explored past the second slide.
To solve this, I decided to break the content of the slider into sections on the body of the page. Once the change was implemented, I saw a dramatic increase in the content users interacted with.
At first, I designed the site with lots of subpages. Every service had its dedicated page, and as a result, I had a relatively sizable sub-navigation menu. Because of this, I initially implemented a submenu similar to apple.com’s. In testing, our users didn’t understand that it was part of the navigation and, in practice, found that going to a different page for each service was challenging.
To solve this, instead of incorporating a more traditional drop-down menu, I combined all services into one page with a clear call to action: “Get a Quote.” Users were able to process the information more efficiently, and in testing, our conversions increased.
With the initial prototype, I made the site as compact as possible, thinking that keeping most of the content above the fold would lead to better conversions. My testing did not bear this hypothesis out; in fact, testers repeatedly commented that the site seemed congested and difficult to scan.
In light of that information, I opted to go with a more open design that incorporated a lot of white space. This allowed the user to digest the page’s content more easily. In testing, our users preferred the new design and had a much easier time completing their assigned tasks.
At the start of the project, the only asset I was given was a logo that they had previously commissioned and instructions to incorporate a red, white, and blue color palette. I edited their logo to incorporate their chosen colors.
For the site’s interface, I chose to keep things as absolutely familiar as possible and always err on the side of legibility.
With that in mind, I built out a basic design system as the primary source of truth for this project that would allow me to ensure absolute consistency across pages.
With the design system created, assembling my pages was a snap. This preparatory work reduced technical complexity and established a familiar pattern for the user.
Here’s a look at the final design.
After the client approved the final designs, I handed off design files to my development partner.
I created detailed notations on the design files and answered any questions that came up. I made myself available throughout the development process to work in cross-functional collaboration to ensure a pixel-perfect final product.
4x Qualified driver applicants, +300% New business close rate (seriously!)
The site launched alongside a more extensive marketing initiative that included search engine optimization, Google advertising, and more.
The final results of our work were immediately apparent.
The number of qualified drivers applying to roles quadrupled in the month after launch, and they were quickly fully staffed.
There was a massive influx of high-quality new business prospects; not only that, but because we targeted the right audiences, their new business close rate more than tripled in the first six months.
The client was ecstatic, and I was proud of a job well done.
