Airtel - Designing a unique billing experience for all B2B endeavours.

 

 

Screenshot 2019-05-09 at 12.42.07.png
 
Client: Bharti Airtel Limited
Role: UX & UI Designer
Project duration: 18 months
While working at: Gen
 

Brief

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.

 

My duties

Flowcharts; Wireframing; Standardization; Visual design; Prototyping; Handoff


 

The first step: Creating a billing dashboard that speaks to the user.

 
1_Billing Landing PC.png
 

Problematic

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.

 

Solutions

Create a modular dashboard with different sections and widgets that can be customized to cater for all users and product needs.

 
BL 3.png
Billing Landing 1.png
Early sketches

Early sketches

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.

 
Final wireframe

Final wireframe

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.

 
Final Version

Final Version

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.

 
Mobile version (Tablet only)

Mobile version (Tablet only)

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

 
Trends1.png
 

Problematic

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.

Solutions

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.

 
Trends1.jpg
Chart studies

Chart studies

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.

 
Final Wireframe

Final Wireframe

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.

 
2 - Payments Trend.png
Final composition

Final composition

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.

 
Mobile version (Tablet only)

Mobile version (Tablet only)

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

 
1_Dashboard-Widgets_Airtel_B2B_Mobility_Desktop_Comps-V1.png
 

Problematic

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.

Solutions

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.

 
D1.png
Early sketches

Early sketches

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.

 
Screenshot 2019-05-08 at 15.14.10.png
Screenshot 2019-05-08 at 15.14.32.png

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.

 
D8.png
Final composition

Final composition

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.

 
Mobile version (Tablet only)

Mobile version (Tablet only)

The mobile version keeps the base structure of the desktop version, while bringing all actions upfront.


 

A quick exercise: Navigating through different accounts.

 
video-1555601692.gif
 

Problematic

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.

 

Solutions

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.

 
Screen Shot 2018-07-15 at 19.28.29.png
 

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.

 
P1040799.jpg
IMG_20180728_152536.jpg
Oh boy, that was fun.

Oh boy, that was fun.

 

 

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: