Rethinking Aarogya Setu — Part 1

With COVID hitting the world, countries started rolling out their contact tracing mobile applications. These contact tracing apps help prevent the spread of a virus by proactively finding people at higher risk than others due to potential exposure. It also sends out notifications to people thereby alerting them for quarantining themselves.

The Indian Government also launched its official contact tracing mobile application for COVID-19. It was called Aarogya Setu. Since the launch by Prime Minister Narendra Modi, the application saw huge traction and became the world’s fastest mobile application to reach 50 million installs in just 13 days. The app currently has 100 million downloads. The application was also made mandatory for traveling across states.

The widely popular app, however, has lot of user experience issues. In this article, we would deep dive into the Part 1 of redesigning Aarogya Setu. In Part 1, we would be redesigning the home page of the application.

Objective

As described above, we would be rethinking the Aarogya Setu app over a multi-part series.

• In this part, we would only cover the home page of the application.
• Further, we would redesign other pages of the app in terms of user experience and communication.
• We would also add new features in the application.

So, let’s get started right away!

Aarogya Setu — the current version

The app has below high level features currently:

• Login via OTP
• Nearby COVID Statistics
• Self-assessment test
• Current health status
• Awareness and Educational Videos
• COVID Stats in India
• Scan QR Code
• e-Pass
• FAQs
• Multilingual
• Share app with friends
• Call Helpline
• User Settings
• Message from PM

The current user journey for a user in Aarogya Setu app is as follows:

• Download the mobile app from Google Play or Apple App Store.
• The user is shown a set of intro slides giving a brief overview of the app.
• The user is asked to login through his mobile number via OTP authentication.
• He is also recommended to take the COVID self-assessment test.
• Post this, he lands on the home page of the mobile app.

This is how the current home page looks like.

The current home page of Aarogya Setu

Current Problems in Aarogya Setu (Home Page)

Below are the problems I see on the home page currently:

• The home page is too long and contains plethora of information. It looks like a mobile version of a website.
• Navigation bar is on the top of the screen and not easily reachable.
• Non-usage of Aarogya Setu logo colors — i.e. blue, orange and green.
• The most important feature of the application is to show the people the statistics of those affected with COVID near their location. And this is the weakest point of the app — user experience wise. This statistics is shown in a vertical marquee format — with each figure coming one by one. The user literally has to wait for 3 seconds to read the next card. The animation of the vertical marquee is also sluggish and often hangs in low end devices (<1 GB RAM). This is the critical piece of information and it’s hidden in a way.
• The home page contains a section called Trending Videos that has educational videos. This particular section is also given as a separate tab on the home page by the name “Media”. This is ambiguous. It is understandable that user should be shown the awareness videos — but I believe this is just repetition of a page.
• A section called Resources is also given that has generic information of ICMR approved laboratories. Wouldn’t it be better to show nearby laboratories to a user rather than asking him to drill down through state and searching manually. We would not show this on the home page in our redesign.
• Aarogya Setu app was also questioned for its security and privacy concerns due to which the Government of India had open-sourced its code. That’s why I believe Privacy FAQs are shown on the home page itself. We would not show this on the home page in our redesign.

Now that we have narrowed down the points of improvement, let’s get into redesigning the app’s home page.

Redesigning the Home Page of Aarogya Setu

For the newer Home Page, I have decided to feature the following sections:

• Current health status
• Multilingual
• Self assessment
• Call helpline
• Nearby COVID Statistics
• Message from PM

Bottom navigation bar

The very first thing I decided to change was the navigation menu to the bottom of the screen.

The navigation bar moved to the bottom of the screen

The problem with the current navigation is that it is on the top of the screen and not reachable if we consider larger screen phones. If it was still swipe-able, then also the problem could have been reduced. Pushing the navigation menu to the bottom ensures easy reachability for the users.

I have also replaced the e-Pass menu with a More menu item. Certain features of the app can be pushed to the More page. I have also added the Aarogya Green color from the logo to highlight the active state of the menu.

Health Status Cards

The next section I decided to revamp was the health status cards. So, whenever you are safe, might be at risk, or at risk — Aarogya Setu notifies you through a dedicated real estate on the home page itself. I tried to make it more user friendly.

I have added a dynamic message for the user based on the current health status.

Health Status Cards for Safe, Risk and Might be at Risk

Nearby COVID Statistics

As talked above, this is the one of the most important features of the app and has major issues right now.

I decided to replace the vertical marquee with four list items so that the numbers are visible right away at one glance. Here also, the communication on the current app is too “texty” and has lot of paragraphs. I have made it concise and crisp with one word. I have even added the relevant icons for each of the numbers, i.e. total users, self-assessed users, positive users and unwell users.

The redesigned section for the nearby COVID statistics

Other tweaks

I also made some minor tweaks as follows:

• Moved the Call Helpline and COVID Assess buttons on the top thereby not confusing the user with bottom navbar and bottom CTAs.
• Changes in footer design — slightly changed the layout to show version number and privacy policy (as a hyperlink that would open up Privacy page with FAQs).
• Moved the Share with Friends button to More section as the app doesn’t require more promotions deliberately on the home screen itself.
• Decided to go for native fonts, i.e. SF Pro for iOS and Roboto for Android.
• Usage of Aarogya Setu logo colors — Green, Orange and Blue.

Let us now look at the newly redesigned Aarogya Setu home page.

The all new Aarogya Setu — Home Page

Final thoughts

I really love designing apps that reach out to a wider set of audience. That is why I chose to redesign the Aarogya Setu app because of its reach to even the remote level of India. As promised, I would be back with the next parts of the redesign where we would see the other pages of the application.

If you have reached down to here, I hope you guys have enjoyed this redesign. Do not forget to CLAP as much as you can. And share it with your friends. If you have any questions, feedback or suggestions, please drop them in the comments below.

If you liked this story, you might also like my redesign of the Zoom app. You can reach out to me on LinkedIn or Instagram.