A brand new Air Cargo experience

This is one of the most enriching projects I worked on. I had been working in the airline industry for a couple of years and had not yet worked with the air cargo business unit. Of course it was a whole other world for me to understand. Another type of customer. And I had the opportunity to create a product that was able to reach beyond B2B, that could talk to people.

To be

To become the best air freight service in Brazil for individuals and for businesses by offering an easy, fast, convenient and full experience.

In order to achieve that, our in-house customer understood that we'd need to offer at least the following functionalities: shipment tracking, quotation, order, payment, login and customer area.

As is

The services previously available on the website were just two: shipment tracking and quotation. Quotation screens had a high abandon rate during the flow. The tracking service also had some usability issues. After user tests and analysis, these were some hypotheses of why it happened:

1. The quotation required a prior knowledge of the shippings offered by the company, as the user needed to inform which shipping service he would like to quote, instead of receiving several quotation options and choosing one from there. There was no information to help the user differentiate one shipping from another.

2. The calculation of air cargo transport quote is complex and was not explained to the user. The fees included were described in English only (the website’s default language was Portuguese).

3. The interface often confused and even repelled the user, including unfamiliar words for those who are using the service for the first time. For instance, the screen above requested the AWB code to track a shipment, it is the international air waybill code assigned to any shipped cargo. In this scenario, if you’ve never used this service before, and this AWB code isn’t in evidence on your receipt, even tracking your order becomes a daunting task.

4. It was lacking important information about the service, such as: the estimated time for each shipment; which categories of cargo were restricted or prohibited; how to request the service in case the cargo needed to be collected at the Customer's place.

5. The second step requested some optional information from the user. However, to the user, as it was often reported to the call center, it seemed to be requiring a mandatory login or registration before proceeding to quotation results.

6. By the end of the process, the Customer did not have the option of paying in advance, nor did he know which store was closest to him.

7. And finally, an interface that no longer corresponded to the company’s visual identity. The layout could be more modern and absolutely had to be responsive (60% of accesses were from mobile).

Research and ideation

Research consisted on:

• Benchmarking the best air cargo services websites, including companies outside Brazil
• Asking which online services were important to our current and our future Customers
• Finding out which services were not yet offered by our competitors
• Understanding who these Customers were and how they used our services
• Study important documents such as the Air Transport Terms and Contracts and learn how LGPD laws would apply

After gathering this data, I was ready to plan design workshops with stakeholders and business owners, so we could talk about business rules, improvements to the service, new features, and finally backlog priority.

Here are some of the interfaces from other websites that I researched and considered before starting wireframing my own:

Architecture

An important step in every project I'm working on is my first contact with developers and architects. I do this when I understand that I have enough information to involve them, and before making any decisions with the business owners. So, based on the data I gathered, I discussed all the possible features together with them and help them outline a plausible architecture for this project.

I always try to find out if there are people in the company who have worked with that system before or on the original project. Even if they are not in my squad, I try and reach them so I can get as much information as possible.

Building the Interface

One of the big challenges was to build an interface that still communicates to the previous audience — corporate clients — and also speaks clearly to the new Customers we wanted to reach: individuals and small businesses. Thus, UX writing was extremely important at all stages.

All terms unknown to new customers needed to be used cautiously, sometimes changing them, sometimes giving an explanation in common language as tips.

Furthermore, based on the profile I draw of these users, I focused on designing layouts that were as easy and simple as possible, even instructive when it was needed. In other words, I resorted to traditional components. Clear buttons, well-differentiated hierarchy, separate content boxes, simple illustrative icons, tips everywhere. As it was also necessary to follow the company’s design guidelines, I had conversations with the Marketing team along the way to try to come up with the best solutions when necessary.

Another tricky challenge was the stage of filling out the form, which was legally essential both to generate the order and to make the advance payment. Before this project, the form was a paper document with a lot of fields to fill in, given to the Customer at the store’s counter. It was in a very traditional non-user-centric format and particularly disheartening. I did a very meticulous work with the business owners, looking for a sensible design that would consider the time the user needed to dedicate to that process:

• First, to reduce what was possible in it
• Generate pre-filled or suggestions for filling out
• Make it easier through the navigation itself (for ex., automatically moving navigation from one field to the next)
• Make it easier through the back-end (getting ZIP code information via a third-party API, for instance),
• Separate similar content into numbered stages, making it clear to the user where he was and giving more meaning to the process.

Although I had to put a lot of time and effort into it, it was very worth it to see users making it to the end and giving a good feedback.

Wireframes x Final Design

Prototype

Before development started, the team and the stakeholders had available a high-fidelity prototype to understand each flow and discuss important topics that would not have arisen if not for the prototype.

Development

documents, flowcharts and prototypes. I shared the interface design with the developers using Zeplin, which they agreed facilitates their work.

It was important to advise the team to come to me if they encounter any technical issues, during the development of the app, that could be resolved by a design adjustment to the interface or the action flow.

If you have any questions, please leave your comments below or write to contato@camillareboucas.com.

Thank you!

See more of my UI portfolio at: https://camillareboucas.com/