It's about time design was employed in the battle against COVID. In this case study we'll be delving into the rationale behind the key decisions I made while re-designing the 'Aarogya Setu' Mobile App. All aboard!

Disclaimer

This is in no way associated with the Official Aarogya Setu app or the Government. This was done purely as a personal project.

Aarogya who?

If you live in India, you've probably heard of this bad boy. Either through a drinking game where you take a shot every time our Prime Minister mentions it or Ajay Devgn (and his muscles) urging us all to download it. (Quite effective, surprisingly.)

'Aarogya Setu' is the official COVID-19 Contact Tracing App of India.

It's primary function is to tell you if you've come in contact with someone who has tested COVID positive using Bluetooth and GPS technology.

But it has a plethora of other uses as well — you get to see how many people in your locality are tested Positive, directions to nearby testing centers and hospitals, self diagnosis, etc. The idea behind it is actually pretty great, the usability however…

Sounds great! Why redesign it?

I started my journey into UX when the pandemic hit. When the time came for a redesign project, COVID was all that was on everybody's mind and this was about the same time the Government rolled out 'Aarogya Setu'. I downloaded it immediately and fooled around with it for a while. It seemed useful.

Then I realized I had completely forgotten about it — it went into my rarely used folder! This was worrisome — I did my homework on the app and knew that the only way it'll work great is if everybody has it on their phone. And half of my friends (young college going tech savvy folks), did not even have it on their phones! 🚨

Check this out 👇

These were from a Questionnaire I shot out with 35 respondents all between the ages of 15 and 60.

A staggering 42% of this small set didn't have the app! 🤯

The biggest 'why' was because they were either not aware (of why its needed) or because they felt no compulsion to download it

Now clearly, this is what has snowballed into this teensy weensy problem we see below. 👇🏾

Which is obviously a problem on a national scale!

Why is this happening? When this is being said 👇🏾

Why is something this useful not being used more?

• What I later found through research (explored below) was that the app didn't properly communicate what exactly it could do. I had 3of my own friends asking me what the hell it actually does.
• Use — it is not seen as an immediate necessity. It was pretty useful but it needed more essential functions that would encourage people to use it in everyday life.

These were the two starting points for me and as I started thinking and figuring out how to do this — I also noticed several inconveniences while using the app itself that I figured I'd try to fix as well. Thus, an entire overhaul was attempted.

Let's get going.

Grind 👷

I followed 4 techniques for research to understand everything wrong with the app.

• Questionnaire which got 35 respondents.
• Play and App store reviews.
• Usability testing with my parents.

All of the data was collated and analyzed in different ways. User personas were also created to understand who will be using this. I will not be going into this entire process because it's a separate article of it's own. But feel free to hit me up and we can gladly discuss this!

Major problems identified 🥽

1. The UI is cluttered and outdated.

2. Public places are being opened and the app is not yet ready for it.

3. The most important part of the app is also the most annoying.

4. 'Self Assessment' is way too confusing.

5. Onboarding is a pain in the 🍑. (People are unclear what the app can do)

6. 'Home/Your Status' needs a restructuring in hierarchy.

All the data collected through the research channels were collated, pressed, categorized, squashed, processed and presented here. We're going to look at each of these in detail, and solve them one by one.

A Problem-Solution narrative lays ahead!

#1

Problem: The UI is cluttered and outdated. 🐛

This is 2020 and good design is now a selling point. There is a buzz created when an app gets a facelift. There is a chance there will be significant word of mouth generated among the toughest demographic — you and I.

"Man, did you see the new Aarogya setu? They did some stuff to it — it actually looks like, sleek and all. You won't think it's a Govt. app!"

Not just that, there is something called the Aesthetic-usability effect.

The Nielsen-Norman Group defines it as this,

The aesthetic-usability effect refers to users' tendency to perceive attractive products as more usable. People tend to belie that things that look better will work better — even if they aren't actually more effective or efficient.

Of course, this is no excuse to compromise on the effectiveness of our app!

Let's take a deep dive to figure out why the UI looks cluttered.

Solution: Type scale, card design and gradient magic. ✨

And voila!

• Flat Cards: The intention of this section is just to make it look as beautiful as possible. Following a flat uniform design — all based on cards.
• Apple Card: In fact, inspiration for this was taken from the Apple Card app in the iPhone! What led me to it was "What other app shows you your status or immediate information at a moment's glance?" and Apple Card was just a great example.

• Introduced a Type scale — I chose mine based on the Golden Ratio, generated by Material Design guidelines.
• One uniform font through the entire app — with 4 Thicknesses and 6 sizes. Type is Poppins by Indian Type Foundry because it looks really really good and I wanted to give the interface a more friendly look.

Color Scheme

• Introduced Brand Color Purple for button selection.
• Gradient color scheme based on original colors to make it look incredibly beautiful.

Navigation Bar

• Shifted to bottom because it was hard to reach.
• Button selection is given Brand Color Purple.
• 'E-Pass' section removed because it's been discontinued. Replaced with 'Check-In's which will be explained in the next section.

Small changes but big impact

• Better illustrations chosen.
• App name at top given original branding and color.

All new Status Cards!

Not a very jovial affair, I am aware. But hey! Good design can always be celebrated!

The colors are also based on the official Aarogya Setu color codes.

'Assess Again' and 'Call Helpline' buttons repositioned.

• Self Assessment is shifted to the top — right underneath the Status card — because both are closely related.

• Helpline button is redesigned like the Assistive Touch feature in iOS to always be there, but less imposing. Differentiated by color (black) from Bottom nav.

#2

Opportunity: Public places are being opened and the app is not yet ready for it. 🤖

Context

India is currently shifting to Unlock Mode — which is their term for easing Lockdown curfew and restrictions they had imposed during the start of the Covid pandemic. Several public places are being opened and soon enough, people will be congregating in places again. But there is still a great risk of Community Transmission.

There is no way to know if you attended a movie and then somebody who had been in the hall turns COVID positive after a week.

All public places like airports, shows, etc. all require you to show your Aarogya Setu Status from the app and it has to be marked 'Safe' before entering.

The bug 🐞

There is a problem with this though which has been discussed in the Official Aarogya Setu Blog itself! (Yeah, they actually have one! This is the link.)

Not just that! People could screenshot a previous status and show that too.

Their solution? The title of the article of course!

Which is really great! But…

It's not immediately accessible — tucked away inside the Burger menu. As explained by the above blog itself. You would think an important element like this would feature more prominently than this.

Which got me thinking.

People are going to be going out a lot from now on. And there is still risk of Community Transmission.

How do we leverage the QR feature to make people more vigilant about heading out?

Solution: Checking In and keeping track ✅

Introducing the 'Check In' feature

Inspiration

I was looking for other apps that existed that were similar to this and found that the UK had an app very similar to 'Aarogya Setu' which was made by the NHS.

Where I looked them up and saw this.

And I immediately knew this had to be implemented here.

Hey! It's not stealing if you improve (at least I think) upon what you steal. Plus definitely if it's going to be useful for people.

Public places need to implement this and scan for checking in. I looked up how it worked and added this and a few UX changes to our app.

The Design!

An organized approach to Contact Tracing

• Access QR code super quickly straight from the Status card!
• Show it to the guy at your venue — who is checking people in. They scan your QR, which shows them your status and they can decide whether to check you in or not.
• Once he does, you get a notification and it gets registered in your 'Check-Ins' which you can access from the Bottom Nav and from Home!
• You can view all of your recent Check-Ins, all of which are displayed by cards.

Check-In Card!

