Airtel is the largest independent mobile network operator in India, and the third largest in the word, with almost 500 million subscribers across 20 countries offering a vast catalogue of powerful, yet manual and convoluted tools both for Business-to-Consumer and Business-to-Business. My duties while working on Airtel at Gen were to turn the potential of these existing tools into user friendly, intuitive tools. Starting where the money is: The billing section.
Flowcharts; Wireframing; Standardization; Visual design; Prototyping; Handoff
The first step: Creating a billing dashboard that speaks to the user.
There were two main challenges: Create a good billing experience to the existing Airtel B2B products while being flexible enough for new products on the pipeline. Also, allowing for easy management of India’s current paying methods, taxing and finance systems, which are know for being a nightmare. Understanding the Indian financial system was one of the main challenges for this project.
Create a modular dashboard with different sections and widgets that can be customized to cater for all users and product needs.
The priority was to come up with a well balanced and flexible grid for all the sections and widgets, as the page could become easily overwhelmed with too much information, most of them critical. Keeping everything clean was key tu success.
After a base grid had been designed, we started filling the sections with placeholder content, predicting worst case scenarios and planing all main and secondary actions, as well as entry points for the remaining billing pages. Extensive documentation was done to cover as much scenarios as possible.
The final composition brings attention to the most urgent matters (payment of invoices) with big coloured numbers and in a synthesised tone, while secondary actions are smaller and use a more natural language to keep a human touch to things. The analytics section was also enlarged, as it’s the primary indicator of the general billing status.
For the mobile (tablet only) version, we were able to keep the grid and all main features. Since we don’t have hover actions on mobile, all action clues are displayed upfront.
Control comes with Awareness: Billing payment trends
Being able to manage various Airtel B2B products distributed by different locations all over the globe requires a clear view of the general operational status.
The overall spending was divided into “spending by products” and “spending by location” over the course of 12 months, with the future flexibility to edit the time-range. Bar graphs and Pie chart analytics were designed to clarify the relationship between what is being spent, and what payments require immediate action from the customer.
Before settling on the final analytics, we did a fairly deep research into the math and purpose of the many types of charts available, to figure out which were best for our needs.
Although complex in the background, we wanted to make this page as simple and fast as possible to read. All secondary info and details are displayed on tooltips only, following the good practices of progressive disclosure.
The final visual design fine tunes some color accents and text hierarchy to help guide the customer through the main focus points of the payment trends page.
For the mobile version of Billing payment trends, a few concessions had to be made. Due to limited real estate the pie chart had to be removed, keeping the values as text only. Although slower to read, they make sure the absolute values are shown at all times. The location bars had to be resized to fit only “Top 5 locations” instead of the full 10 locations you get on desktop browsers.
MVP requests: Provisional landing page
The digitisation process of the existing Airtel B2B products was not linear. In most of them, the Billing section was the priority, while other managing features were kept in the pipe-line for later development. This led to the need of creating some temporary fixes, like this temporary landing page.
We designed a landing / hub-like page with the existing product pages, displaying the most vital information of each one, as well as shortcuts to specific areas that need management.
Although the three main sections were locked from the start, we still had to study how the information and actions would be displayed in a logical way.
During the wireframing process, we realised some extra scenarios needed to be predicted, regarding the content of the sections. This could be tied to the type of user, or current status of their operations.
For the final design, the main concern was not to overwhelm the user with navigation options. We decided to divide each section in half, displaying the main actions on hover.
The mobile version keeps the base structure of the desktop version, while bringing all actions upfront.
A quick exercise: Navigating through different accounts.
Maintenance workers, account managers, general managers and billing executives were some of the user personas created for this project. All with different needs, but with one thing in common: All of them have various accounts to manage.
Provide an account switcher visible from the header at all times, with a list of the Airtel products associated with each account.
The Indian Job: MyAirtel App Standardisation.
I was involved in the standardisation of a concept design for the new MyAirtel App, used by +20 million users across India. Although the concept was never materialised, it led me and 4 teammates to India for the period of 2 months, to work alongside the Airtel developers and make a transitory version of the App.
Thank you for reading!
If you have further enquiries about this project or my work in general, please contact me through the channels listed below: