Francesco de Lange
UX/UI Designer

Reading with Transavia

Designing an immersive and cross-platform reading experience

The challenge

Famous Dutch airline Transavia wanted to enrich their customers' travel experience with a service that hosts stories to read before, during and after their trip.

The company was looking to take customer engagement beyond a simple airplane journey and play a more promiment role in people's vacations.

For me, this was a challenging and multifaceted project to work on, as I had to handle the user experience part of it, design the stories and the website visually, and eventually write a prototype in HTML and CSS markup with a bit of JavaScript.

This case study will be divided into three main sections:

  1. User experience design and patterns

  2. Visual identity

  3. Final result

Now onto the requirements.

User requirements

  • Find stories of different length based on their available time through directed searching and casual browsing

  • Be able to save their progress and resume reading later on

  • Leave feedback for others to see

Product requirements

  • A responsive format that scales with the device being used

  • Suggest stories based on user context

  • Stories have to be visually consistent with what the user's reading

  • Extra functions need to enhance the experience and be easy to use

  • A visual experience that matches Transavia's design language

With these objectives in mind, I set out to design the skeleton of almost every UX project: wireframes.

User experience
and design patterns
Mobile and desktop variations of the same page.Notice how the same content and functions adapt to the device they're on.

Mobile and desktop variations of the same page.

Notice how the same content and functions adapt to the device they're on.

Information architecture

The first steps to a project usually involve doing research, sketching mockups and making wireframes.

For this part, I drew some mobile and desktop wireframes for how the service could look on different devices.

Since the experience had to be the same on every device and form factor, the wireframes change the layout while keeping the same content and functions.

Click the image to enlarge it.

Click the image to enlarge it.

Wireflow

The single most important function of the service was to be the seamlessness and multi-device experience.

Since people would be reading stories in different contexts,
I came up with a use case scenario that simulated reading stories with different devices during different parts of
their vacation.

For this wireflow I took into account the following situation:

  1. The person chooses a story at home on desktop and saves it for later reading.

  2. At the gate prior to boarding, the user takes out their phone and starts reading the story they saved.

  3. It's time to board the plane. The user makes the story available to read offline and saves their progress.

  4. While on board, it's time for a more relaxing experience: the user resumes reading on their tablet and marks the story as 'read' once they're done reading.

  5. Depending on the situation or story length, the scenario could also continue beyond the flight.

Job stories

To frame the design challenges for this project and decide on what features to implement to help people achieve their goals, I decided to use job stories as I feel they provide more context to a given situation and put a clear focus on the task at hand, which a persona wouldn't give me.

These features would have to be included in the final HTML/CSS prototype.