• This allows you also to have a database of how many attendees were there in your slot — weather a movie, a restaurant, etc. (check below image for full detail
• The app, through Contact Tracing, will update when anybody in that gathering turns unwell or Covid+ve and lets everybody else know.

Easier to spot trends

• What if over a week the number of Covid cases in one of the cards jumps from 1 to 7 people. That is a clear sign of community transmission and you would want to take a test soon.
• Trend spotting made visually simple. More yellow and red cards? You probably are at significant risk and need to get tested.
• A sort by Drop down is given on the Check-In page for the cards under the 2 criteria
• Severity (Low to High or vice versa)
• Date (Newest First or Oldest First)

Shorter steps and more impact

The new flow shows 2 main points.

• The number of steps to get to QR Code has been reduced. Why? Because along with this new function, it will be used much more. There is also a shortcut provided in the Home Itself called 'Recent Check Ins' which shows 3 of your most recent cards — so you have the information you need in a glanceable format at one scroll — the GIF to the right shows how you access it.
• The Scan QR is now no longer just to tool to view status but also tracks to inform you. Which will self clear after 14 Days — because that is the time in which Symptoms can develop according to WHO.

Adding the 'Alert Notification' 🚨

The app is a Contact Tracing app — primary purpose is to give you a notification and an alert when you have come in contact with someone who tested COVID Positive. Which I think can benefit greatly from categorizing your visits.

• At a markedly different bright EMERGENCY Red that goes away from the color scheme in order to indicate urgency.
• Tells you, thanks to the Check-in feature where you came in contact with the person.
• Gives you your status and tells you what next steps to take immediately.
• Maintains anonymity.

#3

Problem: The most important part of the app is also the most annoying. 🚧

'Your Area' was voted #1 in terms of importance!

'Your Area' is a feature that tells you how many COVID cases exist in your neighborhood for 4 different distances.

People definitely think this is useful.

In a group of 19 people between the ages of 18 to 60, 15 definitely thought so!

It's really cool, but hey, why is it annoying?

Take a look for yourselves! 👇🏾

Ugh.

• Nope, I did not add slo-mo. This is the real stuff right here.
• How many Covid cases is the FIRST thing I want to see. I do not want to wait for 20 seconds every time.
• Why does 'Trending Now' have a bigger title and more visual real estate than this which is clearly more important!?
• 3 out of the 4 statuses are in one color — which makes it really hard to differentiate unless you read each one every single time.
• If you click each option, it starts from the top again. So if you want the data for all 5 distances, you need to wait a total of 1:40 minutes! Now that may be a small number but in responsiveness that is absolutely hideous!

Solution: Enlarge, Split and Fingertips ✨

Some sketches, wireframes and iterations later,

Voila!

All the changes

• Title — much more prominent with enough spacing in the visual hierarchy.
• A large part of the text was retained because it was useful information.
• The numbers have been isolated and highlighted with size. For when somebody used to the layout sees it, he can form a co-relation between the color and the category instantly. The information provided in a glanceable format!

Wait time from 1:20 minutes to 0 seconds!

• All the information is immediately available thanks to Card format. Toggle easily between the 4 distance radii.
• Refresh button is provided at top in case you want to do it manually.
• 'Check on Recent Contacts' is a function that lets you manually scan statuses of people you've come in contact with — which before for some reason belonged in the Status card. Changed the location under Your Area because those two are more closely related. More emphasis given as a separate function, much like the Self Assess option, because that's what it is.

#4

Problem: 'Self Assessment' shouldn't be this confusing 👩‍⚕️

What is 'Self-Assessment'?

It is the part of the app that determines to a large extent your Status card and color, where they ask you questions and based on your answers, diagnose you as Safe, At Risk, etc.

It's really important because this is the data that's also going out to others in your area who use the app.

Usability testing with mom!

I gave her the self assessment test to do on the old app and didn't prompt, asked her to talk me through it, whatever she was thinking as she was doing it.

List of (major) things she asked me while doing it:

• Are these the options?
• Can I only click this once? (referring to options) (basically asking if she could select multiple)
• What should I do now? (At the end of the Assessment)

List of (major) things she asked me while doing it:

• Are these the options?
• Can I only click this once? (referring to options) (basically asking if she could select multiple)
• What should I do now? (At the end of the Assessment)

But this should be the most ultra clear, well defined, 'no room for any questions' part of the app because doing something wrong in this can literally affect so many things in your real life! Your ability to go to a movie, get on a plane, etc!

Things I noticed about her use it,

• She tried reading the the message at the very top and thought it was a question too, until she realized it wasn't at the end. This was some solid 1 or 2 seconds of confusion.
• HARD TO READ! Text was waaay too small for her and she had to really squint and bring her eyes close. Reading it and answering it felt like a cumbersome task for her by the end. Asked my dad to help her out too!

If it was hard for her to read, who has normal power, imagine how hard it would be for people above the age of 50, those most at risk — to use this feature!

• Wasn't clear at the end of the Assessment what exactly happened and what her result was. It took her 2 seconds to realize this was kind of it.
• Was very skeptical about choosing any option itself — because she didn't know if it would make it a "final entry". Took some time for it and was really 'careful' with it.
• Tapping on a previously entered "None of the Above"! For no fault of her own, she thought that was an option for the next question. Which made me really wonder..

I realized the root of these problems really lay with certain UX decisions they had taken which we'll be breaking down below this.

Like for starters…

Why on earth is this a chat!? 💣

Whew! That was extensive. Without any further ado, let's delve into the design solutions.

Solution: Chuck the chat and clean the copy 🧹

I apologize, I have a soft spot for alliterations. But I think that's the simplest way to put it!

Inspiration

I found myself coming back to the NHS COVID app of UK's and I saw their design was completely different.

What I liked about it

• Super clear — no scope for doubt as to what they mean.
• Overexplaining has been done because this is a very important function of the app.
• Designed as a form — with multiple pages. The Check boxes and the circle buttons also denote whether something is a single choice or a multiple choice.

So I stole all of it!

The Redesign

Disclaimer: I did not change any of the questions being asked in the Self-Assessment because that was probably decided by a team of health experts and have focused solely on how I can communicate those questions better.

Stuff to notice 🔍

• They're all cards! Two reasons, 1. They go along with the rest of the theme of the redesign which are all cards. 2. Makes filling the form look and feel less cumbersome if it was a series of 4 pages instead — which is what the NHS app was.
• Toggle between questions: You can now go back and forth between questions — for in case you make a mistake. The 'Finish' button is only at the end. So until you hit that, your Self-Assessment form remains a draft.
• "Select as many as apply to you": Instructional line provided underneath question because when it comes to sensitive data like this, we NEED to overexplain. This solved my mom having had to ask me too, whether she could choose multiple.
• < 1/4 > : Really really important. Shows you how many more questions lay in store for you before you complete it. I didn't say it, the 10 Heuristics for UI Design did.

#1: Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

• First message goes into the ℹ️ button I added. Why? Because it can confuse with the questions! Both of them can't have the same visual weight and emphasis because their functions are completely different. You already gave an Advisory in the form of a Pop up right before this. Why put another one in a different form? Also, those who really want to know what happens to the data will click on the ℹ️. Let's us delve right into the first question without wasting any more time!

• Appropriate Icons are also used in the design of the form. Checkboxes for multiple options, Radio buttons for single option. Gives a sense of familiarity.

But Nirmal, why is this detail important?

A poorly designed form is indicative of a lack of care and attention to detail. Something we just cannot have for a self-diagnosis function — where it must indicate thoroughness to inspire trust!

• SPACING between the options! Significantly reducing the changes of slips happening!

Final Result Card

4 things!

• Color coded to indicate what your situation is — as per Aarogya Setu Color guidelines.
• "Your infection risk is LOW" is the thing you're looking for at the end. It's the most important sentence and in the Old Design, it gets buried because it's all in the same text style and format.

Design for scanning! Users shouldn't be required to invest a majority of their time in your product. It is their to serve a particular use for them and your job is to make that use as simple, fast and efficient as possible for them!

• The "More Information" link is redesigned and given a CTA arrow button. The text surrounding it is taken away as well.
• "Ok" has been made "Home" — This really bugged me early on that "Ok" does not really give you any direction as to what to do. It was a source of confusion for my mom as well — we can really preserve that doubt for something more important by just telling them that we are going back to 'Home'. And hence the button change.

Results! 💯

She loved it!

UX Designer Emo ahead! Be warned of cheesy. 🧀

This was a really cool moment for me. Like, I know a lot of people won't understand why we obsess over the details as much as we do — but when I literally saw her do it much faster and with relative ease compared to the old one, (not to sound cheesy, but who cares!) it kind of hit me that "Damn! This is what being a Designer is all about."

She even said immediately that this was so much more easier to do and much better! And that really made my day.

I made sure to ask if it was just motherly love but she assured me it was not. 🤨

#5

Problem: Onboarding is a pain in the 🍑

I knew it's been quite a scroll until now. But this is a quick one! I promise!

Take a look at this. 👇🏾

"Harvard Business Review called, they want their Essay back! 🤦R🏽R&qo;

• Toooo many words! Don't make it sound and look like rocket science when it's really not! People get put off by too much technicality right away at the start.

"Users rarely download an app for no reason; therefore, lengthy promotional onboarding will likely be skipped." — NNGroup

• But you can't do that here cause there's no skip option!
• Lack of headings. A majority of people don't want to read everything that is written and just want to cut to the chase. It's the same everywhere — people don't have time — so it would have made much more sense just to have simple headings of what the app can do! So people can skim through easier.
• Illustrations have no relation with the content! If you wanted to keep illustrations, could have chosen better ones at the very least.
• There is text both Above and Below the Illustration! Where does your focus go to?

This makes it look like the app will expect a lot of time from you, which is never a good thing unless it's justifiable. In this case, it's not. It's a status telling app. Like a Health app on your phone — which tracks and monitors you. They are all unanimously designed with simplicity in mind.

Solution: Cut to the chase 🏃🏽‍♂️

Read a whole bunch of material on Designing onboarding — iOS Design Guidelines, Material Design, NNGroup, various Medium articles and blogs and finally figured there are two options.

Option 1: Chuck it entirely!

We don't need an onboarding! People already know what the app can do. The flow is pretty straightforward and all the copy (in my redesign at least) is clean.

Good UX follows principles of minimalism (mostly). Strip out everything that is not really a necessity.

The Govt. is doing a lot of promotion for this particular ad — saying what all it can do. The idea is, if they're on the store trying to download it — they probably know what it's about.

We could also put the preview in the Play/App Store so that they can see it before downloading.

Of course, this idea would need testing. So as a quick alternative, I've also proposed a second Option.

OR

Option 2: Glanceability

I really loved Material Design's Guidelines for Onboarding — this was one of the first things I read while looking for guidance and simply could not believe the amount of detail they went into!

So I followed it religiously.

Redesign time! 💖

Super simple, super clean

• Headings! For Users to get a fair idea of what the app lets you do, but not UI specific, doesn't shove it down your throat.
• Much better, more beautiful illustrations! That's it. That's the point.
• SKIP button! For those who already are pretty sure of themselves.
• Rewrote the copy to simplify. Kept only the relevant and most important data based on the survey I had conducted as the key points. Structured it so we don't need to burden them with information they'll figure out eventually.

It's really a question of…

Which one do you think you'll read?

Learnings

It was great to get down to UX writing — read up quite a bit and understood that it's not and shouldn't be seen as a different profile. Good UX NEEDS good writing. Both go hand in hand because at the end of the day, it's about effective communication.

Anyway, enough retrospection! Onward and about! 🚀

Now for the final act! 🧝‍♀️

#6

Cleaning up 'Home' 🧹

The hierarchy of the old design is all over the place. We're going to clean it up based on how Important each of those things are.

Like for starters,

6.a. Removing 'Trending Now' from Home

In the old design,

Guess who was sandwiched between these two really important sections. 👇🏾

Why are Trending videos on a COVID-19 Contact Tracing app? 🤦🏽

Visible immediately! Right on the home page, without any scrolling either.

• This is a collection of Video PSA's made by the Govt. — some featuring famous people like Ajay Devgn, etc.
• They are a few videos taken from 'Media', which is on the Top Nav.

My first instinct was that this entire thing should go! But then…

A majority of my respondents said 'Yes' and 'Sometimes' when asked whether they watch the videos in Media! Very surprising to me, but this is when I realized You are not your Users.

So what do we do? Well, the solution I think lay in another data point.

👇🏾

'Media' was rated as slightly more important than Trending Videos. Both fulfil the same function.

Recommendation

• Leave 'Trending Now' as the top part in 'Media'.
• Remove 'Trending Now' from the Homescreen and replace with 'Recent Check In' because it's definitely more important.
• 'Media's UX is fine — only changes needed are thumbnail redesigns and updating it to match my new UI style guide — so have left it as it is.

A classic case of Instinct versus Reality!

Onto the next mystery Hastings!

6.b. Addressing Privacy Concerns

The app is super controversial.

Getting spicy innit? 🌶️

Well, for starters, I'm not going to pretend to know the inner workings of the app, but after reading most of these articles, I kinda trust the Government here that they've fixed the Privacy Breaches and what not.

Anyway, what is important is that they claim the data is safe now. Great! Woohoo!

But this is how they've chosen to communicate it. 👇🏾

'Privacy FAQs' don't re-assure.

• Firstly it's called Privacy FAQ — which itself sounds like 'Terms and Conditions' which hardly any laymen read.
• No sense of re-assurance! It doesn't tell you "Hey, you know what? It's okay to use this."
• This is clearly a response to the Critics of the app but this is a poor way to communicate this to normal folks — like those in my survey.
• There's too much to look at in one glance.
• The color scheme is markedly different from rest of the app.
• Color scheme has Red — which is used to show High alert — emergency data.
• There already exists a link to 'App FAQs' before this too. 👇🏾

Solution: Copy that speaks to humans

During my Copywriting Internship at Dentsu, I learnt the importance of words. Of how often the most simplest sentence can make all the difference in the world. People spend weeks trying to arrive at the 'right way to put something'.

Hence I've designed a card that says..

I think this really communicates what people want to hear. Tells normal people that it's okay to use the app — and that our data is safe.

Of course, basing this entirely on the fact that there is truth in what the Government has been saying. I think this is a much better way to communicate the idea of security. But anyway, moving on!

The Room of Requirements

It's this room in Harry Potter which appears in Hogwarts when a person is in great need of it.

I've clubbed this along with other cards under 'Useful Resources' — which I imagine to be the place where people come to when they're particularly looking for something. Something exactly like the Room of Requirement.

Hence the headings underneath

• Nearby Covid Testing Centres.
• Nearby Hospitals.
• Privacy FAQ.
• Donation link for PMCares fund.

Dobby: "Sometimes it is there, and sometimes it is not, but when it appears, it is always equipped for the seeker's needs."

They're all links to other parts of the app or Browser links that I felt were pretty well designed and didn't require significant changes except adapt it to my UI. So I left it as it is.

And just like that,

We're done! 🥳

Thanks for scrolling! It's been quite a long read, but I hope I made it glanceable enough for you to understand what's going on even if you didn't read majority of the text.

Key takeaways and note to self

• There is no such thing as 'just UX': Copywriting, UI design and animations are equally important in crafting the final experience.
• Don't redesign the entire app: Whole teams work on this for months! It takes a factory to make a fully functioning car. I tried early on, but fell quickly into a huge time consuming vortex. It made it more streamlined and sensible to put the spotlight on problem solving.
• Coming from a multidisciplinary background helped: I was able to find solutions to certain things in concepts I learned in architecture school, storytelling while writing this case study from writing and performing in plays and films.

I have two requests for you guys!

1. FEEDBACK! If you think I've made some glaring mistakes or if there are better alternatives, I would love for you to reach out to me at nirmal.briju@gmail.com or through any of my social media channels! Would love to chat about it and get to learn from the best.
2. If you know anybody who works with the official 'Aarogya Setu' team, I would love to get their contact so that I can send this over to them. (If you send it over too, I would be super grateful). I genuinely believe this app is going to be a necessity for the next 2 years and would love to discuss my ideas with them.

Phew, that was intense.

Here's a video of me doing a rap about a cockroach to cool down. 🥴

Get in touch!

LinkedIn | Instagram | Behance

Email me at nirmal.briju@gmail.com

Check out my full portfolio at thisguycan.design