AIS Chameleon Design System

Overview

AIS is the largest telecommunications company in Thailand, with 49% market share against its competitors True and DTAC. With 46 million customers, 10 million of those use the AIS app'myAIS’ to pay their phone and internet bills. This puts AIS in a position where the company will have to innovate to differentiate itself from its competitors. Therefore, revamping the app from a ‘utility’ app to a ‘lifestyle’ app will attract a younger customer base and increase engagement, adoption, and retention rates.

Role

In this project, I took on the role of the design lead from another Oivan designer. As the design lead for the design system team in phase 2, I led a team of six designers: five from AIS and one from Oivan. I led the design initiatives, working with the UX/UI designers, developers, product managers, and UX writers. Moreover, I co-led the profile team with another lead designer to establish new working methods and ensure the work was delivered on time.

During my time as the design lead, while building the design system, I worked with the design manager to implement new design processes, establish frequent user testing for the old and new features that have been released, and work with the UX writer to build the content design system.

Problem Statement

• How might we design a seamless and intuitive experience with consistent design elements?
• How to might we increase user engagement and increase retention rate?
• How might the users access the mobile data usage and internet usage of themselves and of the members tied their account and also paying their bills at the same time?

Internally

• How to might increase collaboration between design and development team?
• How might we create an inclusive collaboration between the domain designers and design system team?

Key issues

• Unable to find the features within the app
• The most used features are placed in a position that requires extreme thumb stretch
• Lack of user engagement, users using the app to pay their bills and leave the app
• Inconsistent designs throughout the app due to lack of a unified design system

Internally

• The lack of understanding of what a design system is, what does it bring to the table
• Lack of collaboration within the design team and externally with the development team

Solution

My team and I had identified the key areas that needs to be improved according to the data from the workshop conducted in the earlier phases. Our solution was to:

• A complete revamp of the app with new concept designs with new direction from all the features laid out with no hierarchy to properly grouping in the recognizable categories
• Establishing and encouraging the usage of a new design system to ensure there is consistency of the design throughout the app and speeding up the process for the domain designers
• The scan feature has been embedded into the home navigation making it easier for the users to claim retail discounts, which led to increase in engagement and retention rate
• A new design for the profile page in the app where the users are able to view their mobile and internet data usage of themselves and the numbers tied to their account and simultaneously pay all of the bills

Setting up the strategy

We implemented a key strategy to transform the user experience by introducing innovative features and enhancing existing functionalities. For instance:

• Revamping and reorganizing the Information architecture of the app making it easier for the users to navigate around the application
• Introduction of a new design system to promote consistency in design and speed up the process of the designers while designing
• Recognizing the surge in scan payments, we integrated the scan feature into the bottom navigation bar, allowing users to scan & collect coupons, retail deals and pay their bills
• Introduction to a new section called “My asset” in the profile page that caters the needs of the users to view their data usage, assets under their account and pay the bills

Design system for ages to come

While running the initiative of revamping the new look and feel of the app. My team and I developed a fully functioning design system to ensure consistency in design components throughout the app, setting a new standard for the design visuals without compromising usability. The design system has been built from the design principles set by the team during the workshop. Our goal was to make it easy for any designer to adopt, adapt, and use it from any business team, while collaborating with the development team to integrate the design components with the code library to make it easier for the developers from any business to code. We achieved this by providing how-to-use guidelines. The design system is broken down into five parts, which are:

• Foundations
• Atoms
• Molecules
• Organisms
• Pages

Documentation

To ensure a smooth working process for designers and developers, we made sure to build a comprehensive document that covers different types of states, types, specs, anatomies, usages, dos and don'ts, touch areas, character, and limitations of the design component. While we managed to make improvements on the design end, we also speeded up the process for the development team by providing them with a code library.

Usage of Design system

The design elements from the design system has been implemented throughout the app to ensure there is consistency in visual design and experience

Key takeaways

AIS has been one of the most interesting projects I have worked on. There was a lot of diversity in the project in terms of people from different educational backgrounds, cultures, perspectives, and personalities. I was able to manage and lead an amazing team where we accomplished our goals, fostering creativity through knowledge sharing sessions, raising the design standard through revisions of our designs, gathering inspiration from well-known companies, learning from our mistakes along the way, and growing together as a team. The unique thing about our team is that there are no labels, titles, or seniority levels; everyone in the team is allowed and encouraged to voice their opinions, make new suggestions, and have constructive discussions. Being a design lead on this project has taught me a lot, from building, managing, and growing the team to working closely with the developers. I was able to learn new things from my colleagues within the design team and the development team on a daily basis, from the way they approach work to how they manage stress, etc.