Chocolate. Cheese. Watches. Just some of the things you think about when you think about Switzerland but the underlying association is high quality.

Switzerland also has a rich history in the world of graphic design, especially creating many wonderful typefaces we all use today. Apple adopted Swiss made Helvetica for iOS 7, 8 and OS X Yosemite, until they designed a typeface of their own which they introduced in iOS 9, Mac OS X El Capitan and the Apple Watch.

Swiss style of design can be defined simply as an authentic pursuit for simplicity and probably best described by French writer, Antoine de Saint-Exupéry:

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

You’ll be able to see these principles used throughout the design of Swiss’s flight booking system.

Homepage

Let’s start with the most important piece of this design: the booking process.

The number one task people need to do on a flight booking site is, yep you guessed it, book a flight. It’s surprising the number of airline websites that compromise on the quality of experience by shoving offers or other nonsense in our faces, distracting from the most important feature of the site.

While Swiss do have offers on the homepage, they’re sensibly placed further down the page. The gap between the UI for the flight search and the offers is huge, giving it the room to breathe and attention it rightly deserves.

The simplicity of the design of the search UI will be a joy for anyone who has suffered through frustrating booking designs (which is probably everyone who has ever flown).

It entices people to use it by only presenting text fields for where you want to fly from and to, making it less intimidating. Up interaction, it reveals the rest of the options required to begin your search. This is a nice gentle way to ease people into the long process of booking an airline ticket online.

I studied the Swiss website multiple days and I was happy to see details I entered into the search area were remembered when I returned each time, including dates and the number of people travelling.

Attention to detail such as this gives me confidence in the design as a whole because it isn’t a required feature but shows how extra thought has gone into the design work. A sign of great design.

Copywriting

Swiss have cleverly adopted the association of Swiss quality from other areas of Switzerland’s history and applied that to themselves and their message.

Here’s the headline from the homepage screenshot above:

“Swiss quality. The travel version.”

This is good quality copy because it’s very simple and builds trust. If you’ve never flown with Swiss before, you can take some faith in them because you know things like Swiss chocolate and Swiss watches are associated with quality.

Clear, distinct messaging as simple as this could be the difference between flying with Swiss or any other airline out there.

There are various messages that rotate, although they must be set by a cookie or something. You’ll have to enable private mode in your browser and refresh if you want to see them all. Or you could have a look at the following screenshots:

The last two are both a little strange. They don’t have the same impact because they aren’t playing off the strengths of Switzerland like the others and seems a little weak as a result. The last one at least provides some value although it is generic and little dull.

Other than the last two, the copywriting on show here has a clear understanding of the Swiss, both the country and the airline. In this case it’s as easy as knowing what makes Switzerland so appealing and using that in the messaging.

Navigation

The limited number of navigation items keeps things very simple. This is a prime area where lesser designs would compromise on the experience by placing links to “offers’ or “specials”. Keeping the navigation simple respect customers time and attention.

Hidden behind the simple navigation is a world of information necessary in running an airline. If you have to include a lot of information in a design, avoid bombarding people with too much information by taking the same approach as Swiss.

Looking at the navigation beyond just the visual design, it’s a little confusing what exactly “Fly” entails, until you hover over it revealing the dropdown.

Talking of the dropdown, adding a visual clue to “Book”, “Prepare”, “Fly” and “Explore” to indicate the dropdown menu would be an improvement so people would be more aware there are more options available.

It would also distinguish the main nav from the login link more. It’s a strange omission because you can see the good design practice has been applied to the secondary navigation.

The login link is, quite rightly, an important part of the site as it has the same visual weight as the main navigation. However, it’s separated from the main navigation to identify itself as a unique action and the whitespace allows those who need it to find it easily.

Selecting Flights

Purchasing flights is a complex system to design for as there can be a high density of information in various circumstances, such as connecting flights for example. Great design is critical to ensuring a smooth online journey.

On this screen there are two sets of flights (both have connecting flights) to select on my theoretical flight with Swiss from London to Tokyo. You can see that the first one has a white background and the second has a grey one. The two background colours alternate to visually differentiate better between flights (or set of flights), making it easier to scan a long list of flights but it even helps when there are only two to choose from too.

Extra visual weight is added to the selection of a tier (a tier being “Economy Saver”, “Economy” and “Economy Flex” in this example). A selected tier not only has a highlighted radio button but the surround box of the entire tier is larger than the others and is also a different colour. You can be absolutely certain of your selection.

On top of that, each time you select a different tier, they animate to their new sizes, brining an extra degree of certainty to your interaction.

As soon as you select an option, the summary bar at the bottom is filled with your flight information and you can proceed to the next section with a clear call to action. It’s good practice to have a summary of costs, even part way through the process so customers are always aware of the price as they progress.

The close proximity of the price and the “Select return flight” button makes it as easy as possible for anyone to scan for the next call to to action while immediately keeping an eye on the total price.

Progress Tracker

With any process that requires multiple steps like booking a flight, a progress tracker is a great design element to let users know where they are in the process. Additionally, it has the benefit of giving them an idea of how long the process will take.

For our trip to Tokyo, Swiss’s progress tracker shows seven steps which could have been problematic without the neat solution Swiss have implemented. View the video above to see how hovering over specific sections of the progress tracker expand and contract to reveal the full text of any that doesn’t fit.

Great design allows you to click on any of the previous steps to jump straight back to them and as expected from Swiss’s great design, you can do that here too.

Mobile

Sensible decisions have been made in the responsive design of Swiss’s website so I encourage you to explore the mobile site to see how well they’ve worked the design onto smaller screens.

Aim for Swiss Quality

Remember the quality of Swiss design each time you sit down to design and buy some Swiss chocolate while you’re at it.

Source: Inspect Element