On 20th May 2020, the government of India announced that airlines could restart operations from the 25th. After months of a complete flight ban, the skies would reopen in just 5 days. And yet, apart from the date, there was almost no clarity around how this would be rolled out — who would be allowed to fly, which airports would be operational, what safety protocols would be adopted, etc. There was a lot of uncertainty around the information available, anxiety around flights being cancelled again due to another lockdown and a general fear of COVID-19. The only certainty was that flying wasn’t going to be the same again.
At Cleartrip we wanted to cut through this fog of uncertainty (making travel simple, remember?) and help our customers make an informed choice-
Should I travel now?
In the best of times, the answer to that question tends to be very nuanced. And these were far from the best times. We decided we’d do exactly what we’ve done well for close to 15 years — build tools that help travellers navigate travel uncertainties, simply.
Enter TravelSafe — Cleartrip’s guide to safe air travel
While there may be diverse opinions on handling uncertainty in general, this is our take on designing for uncertainty, using TravelSafe as an example.
The fundamentals
There’s no single way to handle uncertainty in design. If there were, then there’d be nothing uncertain about uncertainty. However, we’ve found some guiding principles that have served us well on this journey.
- Make good assumptions
- Prioritize usefulness over usability
- Build accuracy over multiple iterations
- Design flexibility into the architecture
1. Making good assumptions
It’s hard to over-stress the importance of making good assumptions in the face of little or sketchy data. So, how do we do that?
Our way is to assume the barest minimum needed to ship a useful product, design to that barest minimum while keeping most other possibilities open (see: Occam’s Razor). Let’s look at some examples of how we handled it on TravelSafe.
The overall structure of the page
The page structure is a key component in answering travellers’ questions around travel. How we structure the page directly impacts how easy or difficult it is for travellers to find the information they need.
Different travellers have different questions to ask- are other travelling, is travel safe right now, is it convenient, will changing plans be easy, etc. Instead of assuming the primary intent for our travellers we took a step back and went with the assumption that some would come to us with very specific questions while others would be looking to explore.
This translated to a layout that rewards specific intent early with quick entry points without penalising the explorers who can, and do, choose to simply scroll.
Airport safety protocols
We knew that the airports were going to open with some safety procedures in place. What those safety procedures would be, wasn’t clear yet. All we had was a document from one airport (Bangalore), in which they had listed down their safety measures.
So we assumed the barest minimum i.e. instead of assuming that passengers would have to undergo COVID tests, we just assumed that they would be screened in some way — maybe by thermal scanners, maybe by COVID test sampling, we wouldn’t know until it was publicly known.
The result — we went ahead with an unordered list UI structure as it would be very easy to update. When the airport authority’s guideline came out, all we had to do was make the list structure more granular.
Airline information
After the long lockdown, it was fair to assume that airlines would compete with each other to win back customers by going the extra mile on facilities and safety. However, we avoided assuming what facilities airlines would compete on.
The barest minimum UI structure which could serve this assumption well was a tabular structure as it would allow us to compare airlines using different parameters.
Aside- Kempegowda International Airport, Bangalore delighted us with this very detailed video release on traveller safety.
2. Prioritizing usefulness over usability
While launching fast is generally good because it helps in validating assumptions, there’s another reason which makes speed a critical factor during uncertain situations, and that is the freshness of data. In the world of COVID-19, where everything is in constant flux, information becomes irrelevant real quick. For example, safety guidelines issued yesterday might not be relevant today. Therefore, putting out useful information quickly is more important than building the most usable product.
An example- On 22 Jun 2020, Chennai put out an announcement that arriving passengers could use their boarding pass as e-pass. The more usable option would take much more time to build, so we went ahead with the quicker option and shipped in less than half a day.
In general, the most challenging task with TravelSafe wasn’t building it; it was convincing ourselves to let go of some spit and polish in the first launch.
After the first launch, we gradually transitioned from updating the page multiple times a day to once (or sometimes twice) a day. Apart from giving us a first-mover advantage, prioritising usefulness paid us back in multiple ways:
Getting the right data quicker
When we first launched TravelSafe, there were multiple gaps in the information available. Safety guidelines were available for only some of the airlines, airports, and states.
By setting up a basic website, we could specifically articulate what data we needed to make TravelSafe more useful. Instead of asking the content team “we need to know the quarantine rules for Maharashtra”, we could say “we need to know how many days of quarantine are required, who needs to undergo quarantine, and which documents are needed to travel to Maharashtra”. This helped the content team in collecting the right data faster.
Building better relationships in the market
By having a useful product in place, we could convince our suppliers to share relevant information with their audience through TravelSafe. Besides, the advantage of being first helped us in building partnerships with some of the key players in the market (stay tuned for an update on this).
Integrating TravelSafe into the booking flow
A key intervention, as part of these larger set of tools for navigating uncertainty, was to give users access to relevant and contextual information while booking a flight. By having a useful product in place, we could introduce this information at different points within our flight booking flow. This would help users make better, more informed choices without leaving the flights booking flow. Here’s what we did.
Setting up a base for our UAE market
A few weeks after flights resumed in India, UAE would also open its skies. Launching quicker in India gave us a base to build on and helped us use our learnings to move faster for TravelSafe UAE.
3. Building accuracy over multiple iterations
While it’s good to start with a flat UI structure to launch fast, as more granular information becomes available, simple structures don’t allow for handling nuances well. A more robust structure is needed in such a case to build accuracy. Without improving the structure, the design itself becomes a hurdle in sharing the right information.
For example, plain text works well when there is little information to convey but when there are multiple points to compare across multiple items, it fails. A table works much better in such a case. Let’s look at such examples of evolution from TravelSafe.
Solving for clear-intent users
When we started working on TravelSafe, there wasn’t a lot of information available on airports, states, etc. There was a generic safety guideline that applied to most states. Specific information was available only for some of the states. This was not ideal. For anyone using TravelSafe, it was much more likely that they were searching for information on a specific route. But this was all we had to work with.
As time passed, more states put out their safety/quarantine rules. We now had the power to contextualize the information for each route. Thus, we evolved TravelSafe from a generic “tell-me-everything” page to a “what’s in it for me” tool — a route-level search tool where customers could enter their route and get the information only for that route.
State-wise quarantine rules
In the beginning, when state governments published their quarantine rules, there was chaos everywhere. Some states mandated institutional quarantine while others were OK with home quarantine. Some states had special conditions for business travellers while others didn’t. Besides, this information was changing rapidly. In such a case, only a text-based approach could handle such an unlimited variation. Besides, plain-text was the easiest to update frequently. Although paragraphs of text were not as easy to skim through, putting the information out was more important.
As time passed, patterns started emerging. Where home quarantine was the norm and was expected everywhere, institutional quarantine was implemented only in specific states and only for specific types of passengers. There was a strong aversion towards institutional quarantine because of all the inconvenience it brought by keeping people away from their homes. Customers were more interested in whether they would have to undergo the trouble of an institutional quarantine.
So, with this clarity, we were able to make the information more structured in a table-format that centred on institutional quarantine. Besides, providing “expand to read more” functionality helped us preserve the finer details of each state.
Airline information
According to the bare minimum assumption we had made, airlines would try to compete with each other. Thus we went ahead with a table structure because it would allow us to put all the airlines together for comparison on similar parameters.
Initially, when airlines started confirming that they would be operating, we started by putting a status for each airline. When more parameters started becoming clear, we added more information. See how it evolved.
4. Design flexibility into the architecture
Given that there are multiple iterations as the product evolves, it’s better to keep the information architecture flexible so that changing one component doesn’t impact the other components. One way to do this is by making the information structure flat rather than tall i.e. by not classifying information into multiple levels of hierarchy.
This makes changing the individual components easier because components on the other levels don’t need to be adjusted.
However, flat structures bring their own challenges. They are more difficult to navigate and find information. Nevertheless, they work just fine in the early stages because there’s only so much information to handle.
In TravelSafe, we built this flexibility by vertically stacking all sections one above the other and then solved the navigation problem by providing a left-navigation which would be present within the view at all times.
Behind the scenes
With all this said, uncertainty is, by definition, uncertain. New problems crop up all the time and past processes are rendered ineffective. This often requires doing things differently on the Operations end. Here are a few things we did behind the scenes that helped us in our journey.
Frequently updating quarantine information
The state-wise quarantine information was something that changed (and still changes) daily. Given the tight timelines and limited engineering resources, we were not able to set up a system where the content team could update the quarantine information directly. The information was hardcoded. Thus, every time the content team asked for changes, the engineers had to manually find each state/union territory in the code and update its information. Sometimes, this would take hours.
This is where our love for spreadsheets paid off. We took the source-code of quarantine information from the engineers, separated the variable information from it, and built a spreadsheet to rewrite the same code using variable data.
With this spreadsheet, the content team could directly make changes to the spreadsheet and it would generate the source code which the engineers could directly copy-paste into their files. The time to update changed from hours to minutes*. Thankfully, the current iteration uses a ‘real’ content management system which updates the website in near-real-time each time a change is made.
*For the geeks thinking why we didn’t link the spreadsheet directly to the website, this is the reason.
Using Whatsapp as a resource channel
While we generally keep work communication limited to work-hours and to Slack and Gmail, it wasn’t enough this time. Work-related communication extended beyond work hours and work apps. Thus, we set up a Whatsapp group (something everyone was comfortable using 24 x 7) where people could post whatever resources they found related to flights and COVID-19. Besides, we also used it for quick updates to everyone outside of the design team (more structured updates still happened on Slack).
Mirroring the website UI in a Google Doc
Because of the scale of this project, there were multiple people involved in sourcing the content. After the first UI structure was ready, we would have to involve all stakeholders for getting the accurate data. One of the things that everyone found useful was a Google doc we put together to mirror the layout and content chunks of the website. This was, by far, the best productivity hack we came up with in terms of time and effort saved.
To sum it up
Humans fear uncertainty. A blank canvas is horrifying to most artists. And when time, effort and money are involved the stakes are only bigger. But uncertainty doesn’t have to translate to paralysis. As we’ve made clear, there’s a way to navigate this and ship products that are genuinely useful.
The value of sticking to the fundamentals was brought home to us when UAE opened up travel a few short weeks after India. And although the Emirati travel landscape is significantly different — fewer domestic routes, more international travel, greater emphasis on visa rules, etc. — we were able to reuse much of the work we’d already done for India.
Building TravelSafe wasn’t all smooth sailing. These have been very unusual times. There was an almost unreal urgency to shipping a product that could cut through the prevailing fog of uncertainty. Teammates had to compromise on their sleep, family time, and hobbies. There was a constant feeling of not doing enough. And many times, we’d question whether the very direction we were heading in was right after all.
But travellers’ response to TravelSafe has been very affirmative. And on the way, we’ve learnt how to deal with constantly changing information, how to step up when it comes to helping each other in getting things done, and how to stay sane through such a time. That is its own reward.