Aarogya Setu App Revamped


Behance Project

Last year when the public paranoia for the corona virus pandemic was as its peak the Indian Government released its COVID-19 contact tracing application called Aarogya Setu. Developed by the National Informatics Centre under the Ministry of Electronics and Information Technology, the application was widely accepted by the general public as it gave people some sense of control over the chaos that was unravelling in front of them as they saw the numbers of confirmed corona cases and deaths caused by it increase exponentially everyday.

My father was very keen about making sure that every member of his household had the app on their phones and he personally checked that I had installed it and was signed in. Although I had the app on my phone I seldom opened it to use any of its functionalities and the reason being its very cluttered and confusing UI/UX design.

Recently when I participated in Re-iterate, a product redesign contest conducted by IxDA-Vellore, I got the opportunity to redesign the Aarogya Setu app and I tried tackling all the issues which I faced with the app as well as the issues which led to a bad user experience for many.

Overview

Problem Statement:

You have to identify UX problems in the app that you choose, and design relevant solutions.

For this redesign project I teamed up with Sanjna Subramanian and we both worked together through the various stages of the process. Keeping in mind the frustration I faced when I first used the application we both started by first going through the application on our devices and studying every feature and piece of information that has been provided on it. During our inspection of the app we made a list of various problems which the app faced and had to be addressed in our redesign.

Our end goal was to redesign the Aarogya Setu application in such a way that it eases out the many issues it faces in its current design and also include some crucial features which an app dedicated for COVID services must have but lacks.

User Research

This was a 48 hour redesign contest so the scope of the user research that was conducted was very narrow but we still tried to collect a few insights from various users of the application.

A survey form was sent out with questions regarding the application and it helped us to frame a bit more clear image of the features which the users preferred more and the areas which required development in terms of UI and UX.

Friends and family members were interviewed and were asked similar questions as in the survey. After collecting those insights we compiled a list of problems with the app and ideated to come up with new features and a better UX flow to solve the issues listed below.

Problems with the UI/UX of Aarogya Setu app

After thorough observation we noticed some glaring problems and ambiguities with the app. These are the general issues which the app faced, in the next section the problems in every tab of the app are highlighted in detail, along with the solutions we designed.

General Overview of the Problems:

  • The information is not perfectly organized and there is a randomness in the classification of different types of information.
  • The vaccination-related functionalities in the app are completely ambiguous. Due to the presence of CoWin, a separate website for vaccine booking, there is a lot of redirecting to different tabs and sites from the app therefore increasing the number of clicks to reach a goal. These redundant buttons and steps were removed and the vaccine booking functionality has been integrated in the redesign as a separate tab.
  • The application misses some crucial features which would be really helpful to users.

The problems are highlighted in the next section in detail, along with solutions.

The Redesign

Your Status

The “Your status” tab is the home page of the app and it is the first thing the user sees. The most important and the relevant piece of information on this tab is the risk assessment result concluded from the contact tracing technology which the app uses. This features informs the user if they are safe or at risk of being COVID positive due to recent exposure to a COVID positive contact. In the current design in order to access more information regarding the user’s vaccine status there is an additional button. This information to the user is more important than other pieces of information that have been displayed on this tab.

Another major issue with this home page was with another crucial piece of information which was the proximity data, where the user picks a radius and gets details of all the app users in that surrounding radius and assesses a risk status. The details are displayed in an animated vertical scroll format, which is unnecessary and only wastes the time of the user because they need to wait for every detail to slowly appear on the screen.

Vertical Animation to display crucial data

It takes nearly 20 seconds to show all the information through the vertical animation which just wastes the users time and attention. These two major issues were addressed and solved in the redesign as follows.

The section which displayed the user’s status was more personalized and the important details which were before concealed behind a redundant button were now displayed along with the other info of the user.

A new section called “Your Proximity” was added to clearly present the data which was before displayed in an inconvenient vertical animation.

We also added a new functionality to the app called ‘Hot Spots’ which presented the user with a map of the chosen radius and displayed areas in the proximity of the user with high number of COVID positive cases. This would help the users to avoid highly infected areas when they commute.

See Behance Project

COVID Stats

Moving on to the second tab of the app which displays statistical data regarding COVID cases of the state the user is residing in and also of the entire country. From the survey and the interviews we conducted we found out that this section of the app was used the most by the users on a regular basis.

The tab’s name was changed from ‘COVID Updates’ to ‘COVID Stats’ to give a clearer context as to what it contains and some other minor issues regarding data visualization were fixed in the redesign.

Current Design

As it is noticeable that the spacing between the different chunks of data is all over the place and it is hard to correlate numbers and text which are supposed to represent of chunk of data. This was fixed in the redesign with proper spacing and alignment of the data.

See Behance Project

Book Vaccine

The app has the facility to book vaccine slots under the Vaccination tab but the process to do so has been complicated with redirects to the CoWin tab where the user is expected to go through a few more steps. In our redesign we have tried to bring down the number of redirects and clicks to find and book an appointment for a vaccine dose by completely dedicating a tab for the purpose.

In our redesign we have included the ‘Book Vaccine’ tab which integrated the same procedure followed by the CoWin website to book a vaccine appointment and have reduced the number of in-between screens for a smooth and swift booking experience.

See Behance Project

Information

As stated at the start one of the general issues with the Aarogya Setu app is that the information is not properly organized. Random pieces of media such as links to articles and videos for the purpose of awareness and news have been placed across the app randomly without proper classification.

For instance the home page of the app which is the Your Status tab has been utilized to display helpline numbers, Useful resources, awareness media content and a sub section of the FAQs have been displayed here.

The FAQs button is again repeated under the CoWin tab and News regarding Vaccines and Corona virus can also be found upon clicking the Vaccination Information button under the same tab.

This random distribution of useful information across the appforces the user to remember the location of each piece of info on the app and it isn’t intuitive as to where to find a specific piece of information.

This is resolved in our redesign by listing all this useful information and different pieces of content for awareness and news under one dedicated tab called ‘Information’.

Few more fixes

In the current design of the app the buttons to Change language and share the app are placed above the top navbar. In the redesign these buttons have been moved to the side bar and have been replaced with the Status Check button which allows the user to check the health status of their loved ones. The assess again button at the bottom is also moved to the side bar.

See Behance Project

Final Statements

As a beginner UI/UX designer this redesign exercise was an excellent opportunity for me to hone my skills and develop my understanding of user experience and how through iterations it can be made more satisfactory. I was able to gauge my abilities as a designer and was able to find areas where there was more learning and practice required for me to get better.

Thank you for reading!

Socials

Thanks for reading! Do let me know your thoughts on this case study or my redesign in the comments. Reach out to me on any of the social platforms linked below and we can talk about anything from design to sitcoms to food 🙂

Instagram | LinkedIn | Behance


Aarogya Setu App Revamped was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.





Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here