Work. SIA Future — Nov 2014
Challenged to reinvent the Singapore Airlines website, Digital Arts Network devised a solution that gave the user something they’ve never experienced on an airline website before - fun.
Singapore Airlines approached the usual suspects in Agency-land to put together their future proof vision for their entire digital ecosystem. Having only 1.5 weeks to complete the pitch, I rolled out my air mattress and puffed my pillow; I knew there was going to be some late nights in the office. The result was something I’m quite proud of. It did win the pitch after all.
People love to hate airline websites. Partially due to the fact that they’re complex by nature, and also because the vast majority of them are poorly done. The user instinctively sees them as an obstacle.
The challenge in this case was to balancing an incredibly vast array of business requirements, with catering for a user behavior that had many caveats, while at the same time make the process incredibly simple.
To start, the homepage had to reflect this notion of simplicity by getting rid of everything that wasn’t absolutely necessary. Search (Live) is the primary function, followed by a user-focused navigation.
Visual language is important, and I wanted a simple icon style for purposes of simplicity and scalability.
Icons throughout the site had to look good at a large size and also very small. All icons were converted into a text file and used as a font - the first time we’ve tried the technique.
Why not a map?
I wondered the same thing, especially when searching for a multi-city flight. Image being able to physically drag your destination to another spot on a world map, or add a stop-over by dropping a pin on a location.
Interfaces such as Spotify are becoming more popular, as they work very well with all kinds of touch and swipe gestures - but also scale well to desktop. Providing the user with a nice big (and sliding) date selector, solves the problem outright.
Why do flight sites today still look like tables? The reason of course, is because it’s easy. Flight data is displayed in hard-to-read tables because that’s the way it’s always been visualised. I wanted to find a midway point between the traditional way of presenting flight data, and something more interactive.
The behaviour of the site was constructed to mimic that of an application, with navigation on the left and content on the right. The flight search page was perhaps the most important page of all, given that it’s also the most complex and the one with the most decision points.
The goal of this design was to make it as *readable* as possible, while still maintaining as much flight info as is necessary for user decision making.
Easy to design, but hard to code. Every plane model generates it’s own seating plan with a coordinate system, which presents huge challenges for a responsively designed website. I relied on simple shapes that could be scaled in proportion to the screen.
Seat-selection was designed keeping a number of things in mind: first, was that I didn’t want them to look like seats, for the simple reason that I think it cheesy.
Secondly, I wanted it to be very simple and not resemble an aircraft, as many airlines tend to do. Thirdly, I wanted the buttons to be big enough to be touch-friendly.
Perhaps the toughest and most complex part of the site was the payment options. Not only was it possible to pay with credit card / paypal / world pay, also the KrisFlyer membership points could be used as a form of currency.
Booking on a mobile
Booking flights on a mobile device doesn’t have to be a pain. In fact, it should be far easier than using a computer.
Becauase we we designed SingaporeAir.com for responsive from the ground up, the mobile version of the site was a exercise in simplicity, only including the most important elements first.
To be frank, I dislike the hamburger menu. Users don’t particularly respond to them either.
They do a wonderful job at tucking away large, extensive navigational menus, but very much as case of ‘out of sight, out of mind’. I think the best option we have is to utilize them, while offering core functionality on the homepage.
Responsive for mobile
Managing a nav structure like this one was reliant on a rather unsophisticated series of dropdown options contained in a fly-out menu. For me, it works “ok”, but look forward to a time when we think of something better.
Selecting flights on a mobile proved to be the toughest part of the design challenge. Because it’s a responsive site, not only did the smaller versions have to remain consistent with the desktop in terms of layout, but also had to be quick and easy to use while you’re on the go.