Airtel - A UI Redesign Story
Airtel - A UI Redesign Story

Airtel - A UI Redesign Story

A visual story of how I redesigned a User Interface I didn’t like using my magic spells.

I am a multidisciplinary designer, interested in various facets of design and especially Typography. So whenever I see a misaligned, unevenly spaced text or just bad typeface, there comes this ‘spidey sense’ feeling, and I immediately correct it in my mind. Obviously, Many designers have this ability, It’s what makes them what they are.
So, when I started learning User Experience Design, This ability also tagged along, making me question all the experiences around me. But Nowadays most of our experiences are confined to the smartphone. And one of those experiences is recharging your data to keep on continuing using the phone watching and intaking endless content and knowledge.

image

The Premise

Airtel is one of the mobile network leaders in India and comprises 28% of the users in the market, Me being one of the loyal users. So when I opened to recharger my data, My sense was tingling, looking at this UI which my mind started correcting immediately. The following parts will explain the issues and show how I redesigned the UI (And also the User Experience obviously) using my special magic skills.

Disclaimer: The GIFs are slightly taking time to load, so do be a little patient so that you can view the full experience.

image

The following animation will depict three navigations I used to achieve two needs and my thoughts on how the experience was.

Scenario #1

Entering the Airtel app and first impressions.

image

The Problem

  1. The splash screen is very buggy, takes a lot of time to load and the animation isn’t crisp and smooth.
  2. The Splash Screen isn't exciting enough to wait for the app to load.
  3. The Home Page Doesn't reflect Airtel.

Scenario #2

Recharging the data for my phone by entering the Airtel app and browsing all the data plans.

image

The Problem

  1. The main home screen has too much happening, and I’m not getting feedback after clicking any of the buttons.
  2. It just doesn’t feel like an Airtel app. The colors, the typeface, the icons all feel like they were made with separate design systems in mind.
  3. There is no clear categorization at the start and a search engine to find the right pack.
  4. No final checking of the data pack before buying it.

Scenario #3

Checking my balance to see if the data pack has been applied.

image

The Problem

  1. That navigation which I just clicked didn’t have a button.
  2. The info which it gave was slightly more detailed than the one on the home screen but isn’t easily accessible.
  3. The other things on that screen have separate navigations in the home screen itself.
  4. The whole transition and animation itself look slight tacky.

image

Moving on from these thoughts of the problem in my mind, I started constructing a redesign. When imagining this, I always think of it with a flair, a fantasy, for example, If I wave my wand towards the app, I change the interface, By casting a spell, Obviously. I don’t have to explain where this thought came from.

So what is this spell?

image

Obviously, it’s more than that. Aesthetics, Colors, Typeface, Composition. But the point being, It gives a more good ring to it.

image

Okay, there are too many classifications happening here, But we have come to the main part. The action. The Redesign.

Like all action scenes, I’ll represent this in sequences. 3, to be accurate.

Sequence #1 — Warm up with the icons.

What’s up with all the app icons of Airtel. Yes, I downloaded them all to make this point. It looks like there is no uniform design system in place to guide the illustrations and design language. So I cast my spell on this first.

image
image

image

So what I did?

1. Made the brand colors more prominent.

2. Designed all the illustrations to be in a uniform language.

3. Tried to implement the typeface used by the brand.

And, Voila.

Sequence #2 — The First Hit, Solving the problems mentioned previously.

Remember the three problems I had mentioned before, Yes. Now is the time to solve them. As customary, I imagined casting this spell and the UI changing magically.

image

image

Nice, So what did I do here?

1. Made the Brand Colors more prominent & distinct.

2. The Illustrations are more in line with the whole brand language.

3. Designed the Navigational buttons and UI elements more distinctly.

4. Removed unnecessary UI elements and repeating content.

5. And Importantly, Got an iPhone.

Now I’ll present the entire Hi-Fi mockup of the previous navigations. Which I had issues with.

Problem #1 - Changing the First Impression. That Splash Screen.

Solution

It ain't much. But its something. Some excitement until the page loads. I think that's why splash screens are there for.
It ain't much. But its something. Some excitement until the page loads. I think that's why splash screens are there for.

Problem #2 - Recharging the data for my phone by entering the Airtel app and browsing all the data plans.

Solution

image

image

The main problems were that the UI was quite nonfunctional, And searching for recharge packs were not clear. So I have made

1. The overall UI better.

2. Animations more interesting.

3. And the info about packs more clear.

4. Classification of Recharge packs clearly.

Problem#3 - Checking my balance to see what all packs are existing and to see if the recharge is successful.

Solution

image

image

So the whole point of the navigation previously seemed pointless. Whereas here, I tried to eliminate repeating elements and information and made in concise and easy to navigate also, making it more of an info bar than a separate screen.

Sequence #3— The Killing Blow. Changing the UI in other places.

My thoughts weren’t only about changing the design just in the navigation I was experiencing, I roamed around the app a little and found that Maybe I need to expand the scope a little. So here are two things I designed other than the main issues I felt.

Redesign of the other tabs in the App.

Transition of Interface from home to Airtel Payments Bank.
Transition of Interface from home to Airtel Payments Bank.
Transition of Interface to Airtel Pay.
Transition of Interface to Airtel Pay.

Transition of Interface to Airtel Play.
Transition of Interface to Airtel Play.
Finally Transition of Interface to Profile Page.
Finally Transition of Interface to Profile Page.
image

I guess the spells worked. And well, It’s done. And yes, It does feel relieving. That's design.

image

image

A mood board I thought of for this redesign. I feel design systems are one of the most important aspects of User Interfaces.

And as much as 'Form Follows Function' or in our terms 'UI follows UX' All aspects should be considered, The design style, The micro-interactions & the story behind.

This is purely an interface redesign. That’s it then. I have shared all my thought processes and this design which came immediately to my mind. Thank you for taking the time to look over the project and waiting while all the GIFs were getting loaded. This is my story behind the design. Design is like organizing things, which gives internal satisfaction. So I put my newfound spells skills to use and presented a redesign.