CASE STUDY

My Airtel - Selfcare app

Airtel selfcare app ui ux design by shajee amaan

Introduction

Airtel Selfcare, also called My Airtel, belongs to one of the telecommunication service providers in Sri Lanka. It allows their customers to access their account balances and subscriptions quickly. With this app, they can send enquires/complaints to the Airtel Customer Service team for quick resolution.

Understand the problem

At that time, the client had two applications: one was to let their customers watch movies through their network, and one was a self-care application. They wanted to merge them so their customers didn’t want to download two applications. The previous application was built on older technology, and they wanted to build it on new technology. So this was more of a revamping project, but these were some key issues that I’ve identified from the beginning.

The old app design was outdated

There were many user experience issues, and the UIs couldn’t compete with the rest of the self-care applications on the market.

Lack of features

Some essential features were missing compared to the competitors, which the client wanted to include but couldn’t do properly due to the inconsistency of the design.

Functionality issues

This is more of a technical issue that we realized as a team. This was because of the older technology used to develop the application.

Identifying the users

The primary target audience for this application is airtel customers. As per the purpose of this application, we want them to use this application to manage their connection, such as top up the balance, activate packages, explore VAS, etc. But here, we had to narrow down the customer base by using their age and the devices they own. The client had these stats from the beginning, which they collected through their research. This revamp mainly focused on users between the 18-45 age range.

Goal

The goals were pretty straightforward. As the lead designer, I had to,

Create a new design system, and UIs

Designing without a proper design system can cause many issues in both the design and development processes. So I decided to make sure that won’t happen this time. I had to stick with the main branding, but I got the freedom to define a new design system for this version.

Define the new set of user journeys

I decided to recreate most user journeys more efficiently so that users won’t get confused when using the application.

Design Process

To kick things off, I had a brainstorming session with the client. That is to identify the new features they want to incorporate into the new design. Then the second thing I had to do was conduct a competitor analysis to see how the rest of the self-care application works, their customer feedback on specific areas, and how I can adapt those into this project to make it more user-friendly.

Define new user stories

Based on those metrics; I created a new set of user stories for this application version. I had to validate everything with the client and the dev team with their limitations, so I had to handle a couple of iterations. I must mention that everything I’ve done passed through both client and our team to ensure we’ve been in line 100%.

Wireframing the ideas

was next in line once I got the confirmation on all the user stories. The feedback I reached for the initial wireframes from both the client and the team was positive. The client came up with a list of feedback. Most were visual suggestions, so I didn’t spend much time fixing the wireframes and kept them on the design stage directly.

Basic app feature wireframe

A Simple style guideline

This was something that I was doing while waiting for the wireframes’ confirmation. I wanted a solid style guide for this version, so I created one using their brand colors and fonts.

UI designs

I’ve done the first set of UIs based on the initial wireframes. I had to incorporate the visual suggestions that the client shared with me in the wireframing stage. I wanted to have the new design more minimalist and go with modern UI trends and the brand identity. To ensure the final designs make sense, I’ve created a prototype using all the UIs and shared it with the client,t and selected a group of people with a set of user stories. They could reach their goals without any issues and much easier than before.

Airtel app login flow
App login flow

Add new connection flow
Add new connection flow

Airtel selfcare ui ux design
Some of the other screens

Conclusion

Adapt to the changing client behavior

There were situations where the client came up with different approaches rather than going with the suggested solution. In those situations, I have either validate my solution and show the pros and cons or accept what the client suggested. That is a situational thing when working with corporate clients.

Take it one phase at a time

I learned to break down complicated designs into small, manageable chunks. This makes it easy to get feedback and also move sections into the development stage.

Thank you for reading through! I hope you enjoyed learning about my design and thought process. :)

Other work

Let's discuss about your project

hello@shajeeamaan.com

Let's discuss about your project

hello@shajeeamaan.com