Frontend: I visualized the flow of the mobile experience to help travellers find and explore their next potential life changing place.
Client
Lufthansa
With
MediaMonks
Duration
November - December 2019
My Roles
User Experience, Prototyping
Client Context
Being the largest German airline, Lufthansa believes that places can change and open up new experiences for those who are willing to venture out and explore.
Project Context
#LifeChangingPlaces is a mobile webapp campaign that uses artificial intelligence to translate a user's surroundings into their next potential life changing place. Google Cloud Vision is used to analyse the images taken, and links them to one of Lufthansa's worldwide destinations.
FRONTEND
Goals
- Entice with the ‘magical moment' of AI
- Use audio-visual assets to situate users into the environment of their destination
User Flow
We created a user flow to define screen transitions and where we might incorporate the ‘magical moment'.
Conversational Style that is smooth and seamless; reflective of the experience of flying with Lufthansa
Sketches
Campaign Introduction
The landing screen aims to ease users into the experience, by using short digestable phrases to introduce what it is. Users have the choice to watch an inspiring travel video, or skip to dive right into the experience.
Camera Access
Users need to allow the access of their camera before proceeding. To not take users out of the conversational flow, the camera component needs to be seamlessly integrated and transitioned into and out of.
Destination
The first approach focuses on immersing the users into their suggested destination by presenting them with local stories, weather by the month, and options for them to book their flight at the end.
This approach gives a sneak peak into the destination with a short blurb, and provides more information upon interaction.
This approach entices users with and overview of the best-ofs and top to-dos of the destination, so they can already get a sense of the experience.
Decisions
What initially started as a content-heavy experience transitioned to one that is light and evokes curiosity. Thus, the approach for showing the destination was then to first show a captivating destination image, a short blurb that references the user's image (to show the magical moment of AI), and a short blurb that references the destination image of what the user can be experiencing instead.
Wireframes
Final
Main Flow
After accepting Lufthansa's use of cookies, users can watch a featured video of how one individual's travel experience changed their lives. They can also choose to skip right into the experience of finding their own next travel destination. Lufthansa's chatbot style will then automatically scroll doen and explain in a short blurb of how the experience works and ask for user's camera permission. Choosing to proceed with the photo will start the analyzing process.
Magical Moment
Google Cloud Vision recognizes the objects in the photo and uses Lufthansa's icons as a transition into their next destination.
Menu
Users can access the sticky menu to explore the other options within the webapp.
BACKEND
I helped create a custom Content Management System (CMS) for the logic of connecting the user's captured image to a destination.
Goals
- Add and adjust Google's Cloud Vision API objects with their recommended destinations
- Add and edit relevant copy for user inputs and destinations
Step-by-Step System so stakeholders of Lufthansa can easily use it even if they aren't familiar with a CMS
- Add new / select existing objects
- Add objects to its corresponding group for ease of linking one destination to a group with multiple objects
- Write copy for user input, and connect label to a destination experience
As the CMS was a much more complicated process, I have withheld it from my site. If you would like to learn more about it please feel free to contact me!