Project Transavia
UX Research, UI Design
Overview
Timeline: September 2019 - November 2019
Client: HvA (Transavia)
My role: UX/UI Designer
Skills: Wireframing, UX/UI Design, Prototyping
Tools: Adobe XD
Device: Phone, Tablet
1. Project Summary
In this course we had to work on a new concept for Transavia. The main idea was to display visual stories in an app that users can read before, during and after the flight. The whole experience takes place across different devices, and with the final prototype the users can read the stories on tablet and phone.
2. Research
Since the product had to be designed for Transavia, the first thing that I did was to research their branding. I did this through analyzing their fonts, colors, patterns and photography. After the visual research I continued researching possible user scenarios and the user experience.​
Visual research
Styletile of based on Transavia's User Interfaces (desktop UI).
A 'moodboard' of Transavia's visual language: the green color is apparent and lots of holiday photos are used for their marketing.
2. Concept
After the visual research I focused on the experience the user could go through while reading stories and possible 'goals' in the form of job stories.
Job stories
-
“When the user is on the plane, they want to read something on their device without the use of internet so they don't get bored during the flight."
-
"When the user is done reading a story, they want to share their personal opinion through a rating system, so that they themselves and others can give users an indication of the quality of the story."
User scenario
"The user receives an email on their laptop to the 'story website' of Transavia, where they can log in with their booking number. Before the trip the user saves a few stories they'd want to read offline during their trip on their mobile phone. After the trip, the user can rate these stories. The user does this on their cell phone."
An overview of the user scenario: pre, during and after the flight. The user has different goals in every situation and acts them out on different devices (or rather has the possibility to).
Functions
Based on the job stories and user scenario I decided to use the job stories as the product's main functions:​
Function 1: Reading stories offline
Function 2: Rating the stories after reading
After that, I went on with creating Lo-Fi wireframes that showcase these functions.
Wireframe: downloading stories for offline use
Wireframe: rating story for indicating the quality
3. Deliverables
Eventually after creating the wireframes I designed the interface screens in Adobe XD and made a mobile prototype to test the main functions. The products that I delivered for this project were a document on Behance and a mobile prototype (both are in Dutch).
Key screens
Hi-Fi: reading the downloaded stories 'offline'
Hi-Fi: rating the story after reading it