Aarogya Setu Redesign — A UI/UX Case Study
Aarogya Setu is a COVID-19 contact tracing application developed by the Government of India. The application has taken an important role in informing users of recent contacts with COVID-19 positive patients using a Bluetooth and Location generated social graph, suggesting best practices and sharing relevant advisories with them.
As such, it is only logical that an app of such great value and widespread use must have a user interface that caters to the needs of everyone. Hence, this UI/UX case study — a redesign of the app on the basis of my personal preferences. Please note: Since this is a personal redesign project, features added, subtracted or modified are all according to my whims only.
The project has been made in Adobe XD, using icons from Feather Icons, and 3D illustrations made in Paint 3D.
Before moving on to the actual redesign, let’s look at the high level user flow chart of the revamped app. The most prominent feature of the redesign would be the introduction of the ‘faq’ section on the navbar, in place of the currently present ‘media’ section. We will get into the detail of this later.
Following the flowchart, let’s look at the design specifications of the app — namely, the font family, font size, the color scheme, and some of the icons used. The only font used is Poppins, in Semibold style for headings and in Regular style for content. The font sizes follow a custom rule of 3:4, which I have been using for all my projects. Through this, the content creates a clearer hierarchy, and makes them relate to each other as they increase in the same ratio. (This rule is not mine, but was shared in an Instagram post)
Home Screen
For the main screen, each section was moved to its individual rounded cornered container. The navbar was moved from the top to the bottom to increase ease of access. Giving a priority to ‘Call Helpline’ button, it was placed above and in the middle of the navbar, whereas the ‘Assess Again’ button was moved to the top and made a part of the vertical scrolling area. It is not often that the userwould select the ‘Assess Again’ button, hence the decision for its location at the top.
The section providing the count of users in his/her vicinity getting in contact with other patients (or potential patients) has been given its own container with all the information displayed at once. In the original design, it scrolls slowly in a narrow area, providing with one line of information at one time, and placing the most important piece of information (XX number of users diagnosed as COVID +ve) at the end. It was really frustating to wait for this line to pop up, when clearly it is the most vital information one can receive from the app.
FAQ Screen
As mentioned earlier, a link to ‘FAQs’ was added in the navbar, replacing the ‘Media’. Instead of the FAQs getting missed while scrolling down the home screen, it is much better to dedicate a new link in the navbar to it, so that it can be accessed anytime-anywhere.
It is divided into 3 sections: general information, privacy safeguarding, and information about laboratories conducting COVID tests. In case the assessment evaluates a ‘At Risk’ situation, it will redirect the user to the section containing information about laboratories.
COVID Updates Screen
Not much was changed in this section, except for upgrading the UI to match the design specifications of the redesigned app. Like in home screen, individual containers have been created within a vertical scrolling area. Upon entering this section, more information is available to the user in the redesigned version, when compared to the original.
Other Important Screens
This would include the screens where 3D illustrations were incorporated, namely the Intro Screens, the Self Assessment screen, the Result of the said Self Assessment, and also the screen indicating the users’ recent contacts and option to upload the data to the goverment servers.
Finished Prototype Video
Watch the prototype ready app in action here: https://youtu.be/obzL84G9-JE
PS: This is my first time creating a case study, hence apologies for any mistakes as well as lack of jargons at the correct places.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
Get the UI kit, complete with 3D illustrations, icons and prototype ready XD file from Gumroad.
