I use my Magic Spells to change a Bad Interface when I see one.
A visual story of how I redesigned a User Interface I didn’t like.
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.
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 theUser 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.
The following animation will depict two navigations I used to achieve two needs and my thoughts on how the experience was.
Scenario #1
Recharging the data for my phone by entering the Airtel app and browsing all the data plans.
The Problem
- The splash screen is very buggy, takes a lot of time to load and the animation isn’t crisp and smooth.
- The main home screen has too much happening, and I’m not getting feedback after clicking any of the buttons.
- 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.
- There is no clear categorization at the start and a search engine to find the right pack.
Scenario #2
Checking my balance to see if the data pack has been applied.
The Problem
- That navigation which I just clicked didn’t have a button.
- The info which it gave was slightly more detailed than the one on the home screen but isn’t easily accessible.
- The other things on that screen have separate navigations in the home screen itself.
- The whole transition and animation itself look slight tacky.
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?
Obviously, it’s more than that. Aesthetics, Colors, Typeface, Composition.
But the point being, It gives a more good ring to it.
Okay, there are too many classifications happening here, But we have come to the main part. The action. The Redesign. Like all 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.
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 two 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.
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 High Fidelity mockup of the previous navigations. Which I had issues with.
Scenario #1
Recharging the data for my phone by entering the Airtel app and browsing all the data plans.
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
Scenario #2
Checking my balance to see what all packs are existing.
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.
Redesign of the Splash Screen.
And well, It’s done. And yes, It does feel relieving.
That’s it then. I have shared all my thought processes and this design which came immediately to my mind. Thanks for taking the time to look over the project and waiting while all the GIFs were getting loaded. I consider this as a study on how the thought process works as a designer while redesigning a User Interface which I didn't was a good experience.