A single app delivering multiple services

ANA Mileage Club is the official app for club members, and Fenrir was tasked with assisting in a major overhaul of their ‘Super App Scheme’. The scheme aimed to combine the various functions and services of the Mileage Club into one convenient solution. The scope of this assignment covered everything from developing the app concept, the strategy, the design, all the way to the actual development and release.

With the new app, users can not only manage their mileage and purchase air tickets but also use their miles to book hotels and air tickets. Future expansions will offer e-commerce as well as payment services through the mini-app, which is all part of the long-term vision of establishing a core app to serve all of ANA’s markets.

Research and concept

An app for everyday use

Initially, the app was a simple tool for displaying a club member’s mileage. ANA sought to build on that foundation to drive profit in areas outside of their airline business, and this developed into a project to overhaul their app from a simple tool to one that can deliver a wide range of services for their users’ everyday lives.

Fenrir worked with ANA’s project team from the beginning to understand and analyze user wants and needs, and based on that analysis we proposed several service concepts that would position the new ANA app as an everyday tool.

The “Action Trigger”

Initially, we proposed two service functions: “Earn miles by using services”, and the payment service “ANA Pay”, because both of these functions played to the strengths of the ANA Group and also drove profit.

However, the client was keen to offer an entirely new user value through the app, so we went back to the drawing board. We revisited our research and reviewed ANA’s business offerings, and came up with an updated concept: “an app that works as a trigger for action.”

Design

Universal Design

With so many new services being delivered via smartphones today, it is vital that the UI cater to all users including seniors and the physically-challenged. However, there are many services that still fall short on accessibility with no option for text enlargement or text-to-voice. We decided to work through several iterations to design a UI that works across many different use cases.

Design that encourages discovery

The concept was to draw user focus to the star content.

The basic background color of the top page is white, which accentuates the different colors that indicate the user’s status in the digital member authentication page. The UI is designed to offer an intuitively user-friendly experience where they can enjoy discovering new recommendations and information delivered in a timely manner.

Development

The ideal UX/UI

The team set out to strike the right balance between design and development to deliver high accessibility. For example, to build user excitement towards their destination search results, the initial design concept included enlarged photos to highlight the attractive locations as well as displaying the number of favorite spots, level of recommendations, and the latest favorable comments. However, once deployed, many accessibility issues came to light such as layout breaking down when text was enlarged or the order of text-to-speech not working as planned, all of which impacted the release schedule and other quality challenges. But the designers and the engineers persevered, and after many rounds of discussions, we were able to create a UX/UI that was as close to our ideal as possible.