Play. Not use!
Play. Not use!
That was the design philosophy for Scoot’s new cheerful & cheeky web presence.
Scoot is the youngest airline in the region but by no means shy. The quirky airline made a splash in 2012 when it burst on the scene as the cheeky, irreverent and tongue in check airline that loved to poke fun at itself. After four years, it was time to breathe life into Scoot’s digital experience and upgrade the brand into something more mature.
What we did
In conjunction with Publicis Singapore helming the brand side of the project, The EightFour team went about designing & developing a digital shopping experience as fun and cheeky as the brand itself.
This massive 100 page, fully articulated HTML prototype was necessary for several reasons: first, to visually communicate to the client exactly what we were thinking in terms of flow, how the new business logic functioned, and how were planned to address all pain points of the original site. Second, to provide a bible to the development team for which they could refer for guidance.
Given that booking flight tickets is usually quite a tedious procedure, and given the brand is playful, I wanted the impression of the site not to be something you "used", but rather something you "played with". Might not sound like much, but this simple change is mindset creates quite a new impression for something that's always been viewed as boring and predictable. If you can add novelty and surprise, the experience is always better.
In many ways the mobile experience was of even more importance than the desktop. Over half of all bookings made through the site were conducted on mobile and a significant remaining percentage used mobile to check the price of a ticket & later completed the booking on desktop. That means the number of steps to achieve a price needed to be as short and transparent as possible. This time, the less number of clicks, the better.
Booking flights can be daunting, almost always because at any one time the user is inundated with choice. Our guiding philosophy was simple: reduce choice, and give only one decision at a time. Our cognitive load is rather admissible. The human brain can visualise no more than 6 items at any given time without having to commit what's on screen to long term memory. We also have difficulty in choosing from more than two options in any given scenario. Given this knowledge, we structured each page for maximum readability and decision making.
It’s always a good idea to establish interaction behaviors so users know what’s what, and because the site required heavy use of expandable panels and lightboxes, we developed a consistent way of displaying collapsable panels that gave us the flexibility of displaying advanced options without the user ever feeling lost. During user tests, we found linking to other pages, and even simple lightboxes created the perception that they'd left the part where they were looking at. Slide in panels had the opposite effect — that they were dealing with an additional part of the flow they could close easily if needed.
We found that a high percentage of users would perform one search, only to return to the homepage to perform another with different search criteria. To alter this behavior, we sought to make editing the search far easier in case users changed their mind. We build an edit search panel into the header itself so it would be close by at all times.
In what’s become standard issue for airline websites, we found that placing access to the summary at the top of the page allowed to take advantage of the full page width below. This gave me far more flexibility for the design and added to the responsiveness of the site in general.
We realised very early on that some users book in very different ways. Some users are less conventional and appreciate the options to choose flexible dates based on price. A timeline interface allowed users to forecast their trip and see how pricing fluctuate over the course of a month.
We knew that most users perceived booking flights the same way they perceived filling out any long, tedious form: a chore. We wanted to change that. We developed a guiding philosophy for user interaction very early on of “play, not use”. What’s the best way of getting users to play with an interface rather than “using” it? Make it look like a game. We designed the interface resemble an 80’s arcade game with bright colours to reduce stress & increase the fun factor.
During testing, it became very obvious to us that users cared where they sat and in what section. They cared so much that if they’re preferences weren’t available, they’d sometimes search out a different flight. So we knew we had to do some nifty filtering. We designed a filter that allowed users to select seated based on their mood: "peace and quiet", "privacy", "additional legroom" etc.
Let’s face it, filling out your details isn’t the most entertaining thing in the world, so we dressed it up a little without sacrificing usability. Form fields were interactive & playful. The food menu I designed as a catalogue. Baggage selection I designed as large buttons that you could press into the screen.
Something that's particularly difficult to achieve given the complexity of the interface. Because the user behaviour was quite different from desktop to mobile, we had to design the two interfaces simultaneously, just to see if it worked at both sizes.
It’s your last chance to grab the add-ons you’ve forgotten to get along the way. Initially a request from the client to showcase even more add-ons before they get to payment, so we transformed the payment summary into a last-ditch effort to add some more knicknacks that’ll get you onboard faster.
Upgrades were a crucial aspect of the design. Very rarely do airlines make money through the ticket sale itself, but through the add-ons and upgrades offered along the way. Since users are in quite a different frame of mind at each stage of the booking journey, we strategically placed every add-on for relevancy and easy comparison of benefits.
We redesigned an entirely new Profile section where customers could manage their personal details, payment options, upcoming flights and even make express bookings. The frontpage acted as an overview for getting things done, and included some smart logic in what it promoted as important depending on your behaviour as a user and past purchases.
Users don't read, at least they prefer not to unless they’ve requested it. Knowing this, we designed static pages with a simple objective: to make them scannable. Instead of relying on tiresome paragraph of text, we designed a large set of infographics in typical Scoot style to get the message across.
We can do a lot