For every job story, I came up with three different solutions which I will be omitting here for the sake of brevity. Feel free to check out the whole documentation here (it's in Dutch).

Let's start then, shall we?

Job story 1

"When I'm about to board the plane and have a few minutes to read, I'd like to have a short story suggested to me so I can finish reading when it's time to go."

Context
Users want story suggestions when waiting at the gate before boarding. They want to read a short story to read in a limited timeframe and want to be able to know how long it's going to take. Based on their flight times, the system knows people are standing at the gate and recommends them a short story to read in a few minutes.

Proposed solution: contextual card and estimated
reading time

Lo-fi variations

I made three different lo-fi sketches for this pattern so I could see how it would look and function depending on the prominence of different elements such as reading time and story image.

The first solution is the one I eventually went with because it provides the best balance between the different elements.
Reading time is easily scannable and doesn't take away importance from the story image.

The second and third solutions place too much emphasis on the clock and reading time. In the case of the third one, it would also be hard to communicate the hands can be moved to set one's available time.

Wireflow and states

The first set of wireframes represents a happy flow, whereas the second one represents the user swiping away the story card because they're not interested or don't have enough reading time. In this case, a snackbar appears on the bottom of the screen to inform them of their action and give them the chance to undo it.

Loading and default states are also taken into account.

Job story 2

"When it's time to board and I'm not done reading, I want to mark my progress, so I can pick up where I left at a later moment."

Context
When a more important task demands their attention, it's important that people can save their progress and resume reading later on.

Proposed solution: drag & drop cursor

Lo-fi variations

Swiping in from the edge, as per the first solution, would have been too hidden of an action to be remembered or discovered:

"Out of sight, out of mind."

For this pattern the second solution was chosen as it has a progress bar that gives people a clear indication of where they are in a story and more screen real estate when compared to the third solution.

Wireframe and states

A happy flow shows how the bookmarking function is used, with a snackbar appearing on the bottom of the screen to inform the action has been successfully performed and give the user a chance to undo it.

An error dialog shows up if the progress couldn't be saved.

Job story 3

"When I'm done reading, I want to give my opinion on what I just read, so I can let other people know my thoughts."

Context
People like to give feedback about the content they consume, because they like to express themselves and feel a sense
of community.

Proposed solution: Medium's clap

Lo-fi variations

The reason I chose for the Medium-like clapping function was because of its simplicity. It just takes a single tap to activate and doesn't require a long press like Facebook's reactions.
I also liked the fact that it enforces positive feedback, since there is no contrary action to clapping.

That's also the reason why I chose the first solution: it just takes a single tap to activate and doesn't require a long press like Facebook's reactions or the otherwise cumbersome actions as the other two variations.

Wireframe and states

For the final implementation of the feature, I chose to add a little variation and give people the chance to clap multiple times to share their excitement for a story they just read.

In case no one has clapped for a story yet, an on screen prompt encourages the reader to be the first to clap.

Transavia's visual
design language

The style guide

With the main features in place, it was time for me to do some research about what makes Transavia's visuals look fresh and appealing. The colors, shapes, icons and typography come together to form a playful and energetic aesthetic that appeals to their target audience: young people looking to go on vacation without spending too much. This is also reflected in promotional images Transavia uses across its social media platforms and advertisements.

Branding and typography

The airline's logo consists of the letter T on a green or white background depending on the context.

Nexa is their main typeface and consists of geometric shapes that make it easy to read on screens.

Color and iconography

Transavia uses green and white as its primary brand colors, with dark blue and vibrant pink hues as accents or to highlight certain elements.

Their simple and flat icons are always placed in containers with rounded corners of varying degrees and are used throughout their products and promotional material.

Visual language

Promotional images mainly use a first person perspective to draw the viewer into the scene and make frequent use of the company's iconography to highlight a destination's weather or overall vibe.

Visual implementation

For the prototype, I made a responsive design which scales based on viewport width and features the main elements of Transavia's visual style to make it look and feel like it's part of their core services. Features previously described in the section 'User experience' have also been implemented.

How the prototype scales with the device it's being used on.

How the prototype scales with the device it's being used on.

Stories

Part of the project involved picking 3 of the 99 stories travellers can read and giving them an appropriate visual design based on tone of voice and overall vibe in order to make people feel more engaged with the content they're reading.

Each story has been made with physical materials because I wanted them to feel unique and I was also looking to make something a bit different from the digital content we consume every day.

Story #1: Telegrafisch

Keyword: intrusive

The continuous use of the word “STOP” and the all caps text gave me the feeling this story's words got hammered into my head.
I wanted readers to experience this kind of intrusion or invasion and so my visual research consisted of pictures and typographic images where shapes collide with each other or occupy their respective spaces.

My initial idea was to surround parts of the text with acrylic paint with cells in it which I would make with silicone oil. Unfortunately, I failed spectacularly (I must have chosen the wrong silicone oil) and had to come up with a solution to mimick the result I was going for.

I armed myself with patience and began adding small dots of paint onto the bigger blobs in order to give the idea of the being cells. This took me half a day, but in the end it was definitely worth it.

The colors used are black and white because I wanted to convey the cold and mechanic tone this story gave me while reading it. The blobs of paint fall around the text as if they're being spewed out by a machine, just like the words that feel like they need to be read all in one breath.

The typefaces that make up the text are almost slab like: their rough edges help convey the emotionless vibe this story has.

Story #2: Boers

Keyword: rustic

For this story I knew pretty quickly what kind of look I wanted to achieve: a rustic atmosphere through the use of warm and soft colors that remind of the countryside. This can be seen in my visual research not only through colors, but also in material and typography.

That's how I came to think of burlap/hessian as a material I wanted to include in my visual representation. Super cliché of course, I know, but I liked the idea nonetheless.

This is your heading

In my visual representation of this story, two farmes go back home at the end of a long working day in the countryside.

Their silhouettes can be seen in the distance with the setting sun behind them. The ground, which is made of burlap, is painted red by the sunset light.

I chose for this very saturated red hue in order to create contrast and make the silhouettes clearly visible against the dark background. The burlap is slightly bent to give an extra layer of depth to the scene.

The running text's typeface gives off the rustic feeling I was looking for without going into hipster territory like the "countryside fonts" that are so popular nowadays.

Story #3: Kinderlijk

While reading this story, the first thing that came to my mind was a world full of colors made of warm and soft materials and lots of fantasy.

With the materials I found during my visual research, I set out to design this story visually.

This story takes place on a table where a child has been spending his time crafting. Apart from the colors, this can also be seen by the materials used: felt, paper, wool and glue to hold everything together.

Readers can interact with the different elements placed on the table: it was important for me to make people feel like the materials can almost be touched.

I made the title myself with no particular typeface in mind, as long as it was childish and messy while still being readable.

Final prototype

Coding with CSS grid for different breakpoints

The Lezen met Transavia website adapts to the device you view it on. This was a very hard challenge for me because I chose to use CSS grid, which I'd never worked with before. This was also the first time for me to work with different breakpoints, which made the layout and order of items on the page even more of a headache.

In the end, I can say I'm extremely satisfied with the result because it makes the website look a lot more professional than Flexbox would have made it look.

Microinteractions

The features I came up with in the user experience design phase had to be implemented in the prototype by way of microinteractions made in HTML, CSS and JavaScript.

As with the prototype, I coded all of these myself.

Swiping away a story card

If readers aren't interested in one of the suggestions the website gives them, they can swipe away the card in order to communicate they're not interested.

The card fades out of view and makes space for other items.

Clapping for a story

When someone likes what they just read, they can clap to share their excitement. This can be done multiple times for the same story.

The animation mimicks two hands clapping together in order to encourage readers to press the button.

Bookmarking story progress

Travellers can save their progress to resume reading later on by dragging the cursor to the exact point they're at.
A short animation invites the user to pick up the cursor and drag it.

Wrapping it up

This was a huge project for me as I had to tackle many different parts of the designing process. Design patterns and UX came to me naturally as it's something I'm used to doing, but all of the visual stuff and even coding my own prototype? That was a big challenge because I don't consider myself a visual artist nor someone good at coding. However, a lot of knowledge can be found on the web to learn how to improve your skills and seeing the results of my efforts really puts a smile on my face. It makes me proud of what I was able to achieve.

There's lots of time and dedication put into this project, especially seeing as I care a lot about small details and getting everything right. That's in fact become quite synonymous of my work philosophy: I favor quality over quantity and prefer to polish my work instead of rushing an eventually flawed product.

I look forward to applying my skills on your projects, so if you're interested in collaborating, feel free to drop me a line via my contact form.