View the original post
Case Study: Redesigning IGL Connect mobile app for better accessibility
The project serves as the Design Project for the 4th semester in which I redesigned the IGL mobile application to make it accessible and easy to use thereby providing a better user experience.
Background
Indraprastha Gas Limited is one of India’s leading natural gas distribution companies and one of its offerings is PNG (Piped Natural Gas) which provides gas connections directly to the home via a piped network eradicating the need of cylinders. The application is catered to many sets of users ranging from people living in normal households to Industrial and Commercial establishments, thus catering for everyone which is also the rating of the application on google play store.
The Challenge
During the Covid 19 pandemic, about 10 months back when the lockdown was imposed, a message was sent to my father's phone by IGL saying that he had to download the IGL app and pay the bills using their self-billing feature. The experience was horrible for my father and the more he used the application more confusion slipped into his mind. While helping my father to pay the bill, I observed that the problem was not the inability of my father to understand the app but the app itself was a bit complicated which common users find it difficult to operate. Seeing this frustrating and confusing experience, I decided to take this as an opportunity and dive deep to understand the problem and provide a solution for the same.
Meter Reading and Bill Payment (pre-COVID times)
Before COVID-19, an employee designated by IGL used to visit our house and click the picture of the gas meter and re-record the reading for confirmation. The bill was then generated based on the inputs taken by that employee and on receipt of the bill the payment was made through an online or physical medium.
Affect of Coronavirus on the current system
Though the current system seemed to be perfect, however, Coronavirus brought out the weakness that was existing in the system. As during the lockdown, no official from IGL came for taking the meter reading physically, as there was panic being felt by the customers that there were chances of spread of coronavirus which could be transmitted due to physical interaction. Therefore, it was essential for IGL to find out an alternative mechanism for the same.
My Role
My role was to empathize with the users, identify the problems and finally propose a more accessible and inclusive application.
The Process
I took a different approach in this project and followed a design approach which took me from the state of ambiguity where I had a lot of questions to bring about a more transparent system where everything was clear and testing each idea which would result in a step forward towards a better solution without leaving space for revisiting and changing the design for subsequent rounds of testing.
Secondary Research
To understand and gather both qualitative and quantitative data I resorted to the reviews and ratings of the IGL app on Google Playstore.
Analysis and observation of hundreds of reviews were undertaken and the most common ones were mapped based on the ratings. Surprisingly, even the users who gave 5 Star rating were pointing out issues they were having while using the application. Some of the most common problems that were mentioned by the people regardless of the rating they gave were:
- Self Billing – Even though self-billing is being promoted heavily, it does not work properly. The app, most of the times, does not detect the image of the meter which poses a problem in paying the bill.
- Log In- Despite having BP number (unique number given by IGL with which your account is identified) the app does not recognise the BP number and most of the application’s salient features like Self billing can only be accessed by logging through BP number.
- Lack of Feedback- Any task that is completed on App, there is a lack of feedback which makes it frustrating and most of the reviews talk about these issues. For example, how they have paid the bill but it shows they haven’t, how they are trying to log in but there is no OTP received and many more problems like these.
Mapping and analysing reviews gave me a sense of how prominent the problem actually is. From the analysis, I learned that ratings are not a true indicator of how good an application is. It does not highlight the real problems that the users are facing.
Concurrent Probing
The method of concurrent probing was used to study and investigate how extreme users went about using the IGL app while performing a particular task. A diverse set of extreme users were recruited for the study to understand the user's problem more deeply and empathize with them.
Understanding the type of Users
While observing and using the application it was noticed that there are two types of users of the application:
- Domestic Users- People having gas connections in their homes
- Industrial and Commercial Users- Restaurants, Hotels and other business establishments that are having the gas connections.
While both sets of users have BP number the method of paying the bills differs vastly between them. The Industrial and Commercial users have different payment plans, namely, prepaid and postpaid, which differs from the domestic users who have to pay their bill every two months. Based on interviews and secondary research, I got know that major focus is given to domestic users as they make up the larger user base.
Task: Open the IGL Connect App and pay the gas bill using the Self-billing feature and save the bill on your phone. Fill the SUS questionnaire according to your experience.
The System Usability Scale (SUS) offers a very quick and simple questionnaire design to assess the usability of a particular device or product. The SUS consists of ten usability statements that are rated on a Likert scale from strongly agree to strongly disagree with the statement. Answers are coded and a total usability score is derived for the product or device under analysis. The range of the score is between 0–100.
User’s Identity is masked for privacy and confidentiality.
User 1– A government employee who is 48 years of age and is a new user of the IGL connect app. This is the first time he is using the application.
User 2– An Undergraduate student who generally pays the bill through IGL website and is the new user of the application.
User 3– A retired army officer who has been using the app from past 1 year. He is a pro user of the app and knows ins and out of the application.
Common Observations
- Improper Design- A lot of users got distracted initially due to the moving images on the home screen. Users were not able to visually differentiate between the buttons and the banner ads by IGL. The labelling of quick pay and self-billing button created confusion in the minds of the users.
- BP Number- A lot of errors occurred while logging in to access the self-billing feature. Most of the times app did not recognise the BP number even though users have gas connections for years. Calling customer care and conveying the problem of BP number solved the issue.
- Sudden Exits- Upon exiting the login section of self-billing screen it would lead to exiting the app instead of going one step behind.
- Lack Of Feedback- Upon payment, there was a lack of feedback on whether the payment is done or not. There was also the inability to download the bill after the payment.
Bodystorming
Bodystorming is a way of subjecting a researcher’s own body to physically experience a situation to ideate. A combination of role-playing and simulation, bodystorming takes place in a physical environment, instilling a feeling of empathy for the users.
Task : Blind yourself and use your phone with the built in accessibilty feature talk back to navigate and use the IGL Connect app
Accessibilty Feaure Used: Google Talkback
Observation
Before using the IGL Connect App other application like Whatsapp were used to truly empathise. The Screen reader (talkback) worked fine but it was hard to navigate and the problem increased multiple folds when I tried the self-billing feature and it became difficult to click the correct picture and I had to rely on external support for clicking the picture of the gas meter.
Analysing the Interface
The application was divided into screens and then common observations and design problems were noted and highlighted.
The flow of the Existing Application
To understand the interaction and flows of the application, a user flow diagram of the existing application was made and analysed and all the broken flows were marked.
Common Observations
- Poor Navigations- The navigation drawer is not used efficiently, apart from the home screen. The navigation drawer is not present in any of the screen making the navigation harder and the purpose of navigation drawer redundant.
- Unnecessary Multiple Logins- For each and every screen you have to log in again and again. For example, you're paying your bills through my account screen and the next time you open the app you try self-billing option in the Domestic PNG screen you have to re-login which is a hassle as this frustrates the users.
- Prolonged Loading Time– From Splash screen to the home screen, it takes approximately 7 seconds to reach the home screen which is a lot of time. According to a Google study, 53% of the visitors leave a site if it takes more than 3 seconds to load.
- Lack of Proper Hierarchy- The most common features of the application used by the people are not on the top of the list in particular screens. This problem is consistent across various screens as it takes more time for the user to find the relevant button to complete a task.
Heuristic Evaluation
Heuristic Evaluation was carried out on the IGL Connect App. The following image displays the violations of Jakob Nielsen’s 10 Principles on Heuristics done on different parts of the application.
Accessibility Issues
- Lack Of Contrast– It fails to follow WCAG 2.1- 1.4.3 (AA)– Contrast ratio between text and background should be at least 4.5:1. This is because the background has an image instead of a plain background.
2. Placement of the meter- The placement of the gas meter can be different in different households. While in most of the homes the meters are within the eye level in some houses meters are placed in very odd places making it difficult to reach them physically let alone take pictures.
Insights
To sum up the research and move ahead with the solution I generated some Insights.
1. Poor Interface
- The app has poor navigation and the promoted features are not given any importance. They are hidden within the various screen while unimportant stuff is on the home screen. The Navigation drawer is inconsistent and is only available on home screen making the navigation between different sections of the application difficult and time-consuming.
- There are similarly labelled buttons which makes the users confused and slows them down in accomplishing their tasks.
- The proper contrast ratio of 4.5:1 between the text and the background is not achieved according to WCAG 2.1 Guidelines which can make
2. Unresponsive features
- Change in text settings alters the text of the whole interface of the mobile phone while all other apps like WhatsApp are responsive on the other hand IGL Connect fails to be responsive.
- When using google talkback there is no feedback when a picture of the meter is being taken. There is a high chance that the picture can be wrong and a visually impaired person might not be able to click the picture correctly.
3. Unnecessary Information
- There is unnecessary information on the app which increases the cognitive load on users mind and makes them slower in accomplishing their tasks as most of the users are new to the app and are still getting used to it.
Ideation
Wireframing
I sketched various wireframes with different layouts and interaction methods.
Wizard Of Oz Prototyping
Wizard of Oz prototyping (WOZ prototyping) is a design methodology used to test products at very early stages and get feedback from users and improve the shortcomings. A WOZ prototype is basically a roleplay where one person pretends to be the system and the user interacts with the system.
I tested out all the low fidelity prototypes with users to observe which one felt intuitive and natural and which was confusing for the users. This allowed me to compare all the prototypes and finally select one of them to further design a new solution.
Final Solution Concept
- Onboarding
As observed earlier there are two types in case of pipeline natural gas connection. The user can easily select the type of connection he is using and doesn’t have to log in again to pay the bill.
2. Home Screen
- As the app will be used every month, therefore, there will be push notifications to remind the users to pay the bill.
- The Home screen has a card on top to remind the users of the task they have to accomplish. The card takes the user straight to the meter reading option so that the user can easily pay the bill.
- Most used options of PNG and CNG are present on the home screen so that the user can easily access it.
- On top right corner there is an emergency alert button which will call the emergency helpline number in case of any emergency.
3. Bill Payment
There are two methods of paying the bill and the difference between both of them lies in the way of registering the meter reading. In every payment, the user can choose the method of registering the meter reading.
- User Flow 1- When the user self registers the meter reading
- User Flow 2- When the IGL officers come to the house to register the meter reading.
Flow 1- When the user self registers the meter reading
- While clicking the picture to take the meter reading the voice assistant will give the audio feedback that the meter reading is successfully captured.
- Audio feedback repeats the number when the phone is being used in accessibility mode and google talkback is on. For users using the mobile in accessibility mode, the phone automatically confirms the meter reading for the user.
- After the payment, the bill automatically downloads into the phone.
Flow 2- When the meter reading is taken by IGL officer
4. Chatbot Maitri
The increased FAQ buttons make it easier to click the desired question without any mistakes.
5. Accessibility
I used Able (plugin in Figma) to constantly check the accessibility of the colour contrast between the text and the background and I was able to achieve a high contrast ratio.
6. Use of Illustration
I used illustrations set of Storyset by Freepik instead of images to make the app more approachable and friendly.
Usability Test
After making the final concept I tested it out with a set of 5 users to understand and see to what extent the problem was solved.
Concurrent Probing
Task: Use the prototype of the new IGL Connect App and pay the gas bill using the Self-billing feature and save the bill on your phone. Fill the SUS questionnaire according to your experience.
- User 1- The SUS Score is given by user 1 was 75.
- User 2- The SUS score given by user 2 was 78.
- User 3- The SUS score given by user 3 was 70.
- User 4- The SUS score given by user 4 was 72.
- User 5- The SUS score given by user 5 was 70.
The average SUS score of 5 users came out to be 73 which has an adjective rating of Good. This increase in the SUS score shows that the new design of the app is good enough but still has some issues which can be improved upon.
Heuristic Evaluation
To find the remaining issues of the application I did a heuristic evaluation on the redesigned app to spot the problem that was remaining.
Re-iteration to improve the experience
After finding out what could be improved, I addressed the problem with the severity rating 3.
The progress step interface design pattern was used so that user was aware that which step he had completed and which steps were left to complete the payment.
The Take-Away
This project taught me that when we as designers cater to the extreme set of users and solve the problem for them a majority of population benefits by it and the overall experience of the app gets better.
It also taught me that we should consider accessibility while designing interfaces and the importance of usability testing to validate and see to what extent we have solved the problem.
😄
Thank you for reading!
I would love to get your feedback. You can connect with me on Linkedin or mail me at namanchadha951@gmail.com
Naman Chadha
Interaction Design Student at Delhi Technolgical University
IGL mobile app redesign for better experience and accessibility. was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.
