Categories
Accessibility Mobile

IGL mobile app redesign for better experience and accessibility.

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.

Cover image which has mockups
Cover Image

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.

The Funnel -Shaped Design Process

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 of the reviews of IGL Connect App based on the number of stars.
Reviews of IGL App from 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.
4.5 is the rating of the IGL Connect App on Google Playstore.
Image Source: Google Playstore, Current rating of the IGL Connect App

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:

  1. Domestic Users- People having gas connections in their homes
  2. 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.

A general guideline on the interpretation of SUS in tabular form with different scores having different adjective rating.
A general guideline on the interpretation of SUS score

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.

Observation For Participant 2
Concurrent Probing of the new user ( Graduation Student) of the app

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.

Observation for Participant 3

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.

Screenshots of the current application in which problems are highlighted and shown. There are navigation and contrast issues.
Observations and Analysis of the Interface

The flow of the Existing Application

This is a flow chart showing the flow and information architecture of the application and short comings of the application
User Flow of the existing IGL Connect App

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.

Heuristic Evaluation of the current application done in a tabular form.
Heuristic Evaluation of the most used sections of the App

Accessibility Issues

  1. 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.
Screens of the IGL app- Images are used instead of the
Contrast result of Home Screen- Tool used — https://www.brandwood.com/a11y/
Contrast Result of Domestic PNG Screen- Tool Used — https://www.brandwood.com/a11y/

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.

Wireframe set A — images of Sticky notes stuck on wall
Wireframe Set A
Wireframe Set B image of multiple screens drawn on a single sheet of paper
Wireframe Set -B
Layout exploration of the home screen — image of multiple layouts of home screens drawn on a single sheet of paper.
Layout Exploration of Home Screen

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.

Image of a users hand interacting with Wizard of Oz prototype
One of Many WOZ Prototype

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

  1. 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.

Onboarding Screens where the domestic and Industrial Users can be bifurcated to make the experience smooth for each user set.
Onboarding Screens- Onboarding Screens where the domestic and Industrial Users can be bifurcated to make the experience smooth for each user set.

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.
Home screen shows the due bill and the card is shown at the top of the screen which makes it easier for users to pay the bill
The home screen

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.
There are two ways to register the meter reading the user himself and by taking an appointment the screen shows the 2 options
Meter Reading Options

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.
High fidelity prototype of the Flow 1
Flow when users self registers the meter reading

Flow 2- When the meter reading is taken by IGL officer

High Fidelity Prototype of Flow 2
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.

Maitri the helping chatbot chat window with FAQ’s as radio buttons present
Maitri the Chatbot

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.

Able to fulfill AA compliance and AAA complaince
Contrast result of Home Screen- Tool used — https://www.brandwood.com/a11y/

6. Use of Illustration

I used illustrations set of Storyset by Freepik instead of images to make the app more approachable and friendly.

Various Screens with illustrations.
Illustration in various screens

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.

A table showing the heuristic problem in the prototype of the app
Heuristic Evaluation of the most used sections of the prototype

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.

Progressive step design pattern to show which step was user on
Progressive Step Interface Design Pattern

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.

Categories
Mobile

5 Ways To Improve Your Mobile App User Experience With Illustrations

View the original post

Illustration is a visual communication of a text, concept or process. When we apply illustration on websites, mobile apps or other digital products, it can improve the user experience by helping visually explain a range of services, introduce new features, and bring vibrancy to the interface design that please your user.

The recent trends of brands and startups using illustration for their mobile app is one of the popular practices to happen to the digital world. Headspace app is one of the great examples that using stylish branded illustrations comprehensively across the mobile app. The illustrations play as a key element for almost each screen that give their users a consistent and delightful mobile app experience.

Headspace app screens design

Here are the 5 ways to improve your mobile app user experience with illustrations — and perhaps you may consider applying them in your mobile app product.

Onboarding

Onboarding is the most popular way to use illustration. When a user installs and opens your mobile application for the first time, it’s a critical moment to introduce what your app does and keep the user going to the next log in or sign up section.

Onboarding illustrations

How can illustration help?

Using custom illustrations to highlight the key features and benefits of your app will be a great way to engage your users and present the app look and feel better in the first place.

Artitor – Online illustrations for websites and apps

App Permissions Request

If your mobile app requires permission from users, such as push notifications, access location or contacts, make sure that they understand why you need the permission and what value they get. Users are more likely to agree to app permissions when they get asked after or during important tasks where permission is needed.

Request contacts access illustration

How can illustration help?

With the help of friendly and functional illustrations, it eases the tension and increases the trust when the user get asked for app permissions. As most of the people perceive images faster than words, so it’s always better than just a few words to ask for permissions, right?

Error/Empty States

When users encounter error or search content with no results found on your app, a well-designed error/empty state will let them know what’s happening, why it’s happening, and what action should they do next.

Illustration for search with no results screen

