• Work
  • Agency
  • Team
  • Services
  • Careers
  • Downloads
  • Thoughts
  • Contact

Get in touch

1557 Keppel Road
#02-07
Singapore 089066
E: contact@eightfour.sg

EIGHTFOUR
  • Work
  • Agency
  • Team
  • Services
  • Contact

Play. Not use!

FLY SCOOT

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 cheek 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.

MAKING THE PROTOTYPE
IN HIGH-FIDELITY

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.

BOOKING
A FLIGHT

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.

BOOKING ON
YOUR MOBILE

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.

Your browser does not support the video tag.
Your browser does not support the video tag.

SCIENCE BASED
USABILITY

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.

BUILDING UP A
FAMILIAR BEHAVIOUR

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.

MAKING
EDITS EASILY

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 SUMMARY

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.

DIFFERENT STROKES
FOR DIFFERENT FOLKS

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.

MAKE IT FEEL
LIKE A GAME

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.

SEAT SELECTION
FOR PICKY TRAVELLERS

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.

YOUR BORING DETAILS
EXCEPT FUN

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.

AN INTERFACE THAT
WORKS AT EVERY SIZE

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.

JUST A PAYMENT PAGE?
NOPE

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.

A SMARTER
SHOPPING EXPERIENCE

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.

YOUR
PROFILE

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.

DESIGNING FOR
THE WAY USERS READ

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.

OTHER
MASTERPIECES

See all work

SINGAPORE AIRLINES

The world's best airline gets a web overhaul

VERTEX VENTURES

Internal Platform for a Global VC

SERVICES

We can do a lot

EIGHTFOUR

Copyright EightFour. All Rights Reserved.