BookAirFreight

BookAirFreight is a Hong Kong based startup connecting SMEs and freight forwarders through their online platform. Launched in 2018, the startup aims to bring convenience and price transparency to air cargo shipments.

Through their online booking engine, BookAirFreight connects SMEs directly with air carriers eliminating the cost and inefficiency of third-party brokers.
Role
UX/UI Design
Webflow Developer
Brand Identity
Design Tools
Figma
Illustrator
Webflow
Duration
April 2019 - May 2019 (MVP)
Nov 2019 - Dec 2019 (Landing page redesign)
Client
Bookairfreight
Business goal
The startup would like to digitise their client acquisition and freight booking process, allowing new/existing clients to discover and book with a freight carrier online.

Bookairfreight wants to make a traditional business feel exciting and stand out from their competitors.
Problem
The startup has been assisting clients through email in the initial few month and would like to transition manual process to an online platform.
The business was quickly expanded and need a more efficient way of assisting client's needs.
Discovery & Research
  • We started the project by conducting a series of research to help us frame UX challenges.
  • 1. Stakeholder Interview
    Spoke with the founder to establish guidelines for designing the MVP. Understand their current client personas, main user journey, and key features to have. Additionally gain insights into the industry’s requirement when creating a quotation.
  • 2. Competitive Analysis
    Assessing different competitor platforms to identify areas of success, design patterns.
UX Challenges
  • Based upon the research conducted, we chose a few key points to tackle in our ideation and design phases:
  • 1. Enhance the client acquisition and quotation request experience.
    Bookairfreight was acquiring most of its clients through out reach and not enough inbound from their landing page. The team was also allocating too many hours servicing their clients via email. They want to enhance their visibility to potential new clients through a landing page revamp and give them the freedom to obtain a quote whenever through a digital platform.
  • 2. Keep information short and concise.
    The process of obtaining a quotation requires the client to process and input a fair bit of information. This process can often feel lengthy and tedious. How can the information be organised to help clients' carrier decision making?
  • 3. Quotation on the go.
    With their busy work life BookAirFreight clients wants the flexibility to getting a quotation on the go.
  • 4. Standout from their competitors.
    As a young startup, the founding team wanted to differentiate themselves from competitors. They want to appeal to their clients as a young, energetic, and action driven forwarding partner. A contrast to the traditional air freight forwarding industry.
Ideation
  • To start the ideation process we determined the site structure and flow and translated those into mid-fi wireframes to test and iterate through different design options.
Quotation Form
  • The form is broken down into four sections based on the four requirements to generate a quotation. Visually breaking down the form to focus the client on the content and actions required by each section; like a step by step guide to obtaining an accurate quotation.

    Date picker, dropdown, and checkboxes are used through out the form to help clients speed up the process. Progress bar up top to show clients how easy a quote can be generated in three simple steps.
Quotation Results
  • The client’s quotation details are listed above for reference. Key information regarding couriers, rates, and dates are display at the top of each card for a quick understanding of each option.

    Sorted by price, each card is displayed in an ascending order according to price as it’s the main deciding factor for many clients when it comes to shipping. Save this quote allows clients to review the quotation, share it, or use it later for pricing comparison.

    Price breakdown aligns with the startup’s transparent business model. It displays the price details and commission made by BookAirFreight.
Landing page
  • To switch up the tone of a traditional business, I approached the homepage design with design elements which are more playful and create different visual interests as the consumers scroll through the page.

    The homepage display contents for generating a quotation and promoting BookAirFreight’s service as an air freight forwarder. As the user scrolls through the homepage, they’re easily redirected to the quotation platform and find support through links and CTAs.

    The homepage design aligns with the startup’s focused user journey for the MVP, as well as, the client’s need for easy access to quick quotations.
Iterate
  • The startup came back after a few months with feedback from clients  and we started the second iteration of their current website. This time the focus on the landing and branding redesign.

    Client feedback:
    1. Supplier network is super important for clients when they're decided on freight forwarders. There's many shipping companies out there, it's best to understand that you're working with good companies to build trust.

    2. Clients are curious to knowing more about cost saving and what's the secret to Bookairfreight's more affordable pricing.

    3. When working with new companies, clients will try to use more than one source to validate the company's credibility.

    4. Branding of Bookairfreight was too friendly
Redesign Goals
  • 1. Build credibility earlier on.
    2. Expand on the value add from working with Bookairfreight.
    3. Branding development to tune website/company's tone-of-voice.
  • The client's journey on the landing page was redesigned with a priority to build trust and credibility earlier on in the hero section. Once the client lands on the website, they are greeted with an attention grabbing graphic and statement explaining the service of Bookairfreight. The supplier network uses easily recognisable supplier logos to establish trust with site visitors. Testimonials are added as case studies of happy clients. The CTA button language also encourages the clients to get started by emphasising the risk free trial.

    The following section deliver information about Bookairfreight's services in easily digestible sections. Using few text and eye catching graphics to communicate to clients the value and why they should work with the startup.
Landing page
  • Bookairfreight's brand colours and font was redesigned. The previous colour selection communicated a child-like tone which conflicted with the company's goal of building credibility. When developing the new colour palette and font choice, keywords referenced were: Trust, innovation, energetic, modern. Hind Vadodara is the new humanist sans type face used for a modern, clear yet empathetic feel.
Brand Identity
  • This was one of my first UX projects and where I had the opportunity to work on an industry which I had little knowledge about. From the MVP to our second redesign of the product, I've learned about the psychology of designing a landing page and booking platform for the logistic industry. some key takeaways include:

    1. Build trust and loyalty through social proof, recognisable logos and copy writing.

    2. The psychology of colours and how a subtle adjustment in hue can change the message a brand sends off.

    3. Progress bar to clearly communicate how far the clients are from finishing the form; this will help reduce their anxiety.

Takeaways