long

air canada app redesign

what 🤔

%MCEPASTEBIN%

redesigning the air canada application which is made for booking flights, checking-in and reviewing flight details.

time 🕐

10 days

role 🎨

research, sketching, wireframing

tools 🛠

Sketch, inVision

for 📱

Android, pixel 3, 2, 2XL

overview

This project was a short term project during my UX course at BrainStation. We were tasked to choose an application and redesign it using the 10 usability heuristics by the Nielsen-Norman group. My partner, Vidhya, and I chose to redesign the Air Canada application because of the low reviews it had on the Apple app store and the Google Play store.

problem

We found the Air Canada application on the top 100 free apps chart of the Apple app store listed at number 84. This piqued our interest because we know a lot of people take Air Canada and would use this app to book their flights. We then looked more into it and found that the application had really low reviews. On the Apple App store, it had a rating of 2.4/5 stars and on the Google Play Store, it had a rating of 2.9/5 stars. Not so great, huh? So from this, we decided to redesign the app.

heuristic evaluation

Before we started redesigning the application, we first conducted a heuristic evaluation on the current app using the 10 usability heuristics of the Nielsen-Norman group. The task that we chose to evaluate was the task of "Booking a Flight."

heuristic scale

my partner and I decided to create a heuristic scale as to grade the usability of the Air Canada app. We made a scale from 1 to 5, 1 being the lowest usability and 5 being the highest usability. (a higher score means better usability) 

heuristic scale

heuristic scale

 

from this, we started grading the app on the 10 usability heuristics.

grading the app

30/50

was the overall score we gave to the app by adding up all the scores from each heuristic and putting that over the total number.

The grading we gave for each of the 10 usability heuristics are as follows:

  1. Visibility of status: 3/5
  2. Match between system and the real world: 3.5/5
  3. User control and freedom: 2/5
  4. Consistency and Standards: 1/5
  5. Error prevention: 3.5/5
  6. Recognition rather than Recall: 5/5
  7. Flexibility and efficiency of use: 3/5
  8. Aesthetic and minimalist design: 2/5
  9. Help users recognize, diagnose and recover from errors: 5/5
  10. Help and documentation: 2/5
     

more detailed overview of usability heuristic grading, and improvements

app redesign

From the evaluation and the improvements that we suggested, we started to redesign the application by recreating the screens that had usability problems. Also, when redesigning the app, we had to make sure to follow the already existing brand colours, typography and standards. So, we created a UI Library (see file on the left) for the app redesign.

The screen that had the biggest change would be the home page wherein we decided to change the whole layout to look more minimalistic and aesthetic.

Some other important changes that we made are the progress tracking bar, the tab bar, a hamburger menu, emphasis on unfilled input fields, and a more intuitive, efficient date picker.

Learning: evaluating the usability of an app is very subjective to an individual's bias, so it was very important for us to try to be as objective as possible.

below is a deck of a more detailed look at the grades we gave for each heuristic and some improvements that should be made to achieve a higher usability heuristic grade.

redesigned screens

Home Page

total redesign of the home page, while keeping all the elements present

Menu Expand
Book Trip
Destination Picker
Flight Date
Departure Flight
Modal
Page
Basic
SignIn
Booking
Summary

next steps

for our next steps, we would like to conduct a usability test with the redesigned screens to validate our design decisions. Then we would like to iterate on the designs based on the feedback from the usability tests.

closing thoughts

This project was a much shorter one compared to my capstone, but I did enjoy redesigning existing apps. I found that when apps are already very good, it is really hard to find usability issues.  But if we put the app through rigorous testing, there will always be something to improve on.

The biggest takeaways I got from doing this project were the following:

  • When working within a brand, it is important to always keep in mind the brand colours, typography and standards
  • Always try to validate your designs with actual users
  • Try to be as objective as you can when critiquing the app, we are very susceptible to personal biases

see my other works!

keepfreshCase Study

pastel bankDesign Sprint

emerging media labux experience

air canadaRedesign

hubblePersonal Project