How we transformed the AirAsia Superapp into AirAsia Move. — A Tech Journey!
Software engineering / Tech engineering at AirAsia MOVE, innovation is at the heart of everything we do. We recently embarked on a transformative journey to revamp our flagship app, formerly the AirAsia Superapp, now rebranded as AirAsia MOVE. This evolution wasn’t just about changing the name but changing the game, too, which meant embracing emerging technologies, enhancing user experience, and pushing the boundaries of performance.
Join me as I take you through this exciting tech journey behind the scenes.
The Vision Behind the Transformation
The goal of rebranding and revamping the app was to elevate and enhance every traveler’s experience.
Our CEO of Capital A and Executive Chairman of MOVE Digital (holding company of AirAsia MOVE and BigPay), Tony Fernandes, initiated this transformative journey to reflect AirAsia MOVE’s commitment to providing seamless travel experiences.
Quoting our CEO of AirAsia MOVE, Nadia Omer, in a press release,
The refreshed app icon and rebranding signify the beginning of a series of exciting changes aimed at improving our user experience and helping users go all the way seamlessly when they travel.
This collective vision resonated deeply with me, especially as it aligned with a “melodic rap slogan” I had once created during app revamp development:
You move, We move with AirAsia MOVE.
This slogan emphasized my understanding that our customers’ travel choices are essential to our success and stressed our commitment to being there for them throughout their journey.
From a software engineering perspective, embracing this transformation required a slight shift in mindset. It meant relearning an engineering belief stating:
We are building a product, not a feature.
Holding onto this vision and faith throughout the development journey led to thorough attention to detail and a focus on delivering a product that exceeded expectations.
Indeed, the quality of the final product spoke for itself, and I trust you’ve had the chance to experience it firsthand.
Leveraged Tech
As part of the revamp, we rewrote our entire front-facing UI, including the homepage, chat, and wallet.
This app revamp came at the right time, coinciding perfectly with our design team’s new release of a significant version. Two major changes it introduced firmly stood out: Jetpack Compose and Design Tokens support. As I will elaborate, these played a pivotal role in the success of our revamp.
Jetpack Compose Support
JetPack Compose allowed for a more modern and efficient UX. It enabled us to use a single programming language ( Kotlin ) for business logic and UI, significantly simplifying our development process.
The decision to adopt Jetpack Compose was a no-brainer. We knew forehand that the future of Android UI is Compose, and since we had a significant app revamp, this served as the perfect time to board the Jetpack Compose plane.
In addition, our dedicated mobile engineering team had already begun building and contributing to a library of reusable components using this tech, which we relied upon. The library provided a single source of truth for our UI components and saved us significant time during app development.
What was truly impressive was the foresight demonstrated by these fellow mobile engineers, who addressed the app revamp’s product priorities and anticipated future possibilities by ensuring that the library components were reusable and scalable, laying a robust foundation for future iterations.
Design Tokens
Design tokens encompass style values such as colors, fonts, and measurements. Google introduced Design Tokens in Material Design 3 as the fundamental building blocks of all UI elements. These tokens ensure consistency across design files, tools, and code, facilitating seamless integration across mobile platforms and making it much easier to maintain and update our app styles in the future.
Enhanced User Experience
My approach during an app revamp begins with a thorough evaluation of the current state of the app’s UI/UX. I start by identifying areas for improvement, underlying issues or bugs encountered previously, and a need for a delightful UI/UX feel. I also consider the app’s code base and highlight areas for improvement. This evaluation is then presented to the software engineering team and prioritized, ensuring our app revamp avoids repeating past blunders and delivers an enhanced user experience and code base.
The publicly released revamped app introduced numerous UX/UI improvements, and we had the chance to address known issues. Though allow me here to focus on some of the few key enhancements:
Streamlined UI with Design Tokens
As mentioned, we adopted the Design Token System’s standardized component styles, making restyling and remote changes more manageable. This approach eliminated hard-coded colors, fonts, and app icons, providing greater flexibility and scalability in design updates. We can swiftly adapt to evolving design trends and user preferences by embracing this design system.
Achieved Consistent App Theming
We developed our new front-facing UI, keeping the app’s theme in mind, by relying upon the theme provided by our design library. This alignment ensured a consistent visual presentation for future dark and light mode support, a feature our customers and Allstars alike heavily request. This app theming also allowed us to maintain visual consistency and adhere to our new brand identity.
Implemented Personalization Feature
One of the new exciting features we introduced is personalized recommendations that recommend our users deals, travel-related content, and ongoing promotions based on individual preferences.
We hope this will be a source of inspiration during travel, so I suggest you check it out.
Introduced Wallet for Seamless Transactions
Another exciting feature is the introduction of the wallet, which allows users to unlock exclusive privileges for everyday convenience via rewards. It also comes with BigPay integrated, which brings seamless access to financial services during travel, such as balance display, top-up, and payments.
Enhanced Homepage Navigation
The revamped homepage header introduces a sleek and modern design and is a central hub for users to manage their AirAsia accounts effortlessly. By relocating navigation to essential account management functions, such as accessing user profiles and settings, to the header, we’ve simplified the navigation process for our users.
Introduced Spotlight Feature
The new Spotlight section is a focal point on our homepage, offering users a curated glimpse into the most critical aspects of their travel journey. It converges essential information, including details on upcoming trips, rewards balance, and BigPay balance, all in one convenient location. This feature has quickly become a favorite among users, including myself, due to its ability to provide a complete overview of travel essentials at a glance.
Unleashed Performance
In our app revamp journey, we recognized the importance of optimizing performance metrics and code alongside UI/UX enhancements. As we thoroughly evaluated our user experience, we also scrutinized our app’s performance and implemented various benchmarking techniques to assess it. Here’s a sneak peek at some of the improvements we made!
But before that, it’s good to know we validated these performance enhancements through rigorous testing on a 2021 device packed 8GB and running on Android 13. While these results provided valuable insights into our app’s performance improvements, variations may occur depending on device specifications, network connectivity, battery status, and concurrent background applications.
Optimized App Launch Time
One of the critical performance enhancements we focused on was reducing the Time to Fully Display (TTFD), measured from the app’s initial launch to the final rendering of the homepage. Through optimization efforts, we successfully reduced the TTFD by 35%. This improvement expedited the app’s startup process and improved its responsiveness, particularly under challenging network conditions.
Maximized Resource Efficiency
We also prioritized optimizing resource usage to ensure efficient utilization of device resources. One of the resources we aimed at was memory. The new homepage demonstrated significant improvements in memory consumption, consuming 120 MB less memory upon page load compared to the old homepage (550 MB — 430 MB). Additionally, we observed enhancements in graphics and native memory utilization, further contributing to overall performance optimization.
Refined Code for Clarity
Rewriting our entire front-facing UI while adhering to best practices also improved our business logic, resulting in a cleaner, leaner, and more maintainable codebase. We saw a significant reduction in Class sizes; for example, our Homepage Class’s total lines of code were reduced by 60% from 2,000 to 800, improving readability and ease of maintenance. Now, fewer UI code dependencies and app assets need to be maintained, leading to a reduced app size.
Stay tuned for more insights into our optimization journey, including benchmarking techniques we used to evaluate app performance, user impact on our performance improvements, and further enhancements in future updates. We have so much in store for this one.
Challenges and Lessons Learned.
Reflecting on the learning curve experienced by the team throughout the development process, it’s evident that the transition to Jetpack Compose and Design Tokens presented challenges and opportunities for growth.
On Design Tokens, We noticed that incorporating these posed a challenge in the initial development phase due to developers’ cognitive biases toward existing practices. However, once we got accustomed to utilizing them, we came to appreciate the efficiency and cohesion they bring to the development process. Hardcoded values and stressing over naming conventions are now a thing of the past.
On Jetpack Compose, my earlier experimental experience and familiarity with Declarative programming from previous projects provided a solid foundation and confidence in navigating this new technology. Drawing from experiences with Qt-QML and Kaspresso for UI Testing and Android Custom View development, I was well-equipped to tackle Compose’s performance and architectural aspects.
If I were to describe the experience of using Jetpack Compose, I would phrase it in a quote I coined,
“Weaving stories of art and code with Jetpack Compose, where code becomes a visual fairy tale.”
This quote encapsulates the creative and technical fusion intrinsic to the JetPack Compose framework.
The team’s learning curve was steeper, as many needed to familiarize themselves with Jetpack Compose. I organized a comprehensive tech demo during the initial phase to facilitate knowledge transfer, focusing on Compose’s design, architecture, and best practices. The overwhelming attendance rate of over 90% underscored the team’s dedication towards upskilling and growth, aligning perfectly with our Allstar values.
As the Lead on the app revamp, staying ahead of the curve was critical to preempting any potential team blockers. My foresight focus on architecture and recomposition ensured compatibility and addressed any limitations early on.
Overall, This app revamp served as a learning opportunity and fostered improvements in communication and collaboration across various platforms, ultimately strengthening our team dynamics and delivering a successful product.
Looking Ahead
We’re committed to improving the AirAsia MOVE app as we gaze beyond the horizon. We plan to achieve this through the App Excellence Program.
We designed this program to look beyond code because excellent Software Engineering is not just coding or development; it’s also understanding user intent and experience.
This program is aimed toward more exceptional UX and app performance based on user feedback, evolving tech trends, and best practices. The focus is refining the user experience, optimizing the codebase, and enhancing overall performance metrics.
The App Excellence Program is now part of our software engineering roadmap, and it’s already gaining momentum as fellow engineers get involved.
So, watch for more exciting updates and improvements coming your way soon!
Thanks for reading and If you found this article helpful, please don’t forget to hit the clap icon as many times you wish 👏
