Air_Canada_header

UX/UI Case Study: Air Canada iOS App

This is a short case study of the UX/UI design of Air Canada’s iOS app version 3.21 that you can download here. The Air Canada iOS app lets you search, book and manage AC flights as well as check in. The focus of this study is the issue of inconsistency in graphical style and navigation due to the use of both native app and web based app pages within the app. I identify and explain some of the problems that are caused by this and propose a redesign that solves those problems.

Issue: Lacking Consistency

The app has some major issues regarding consistency in graphical style and navigation. One reason for this is that most of the functionality, for example Book Flight and Find Flight, are native to the app, whereas Check-in is a link to the mobile version of Air Canada’s website.

Air-Canadaa) Native app graphic style                                                     b) Web-based graphic style

Graphic Style

Comparing the two different screenshots, one from Book Flight and the other from Check-in, colours, fonts sizes and style of graphical elements are inconsistent within the app. The native app parts use flat design whereas the Check-in page uses an older style with gradients and shadows. This makes the Check-in page stand out and look very out of place in the app.

The input fields are not consistent since in a) the prompted information is inside the text box and in b) it is above it.

The option to remember your information is not as relevant in a mobile application as on a website since mobile devices usually only have one user. Therefore, storing this information should be done automatically or the user should only be asked for it once.

The Quit button is unnecessary. When tapped on, the user is redirected to a page that informs the user that the check-in session has been cancelled. However, if the user never taps Continue, nothing happens anyway, and therefore thereis no need to quit in the first place.

quit

Navigation

Having the Check-in function link to a mobile version of AC’s website also causes issues with the navigation in the app. The first thing you see is a link to learn more about AC mobile+.

info

If you follow the link it will take you to a page with information about AC mobile+. Since the page is a link to  the web site, it has its own navigation system, and this causes the app to display two different Home buttons at the same time. Also at the bottom of the page, there is a Back button that does not exist in the rest of the app.

homeButton

back

To go back to Check-in from here, the user actually have to use the refresh-button to refresh the website. Even though what the app actually does is refresh the page, a better icon for this action would be a back arrow. From a user perspective, a going back action makes more sense than to refresh the page.

If AC for some reason needs to keep the check-in function web-based, they should at least link to another version of the check-in system that does not include links to other parts of the web app since this is very confusing for the user who will get lost in navigation.

Redesign

Mockup

Conclusion

The new design of the Check-in is cleaner and simpler. All the links have been removed so that the user no longer can get lost in navigation. If the user wants more information, it can be accessed through the i-button. Nothing new has been created graphically, I have simply made use of already existing graphic from the rest of the app. This results in a more consistent design, both graphically and navigationally.