Motion design and beyond


Our experiences with motion design while redesigning the Air France-KLM booking tool.

Last summer we teamed up with Air France-KLM in Paris and crafted a whole new online concept for the process of booking tickets.

Motion was a big part of this process. We found that using motion made our concepts so much clearer compared to the usual ‘flat’ designs. We noticed that in many phases of our process, but when we showed the concept to stakeholders and end-users this made all the difference!

Where it all began

Motion has become increasingly important to explain how interfaces work. Using motion to experience interfaces started in teams that made native apps. That’s because most page-transitions in apps should feel seamless. Web design and development have fallen behind a bit. Most websites and applications consist of a collection of static pages. Fortunately, technology is finally mature enough to create seamless experiences! In that regard native and web are growing closer. 
 
 In the meantime, in Paris a core team of eleven people including myself was formed to speed up the design process. For this project we had the opportunity to design transitional interfaces and explore how a booking tool should behave. We worked using an agile methodology, with sprints of 1 week to keep a fast pace. Despite the small amount of time, motion design was a big focus for our project. Designing with transitional pages was essential to bringing the booking tool to the next level. Often we tested our designs to check if it would work before actually building it.

1. Dinner with the whole Air France-KLM team

To keep the stakeholders involved in the process, we did a weekly ‘kitchen review’ of our work in progress. We used these review sessions to give stakeholders a sneak peek in our ‘design kitchen’. The added value of motion became clear when we handed over phones and laptops with working prototypes rather than giving a flat, lifeless presentation. This gave our stakeholders a hands-on experience, allowing them to make faster and much better informed decisions.

2. Kitchen review of the concepts with stakeholders

Working with motion

You may have noticed that showing our designs in full motion was one of the breakthroughs we used to work more effectively, helping us to convince our stakeholders. It also allowed us to structure our work and test our designs. We really took the design to the limit by adding transitional interfaces in our demos. 
 
 Our motion designs were made using Principle, a lightweight tool for quickly building a prototype without having to code. Our team was able to rapidly test designs because of the ease of Principle. 
 
 Also, something we had hoped for happened: If you shift your thinking to transitional designs, your way of working changes. Some designs just didn’t work when we tested them in Principle, so we redesigned them. Creating a prototype that feels real and uses motion, immerses the user, engaging them like a well-told story. In the end our users had a more direct and full experience of the interface and the transitions between different pages.

3. Enter your flight dates (concept)
4. Desktop — Price details (concept)

Putting it to the test

The benefit of motion was immediately visible during the tests. People really appreciated that they could see exactly what would happen in real life. For example: the feedback we got about choosing an inbound and outbound flight (see image 3) was that people got the concept right away. Some other feedback we received was that some of the animations were a little bit too fast. When we slowed the animations down we found that it helped people to better process the information, which is important if you are in an overwhelming or loud place like a bus, or in transit.

Learnings

During this project I learned that motion is catching on rapidly for ‘normal’ websites. I had already worked with motion design on some projects but not on such a large scale. I also found that our small devices, and especially mobile browsers are powerful enough to show wonderful and rich animations. This creates exciting opportunities for transitional interfaces and for integrating them in our daily lives. In short: there are exciting times ahead for motion design!

Getting started with motion? 3 small tips!

  1. Most animation tools (e.g. Principle) help you to test compact and simple scenarios and use cases. Don’t prototype the whole application, or site, but keep it small.
  2. As I have some experience with front-end design, I understand the limitations of our browsers. To help keep transitions seamless, I always keep the context of the page in mind, the previous and next state for example.
  3. If you want to rapidly test something, don’t try to prototype a pixel-perfect design and just focus on the essence of the design. This saves you a lot of time in the end, while still providing the team with sufficient input for ideation.

Interested in our design journey in Paris? Watch the video here:

At the time of this project I worked at Mirabeau. Currently I’m fulltime freelance UX designer. Questions? Don’t hesitate to contact me:

simon@partof.digital
partof.digital