Air NZ
Mobile App
Design mockup
v4.7.2 update in 2 weeks
Overview
I am impressed by a few of the application designs on the market and Air NZ has one of them. I will explore the mobile app (version 4.7.2 was when I started) and see what I can do to improve it further to sharpen my skills by learning from one of the best-designed apps in the market.
Goals - UX
Start with the current mobile app by:
1. analysing the features and then drawing up the information architecture.
2. building a user journey map to empathize with users and decied the new design,
3. revising information architecture accordingly
Goals - UI
Try a come up with new skin to enhance experience and reliable image.
1. I feel like adding an animation background.
2. I will do three different themes dark, white and purple.
3. making the loading page more impressive
Role
UX designer
Tools
Figma
Device
Mobile
Timeline
2 weeks
Design Process
Prototype
(Figma file Click here)
Prototype
(Figma file Click here)
Achievement (anticipation)
-
100% Intuitive
by grouping functions by feature and making the important functions stay at the top level.
-
Increase Sales
by renaming "Book" to "Deals", putting all products in one place with clear seperation and adding attractive images to each section.
-
Enhance Brand Image
by grouping functions related to trips booked in one place and adding functions e.g., "Baggage Issue" to quickly resolve issues where customers can easiliy give negative feedback.
Takeaways
-
A user journey map can provide an overview of the whole process for different teams from designer to developer to marketing to manager level. This can define what actions each department can take.
-
I find connecting the most frustrating part to related actions/thoughts can help me focus on the most important things and build the persona easier.
-
This product has many features/functions that are complex enough to draw the information architecture. In this case, I did what we always do in architecture: "mark up" and make it like a presentation with hierarchy and keynotes. This helps me stay organised and focus on the points.
-
Keep sharening CSS skill will definitely help me in terms of design feasibility in the future. I found the information provided in Figma regarding the drop shadow in the dev mode is not always reliable.
Next steps
Conducting interview and usability test to validate my assumption about increasing sales and enhancing brand image.
I saw the app has been updated frequently from version 4.7.2 (I started on 03/Sep/2024) to version 4.8.3(seen 5/Oct/2024). I believe I have contributed a bit as I sent this to Air NZ, applying for a position early September and now am seeing similar ideas happened.
Check out my article for more detail
1.01 Explore the existing design - Flights & Book
-
No.1 and 2 lead to Air NZ for flight booking, which I think is a little bit confusing because the images suggest a trip more than booking a flight, and I don't see the necessity of having two blocks pointing to the same location.
-
No.3, Can't see your booking should be closer to Adding booking.
-
No. 4 is flight booking as well and I think it's a good idea to have all booking-related actions on one page.
1.02 Explore the existing design - Airpoints
-
I realized this page has 4 sections as labelled. It should be more obvious or at least the layout should be able to distinguish the sections better.
1.03 Explore the existing design - More
-
No.1 and No.4 should be in a better section as they are not secondary-level functions.
-
No.2 contains a series of functions that should be organized in a better way.
-
No.3 allows you to search or check the flight times but the name doesn't really tell you so. I learned that by clicking on that and that shouldn't happen.
1.04 Breaking down a to-do list
-
Interestingly, almost all functions lead to web-based applications to complete actions, and they don’t connect seamlessly. This is a large application with many functions. For building a Minimum Viable Product (MVP), the most important features to focus on are:
-
The most important functions to build if this is to build an MVP will be:
-
Booking flights
-
Reviewing booking details for check-in and using it as a boarding pass
-
Accessing Airpoints information
-
Managing user profiles and passport information
-
Enabling options to add, edit, cancel, and delete for the above features
-
-
This app has numerous functions, each forming its own closed loop. Some functions relate to each other, while others do not, and many require users to navigate to a website to complete their tasks.
-
In terms of aesthetics:
-
Use a purple background that resembles the ambient lighting in an airplane cabin.
-
Aim for a delicate look with a calming vibe.
-
Consider incorporating a cloud element into the app design.
-
Use the Quicksand font, as it has rounded terminals that convey a friendly, modern look and is also highly legible.
-
2.01 User journey map
-
I divided the users into three groups: business travellers, Casual travellers, and First-time Air NZ travellers.
-
I discovered the stages a user goes through, from having the need or reasons for travelling to the end of the trip. I believe this would help other teams to make informed decisions as well like the marketing team, customer success team etc.
2.02 Revising information architecture
-
The most significant change is the creation of a new page called "Deals," which consolidates what used to be found in the "Book" section. I have now made the Book section exclusively for booking flights.
There are two main reasons for this change:
First, "Deals" is a more appealing term than just "Book," which will encourage customers to explore the offerings and consider making purchases.
Second, booking flights is the primary function of this app. It shouldn’t be buried under a section with various other functions and a plain button. Instead, users should be able to easily access the flight booking process directly.
2.03 Revising information architecture
-
Airpoints and More sections are pretty much the same but adding some functions and organized the functions.
3.01 Introducing new page - Deals
-
This page contains every product we can sell to customers. Adding fascinating images and deal prices to directly encourage the customers to have a look and potentially increase the profitable results.
-
The left one is the first iteration and then the right one is the latest and best design using similar design language that Air NZ has e.g., the circular shape.
3.02 Trip details - the 1st layer - Check-in info
-
The first design version on the left has a moving cloud in the background which I like a lot but I also like the second version design which is much tidier. But I will still choose the one with moving clouds in the background. Imagine if you didn't have a coming trip and there would be no trip detail card but just moving clouds! It must be fun.
-
Clicking on the "Update/Detail button leads to the 2nd layer of the detail about the trip booked.
3.04 Clear sections for Airpoints
-
To improve the user experience (UX), I organized the page into four distinct sections so that users can easily understand its functionalities.
-
The Airpoints member details are highlighted in green, mimicking the appearance of the physical membership card for better visibility.
-
I also added an exclamation icon in the top right corner of each section, which triggers a pop-up dialogue with more information about that section. Additionally, I included a trolley icon next to the Airpoints Store to draw attention to it.
-
From a user interface (UI) perspective, I prefer the version with sections on the right-hand side. This layout is clean and offers higher contrast, making it easier to read.
3.04 Grouped functions in the "More" section
-
I created a user icon in the top right corner of the screen and organized the "Passport" and "Log Out" functions within it, rather than mixing them with other features. This arrangement enhances intuitiveness.
-
I renamed "Arrive and Departure" to "Flight Information" to provide users with a clearer understanding of what they can access in that section.
-
Additionally, I added a "Baggage Issues" feature, allowing users to directly address any baggage-related concerns that may arise, which helps build a reliable image for the company. This feature could also be moved or integrated into the trip details page for greater intuitiveness.
3.05 User profile section
-
I placed the user profile icon in the top right corner of the screen. You can find user details, passport information, baggage status, meal preferences, a notification toggle, and select your preferred app themes.
3.06 User detail review and update
-
Two different functions with consistent layouts because they are both about the user details.
3.07 Meal preferences and loading animation
-
Update the meal preference universally.
-
Added loading animation with random images of cities when switching between pages.
3.03 Trip details - the 2nd layer - Booking details
-
The first page of the second layer of trip details, (see the top left corner), displays all the essential information that can be easily edited to enhance the user's trip experience.
-
This section allows you to manage everything related to your trip, including updating baggage information, purchasing insurance, booking hotels, hiring cars, upgrading your cabin class, and selecting meal preferences—all integrated into one convenient place.