Project omschrijving

Transavia Experience

Role
UX/UI + HTML, CSS

Category
Storytelling

Timestamp
2018

Each story, within the application, is uniquely designed in a style that matches the tone-of-voice of that story. Ultimately, it becomes a seamless multi-device experience that allows the user to read the stories at any time during the journey.

Transavia wants to offer a special storytelling website to its customers. Before, during and after the trip, customers can read and view stories on a device of their choice. They do this while waiting, in between queues and during a long flight, flight or ride. 

View my website here: Transavia Experience (Storytelling)

User Goals

• The user wants to be able to read stories during the trip.
• The user wants to find a nice story.
• The user wants to be offered recommended and / or surprising results.
• The user wants to give input so that others can find nice stories more easily.
• Support different users and different user contexts.

Business Goals

Strengthen the brand experience of the client in the period before, and during, the trip. The travel organisation no longer wants to be known as a carrier, but as a distributor of experiences.

Customer Journey

For the Customer Journey, I mapped the experiences of travelers. Before people travel, travelers still have internet coverage. But if they are in another country, they are often dependent on WiFi or a mobile network. Together with a small group we have mapped out the pain points. We also thought about the emotions of the user during the journey.

Wireflow

On the overview page (sketch on the left) are various elements that can surprise the user. It is also possible for the user to search specific stories based on his interests.

Popular stories: The user sees a list of Top 10 popular stories. They can swipe to the left (1) to discover more stories. Clicking “see more stories” (2) opens a new page. Here they can see all 99 stories. These are sorted based on popularity. The user can adjust this at any time by using the filter and sort features.

Compile bundle: You can compile your own bundle by checking different categories and then clicking on “Compile bundle” (3). Under the form you will see the results of your own personalised bundle.

Suggested bundles: If the user wants more surprises they can click on suggested bundles. This will offer various random stories.

From Lo-fi sketches
to Hi-fi Design

After sketching lofi wireframes, I digitally worked out these designs in Sketch to play with color, placement of various elements and the breakpoints.

Workprocess

1. Sketching, making wireframes
2. Work this out digitally (visual image)
3. Draw the code based on this
4. Develop code

Visual Inventory

Inspiration “Lively”

I first created a word web and wrote down everything I associated with the atmospheric word “lively”. Instead of searching for images on the internet I took some 30 photos that had to do with the atmospheric word. At the top you see a selection of 6 chosen images that I started to embroider on.

Shape, color and typography

Below you can see images that I found on the internet. I was mainly inspired by the Vifit bottles and the piñata from the Hema. I first started to diverge, and only later converge, with the images. The concept became increasingly clear and also gave me a direction to work towards.

Experimenting Visual Research

I started designing from the title of the story “Onomatopee.” Based on the found images and associations with my atmospheric word, I have made various designs to use for my story. I played with typography and composition. I tried to stick to a color palette and was inspired by the Vifit bottle and the blue piñata because of the bright colours. The color contrast provided a good balance and it also gave me the feeling of liveliness whenever I see the bottle and the piñata.

Final Design

Microinteraction Download

Microinteraction Bundle Stories

View my website here: Transavia Experience (Storytelling)