How can illustration help?

By adding a delightful illustration along with clear copywriting, the empty screen will become something more personal and engaging. It also reduces stress and have positive impact on the user experience.

Reward System

If your app has a reward system that designed for users to keep track of their progress or how much they achieved their goals, you will definitely need some visual elements to encourage them along the way. Some examples are fitness app, coffee loyalty app, food delivery app, etc.

How can illustration help?

Instead of only using icons, a set of custom cheerful illustrations can bring encouragement and positivity into the different levels of your users’ rewards journey. It gives a consistent visual experience with humanistic approach to the progress.

Infographics

Some mobile apps may need to use infographics to present data-driven content, like medical app, nutrition app, gardening app, etc, it’s important to make it easier for your users to comprehend your message than with text and chart only.

Illustration for plant growing app

How can illustration help?

Visualising data-driven content with functional illustrations can help your users receive the message and data faster, and make the app experience more fun and enjoyable.

Conclusion

Today, more than 1 million different apps are available for users to download and use, so your app probably need to be attractive enough to get their attention first. Using custom illustrations could be a smart way to impress your users on a deeper emotional level. Let’s create something memorable, interesting, and unique to your mobile app.

We hope these UI design tips can inspire you to design better user interface for your app project. If you enjoyed this article, please share it so that other UI UX designers and startup founders can find it! 🙏

Visit our website https://interfacemarket.com/

Interface Market

Easily create engaging illustrations for your website, mobile app, blog and social media channels right in your browser.

Try free ➡ artitor.com

More UI design inspiration


5 Ways To Improve Your Mobile App User Experience With Illustrations was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Categories
Mobile

Why Mobile Apps Need Voice Interfaces

View the original post

<p class="author">By <a href="https://www.uxmatters.com/authors/archives/2021/01/anna_prist.php">Anna Prist</a></p> <p>Both Web and mobile innovations are progressing at an incredible rate, making any lack in these essential technologies a critical issue for any company. As long as a decade ago, a poorly optimized Web site could lead to your losing traffic and revenues. Today, businesses cannot afford to ignore technology trends. Don’t let your business fall behind the technology curve.</p> <p class="sub-p">Creating voice user interfaces (VUIs) for mobile apps is the hottest trend right now—and will continue to be for the foreseeable future. Voice is a <a href="https://chatbotslife.com/how-to-make-your-chatbot-sound-natural-606dda87e782" title="natural user interface">natural user interface</a>. Some leading

Categories
Mobile

Regionalizing Your Mobile Designs, Part 2

View the original post

<p class="author">By <a href="https://www.uxmatters.com/authors/archives/2012/04/steven_hoober.php">Steven Hoober</a></p> <p>There is a lot more to offering your Web site, mobile app, or other digital product in other markets than automatically translating or hiring a service to translate your content into another language. In Part 1 of this two-part series, I provided an overview of how to regionalize your products—approaching regionalization from a procedural and technical point of view—and detailed the approach you should take, as follows:</p> <ul> <li><span class="run-in-head">Do more than just translate.</span> Rewrite the content in the target language, considering the context of use. Avoid slang, jargon, colloquialisms, metaphors, and jokes.</li> <li><span class="run-in-head">Use

Categories
Mobile

How can we really fix the user experience on mobile apps?

View the original post

How to save UX on mobile.

Mobile UX has a variety of long-lasting issues we need to address quickly.

These days everyone uses smartphones, which have become rather large computer screens. They come with a wide range of new and innovative apps. We have to try and find solutions that match these apps to large smartphone screens.

That sounds obvious. But. One thing seems stuck in an Older Age. The basic mobile UX principles. We, designers keep designing these fascinating new day-to-day solutions in ‘pocket’ sizes.

And doing so, we keep holding on to what we know and what (we think) our users know.

No new advances are made

Categories
Mobile

Master the Basics of UI Mobile Design

View the original post

As a UI designer, you likely already know, understand, and are passionate about the core principles, tools, and purpose of fantastic user interfaces. You may even be a propionate of the Mobile First design approach. More and more, though, the app is the end solution, with no need for a responsive design.

As far back as 2015, Oracle published a study showing that most millennials take their app experience into account when selecting a company’s goods and services and that their recommendations are similarly influenced. They reported that 65-75% of Millennials prefer to use apps for purchases, paying

Categories
Mobile

5 More Tips for Mobile App Design

View the original post

On How to Attract More Customers

Last time, we had shared 5 tips for designing mobile applications that are bound to attract customers. And we had promised to come back with 5 more tips. So, here we are, with 5 more tricks to gain your customers’ attention and trust.

Without wasting any more of your precious time, let’s get started!

1. Leave the graphic designer behind

One of the main problems why a mobile application looks great but leaves behind a poor user experience is because it has been designed by a graphic designer or a somebody who calls themselves a UX/UI designer but is actually a