Paper Prototypes

As we put our ideas and the feedback we got on the table, we started with sketching and creating our first low-fidelity paper prototypes, which we used to identify the problems in the early stage of the design. They are useful because they’re fast and simple to produce, but also to modify.

Paper prototype
Paper prototype

The feedback we got from them was crucial before starting with building the interactive prototype. For this purpose, we used Figma because it’s collaborative, and it’s easy to connect the screens in the prototypes.

Our first interactive prototype was a slightly better version of the existing app with the easier flow, but just after we did user testing on the first part of the app we got the feedback that we could make the experience more emotional by extending the map and showing the destination prices.

We found inspiration on the AirBnb website, where with all the prices shown on the map the experience still stays positive and users don’t find it too cluttered or unusable.

AirBnb

We iterated, and created a new prototype with a bigger map, containing prices and planes when the destination is selected, with improved flow regarding the dates and travel extras.

 

After getting more feedback from our users, we developed a mid-fidelity digital prototype. We also continued with conducting further usability tests and refining the design before moving it into a high-fidelity prototype.

 

Branding

We wanted to change the existing app, and it was really important that we understand Aer Lingus and their current branding. From our research, we found out that their brand values were:

  • welcoming and warm
  • characteristically and traditionally Irish
  • helpful to their passengers
  • approachable, obliging and communicative

Moodboard

Using these core brand values, and all of the things that inspired us – we created a mood board.

Style Guide

In this stage, and after Hillary’s suggestion, we decided to include some Material Design in our prototype and make it look more fresh and familiar to users. Using the style guide, we then developed a high-fidelity mockup of the app.

 

Even though we had the high fidelity prototype, which users really liked, we were struggling with one and important thing –  they didn’t notice the planes moving. During one of the classes, Andrew mentioned the term “change blindness” which is basically people’s tendency to ignore the changes when they happen far away from their focus.

Solution

The only way we could fix this problem we were encountering was using the animation. The design process resulted in a high-fidelity prototype of the app made using Figma, with the preview element animated in Principle to display that functionality. Some of the key flows of the app are shown in the video below.

 

 

 

Please continue reading, follow on to the next step Usability Testing

 

References

Budiu, R. (2018, September 23). Change Blindness in UX: Definition. Retrieved January 15, 2019, from https://www.nngroup.com/articles/change-blindness-definition/

Nigel_french. (2014, January 06). Developing a Mood Board. Retrieved January 15, 2019, from https://www.lynda.com/Design-Color-tutorials/Developing-Mood-Board/141129-2.html

Preece, J., Sharp, H., & Rogers, Y. (2017). Interaction design: Beyond human-computer interaction. Chichester (West Sussex, United Kingdom): Wiley.

Wyatt, P. (2018, May 14). 20 pro tips for creating inspirational mood boards. Retrieved January 15, 2019, from https://www.creativebloq.com/graphic-design/mood-boards-812470

 

2 - User Research
4 - Usability Testing