Airtel IoT Dashboard Design
B2B Domain
I worked on project as lead designer. I collaborated with 2 Front End Developers, 1 Back End Developer and 1 Product Manager.
March 2022 - 1 month Duration
Overview of the old Experience
The current dashboard has been in operation for several years now and has had many additional features added over this time. I took the opportunity to look at the current version of the dashboard as a whole, and identify potential improvements.
DASHBOARD AUDIT
DEFINING PROBLEM
Breakdown of the Problem
Dashboard was giving below then basic overview of the entire system. Current design lacked in providing smooth user journeys. Information was dumped at a place without useful actionable links.
Disjointed Experience
Information is siloed and didn't work together to give meaning & useful insight. Most of the cards display null values.
Dated User Experience
IoT CMP team followed dated UI paradigms from an old tech stack, with critical usability issues.
No ingress point for newly launched features
Information is siloed and didn't work together to give meaning & useful insight. Most of the cards display null values.
Complicated workflows with no IA in place
Most experiences over time became a kitchen sink of unnecessary information , with unactionable CTAs.
Problem
In the old design SIM Inventory card showed null values due to which donut chart always showed only one value. Eventually was not required.
Solution
I tried multiple types of graph which were suitable according to requirements. In the end we agreed on horizontal stack graph. All the null values were eliminated. It was taking less space and using different colours were helping in consuming information.
Got multiple positive feedback calls form users
As the platform was redesigned after many years users were able to notice enhanced experience. Product Managers and Acquisitions teams are usually in day to day touch with customers. They gathered feedback from the users. In between multiple changes were also done to refine the design.
We are still waiting for the numbers from Data Analytics team. Not much insights has been captured as project is recently launched.
IMPACT
Complicated workflows with almost no IA in place
Most experiences over time became a kitchen sink of complex controls, with unactionable CTAs.
No ingress point for newly launched features
As IoT CMP evolved, new functionalities were added to the platform. But Dashboard didn't provide any space for new cards.
Breakdown of the Problem
Dated User Experience
IoT CMP team followed dated UI paradigms from an old tech stack, with critical usability issues.
Disjointed Experience
Information is siloed and didn't work together to give meaning & insight. Most of the cards display null values.
1. Global Search
Search functionality is repetitive
2. User Search
Another component can be used here to identify user account
3. SIM Inventory
Card shows null values, pie chart not required.
4. Basket Summary
It is an important task flow. Limited information is shown
5. Real time data usage
Initially, the card is empty and gives a perception that data will be loaded soon.
6.& 7. Invoice Summary & Billing Summary
Use of the both cards is to aware users about upcoming bills and due dates.
8. Job Summary
If user performs any task on portal a job summary is created. Table format is not required.
COMPARATIVE ANALYSIS
Taking a sneak peek
IoT CMP doesn't have direct competition, but there are similar connectivity management platforms(CMP) up and running in different geo-locations. As connectivity management platforms fall under the B2B process it was difficult to inspect different platforms. I checked two platforms' demo versions and gathered insights.
Things Mobile
Pelion Connectivity Management
Insights gathered
1. Things Mobile is creating a segregate entry point as per user profile.
2. Information architecture is clear and user friendly.
3. Pelion Connectivity Management portal is providing clear separation between SIM types
4. Nomenclature usage is hard in both the portals and may require a KT session for users.
IDEATIONS
Ideate, Validate and Recreate
Multiple iterations were done for each card. As per Airtel ideology we tried to reuse existing components created for different Product lines of Airtel. However, the available components were not fulfilling the content requirement. So I used few tokens form existing component and introduced new components. Later, Newley created components were added to library.
Final Design Highlights
I collaborated with a Product Manager, Other Designers and Development Team members in a 2-week sprint to design an ideal user experience for the dashboard. During two week duration, we had come up with multiple ideations and did pro and con evaluations for each idea. As the existing system was created on an old tech stack, constant help was taken from the dev team, to understand the backend limitations.
SOLUTION
The dashboard design of the IoT CMP hub was rudimentary, outdated and hard to understand. The development team created the dashboard layout in 2016 as an MVP. It lacked transparency of information and provided very few actionable functions.
PROBLEM STATEMENT
To enhance the user experience by making dashboard content rich and providing a global overview with access to the most important functions and controls.
DESIGN GOAL
Restrain, Reduce, Emphasize
With help of 2 Product Managers, 1 Developer and User Interviews, I gathered insights about the features which we need to showcase on the dashboard and decided their priority order. Later I segregated the information to be shown on each widget(feature) and the type of graph which can be used.
PROCESS
Problem
Basket Summary is the base of the entire portal. In old design no significant information was provided in Basket Summary card. Again a donut chart was presented which was not required.
Solution
Multiple iterations were done on Basket Summary design. "Create Basket" button was introduced. Basic information about each basket in account was shown upfront. Status of SIMs available in basket was shown.
Problem
In the old design two different cards were shown related to Billing and Payments. Bar graph was shown which was not required.
Solution
I merged information from both the cards from previous design. Modified Airtel's existing design component. In the end we decided not to use any graphical element. After drilling down deep it was not required.
TAKE AWAYE
What I learned from the process?
Dashboard was giving below then basic overview of the entire system. Current design lacked in providing smooth user journeys. Information was dumped at a place without useful actionable links.
Don’t deviate from familiar patterns
Use familiar interaction patterns (input field , CTA and Global Search ) that matches users’ mental models
Leverage the existing design components
In organisations, design components are used repeatedly to reduce multiple team efforts. I learned to take the advantage of the existing system and modified it according to current needs
1. Global Search
Eliminated multiple search features, back end changes were done to keep one global search component.
2. Welcome Header
Icon will change according as per time. Account name is displayed, user can select different accounts upfront.
3. SIM Summary
Pie chart is replaced by stacked bar graph. Eliminated all the nut values.
4. Basket Summary
Users can see multiple basket data, Create new basket option is provided.
5. Real time data usage
Initially, the card is empty and gives a perception that data will be loaded soon.
6. Quick Links
Earlier Dashboard had only one quick link, identified newly launched features and presented those as quick links. It will ensure visibility of newly launched features.
7. Subscriptions
Value added services are placed in bottom due to its low priority
8. Job Summary
Job summary card is placed on top as it provides constant feedback of the actions performed by users on system
9. Billing and Payment
Due amount is highlighted and last date of payment is shown
10. Data Pooling
Data pooling is subscription based service if users have opted for the service card will be visible
11. Order Tracking
Now users can track there orders on dashboard
12. Video Resources
There are still multiple features which are very technical for most of the users , so a video resources section is provided to update user
What is IoT CMP ?
IoT CMP is a Connectivity Management Platform utilised to manage SIM cards (Connections) equipped to the devices which require IoT support. With the help of the platform, users can switch plans, request new sim cards, deactivate sim cards and white-list various services.
Earlier all these activities were done by the Airtel Representatives. The clients used to raise tickets an Airtel Representative would personally connect with the client to resolve all the system related queries.Now we are trying to tackle this problem by redesigning the portal to make it more usable for the clients.
Application : Manufacturing, Automotive, Logistics, Utilities
INTRODUCTION
CUSTOMER BASE
Focusing on End Users
Currently, IoT CMP hub has 10,000 customers. Is used by different personas across varying roles in automotive, manufacturing, logistics, and the government. In addition to our direct customers, even our end-users fall under our user pool. They are divided among 3 categories.