Case Study / Feb10, 2022
2 mins read

The case of deploying “inefficient” UX to make a better product

case-study
Client

UIDAI – Aadhaar

Industry

Government & Non-Profits

Deliverables

UX | UI | Information Architecture | User Research

The Challenge

Aadhaar project by Indian Government operates on a massive scale. Unique Identification Authority of India (UIDAI), which handles this project, under the Ministry of Electronics and Information Technology (MeitY) has issued more than 120 crore Aadhaar numbers to the residents of India till date. For context, Aadhaar number in India is somewhat similar to the Social Security Number in the US. One account which can link to everything else — bank accounts, subsidies, mobile SIMs, academic records and the list goes on. Just to get your head around the mammoth task undertaken by the Indian government, below are a few mind-boggling stats.
1.23 + Lakh
Enrolment

Aadhaar generated

2.55 + Lakh
Updated

Aadhaar updated

2.66 + Lakh
Authentication

Aadhaar done

6.95 + Lakh
eKYC Done

Vericfication done

Source: Aadhaar Dashboard — 22 Jan 2018

With the Digital India push of the government and increasing penetration of internet and smartphones, UIDAI realized that their website needed to be responsive, and render itself well on mobile devices.

aadhar-website-mobile-version
Mobile version of earlier Aadhaar Website

With the Digital India push of the government and increasing penetration of internet and smartphones, UIDAI realized that their website needed to be responsive, and render itself well on mobile devices.

When we met UIDAI, that was our brief. We at Monsoonfish, handled everything about user experience and design, while our friends at Tekdi Technologies took care of development.

Mobile version of earlier Aadhaar Website

Getting to the root

We took a step back, and tried to get to the root of the website’s functionality. The process we followed for this was –
Image
We ran discovery workshops — interviewed internal teams at UIDAI, the end-users and did secondary research on how similar websites around the world were working out. Our entire team took to the user research, interviewing everyone from rickshaw-wallahs to cigarette sellers, to vendors and internet-savvy users on why and how they use the Aadhaar website. We reviewed the information architecture, perceived values of information and the flows, languages, accessibility and responsiveness of the website. We also analysed all the available data, including traffic, most accessed pages, CRM data as well as social media streams and support requests.

So, what did we find?

findings

Based on internal interviews

Calls received are generally around making updates, new features & grievances at centers

45%

Related to updates in Aadhar

30%

Service related

findings – page hits & usage

Based on access log review

Frequently accessed content on the website weekly includes

4.5 lac

FAQs

1.5 lac

Update related

1 lac

Your Aadhar, help

42%

Usage on android devices

This intensive exercise led us to some key insights, and formed the basis of the project. Aadhaar of Aadhaar, if you will.

Maximum share of users came to access FAQs and Aadhaar update related information. Most of the support calls to the CRM team were around updates and Aadhaar related services as well.

Design innovation is a combined result of desirability, viability and feasibility.
– Siddharth Kabra

Aadhaar had already managed a vast adoption across the nation, the next bunch of users were residents looking to make updates, or young parents, wanting to create cards for their children

Across the income scale, on the lower side the Aadhaar represented utility value. These residents feared making updates, and there was a general sense of misinformation. On the higher side, residents questioned Aadhaar, its use and security around it

The website was mostly accessed on Android devices

Another key insight which influenced our visual design approach and even the type of font we chose

Relevant user information was hidden deep in the website
Duplication of content — same thing was said in different words

FAQs section of the earlier website and one of the sub-portals — Aadhaar Kiosk, with a different look and containing the most relevant info the users came to Aadhar website for!

We also bucketed the stakeholders, i.e. the audience profiles of visitors: Residents with Aadhaar — bulk of our audience; Residents without Aadhaar; Authentication Partners; Enrolment Partners; Govt. Employees; UIDAI Internally

image 38image 39
We also bucketed the stakeholders, i.e. the audience profiles of visitors: Residents with Aadhaar — bulk of our audience; Residents without Aadhaar; Authentication Partners; Enrolment Partners; Govt. Employees; UIDAI Internally

We also bucketed the stakeholders, i.e. the audience profiles of visitors: Residents with Aadhaar — bulk of our audience; Residents without Aadhaar; Authentication Partners; Enrolment Partners; Govt. Employees; UIDAI Internally

image 40
Residents, with and without Aadhaar formed the biggest audience
ImageImage
Residents, with and without Aadhaar formed the biggest audience

What would success look like?

We realized that this was not simply a rendering issue. The major share of audience — Residents with Aadhaar and Residents without Aadhaar, needed to be catered to in a much more seamless manner.

Aadhaar website is not a daily use product — it is a utility. People come to the website to get their query resolved/work done and leave the website. We needed to treat every user as a first-time user, and every use-case as the first use-case.

This led us to the most important consideration for the route that we would take for this design. Efficiency, in the traditional sense is to get user from A to B as fast as possible. The audience of Aadhar that we prioritized, were residents who came to create or update their Aadhar cards. The current website had all links and information in bulk, and finding your particular query was like looking for a needle in a haystack. This led to users being frustrated and leaving the website, which not only put an additional toll on the tertiary infrastructure like Aadhar support centres, but hampered reputation of the Aadhaar system. So while the existing design was ‘efficient’ literally, (all links in one page, so technically just two steps to get the users to info they needed) it did not make much sense for the website.

brainstorming session
image 44
image 45
Multiple iterations and brainstorming sessions helped us come to concrete ideas

We prioritized only two sets of information — Aadhar services and updates. Since bulk of the users came for this, it made sense to show right information at the right time — to the right users. Updates and other services formed the backbone of most activity done on the website — and was the cornerstone of our information architecture. We changed the definition of efficiency for this project, in a bid to make it more relevant and useful for our desired sets of audience.

What would success look like?

We realized that this was not simply a rendering issue. The major share of audience — Residents with Aadhaar and Residents without Aadhaar, needed to be catered to in a much more seamless manner.

Aadhaar website is not a daily use product — it is a utility. People come to the website to get their query resolved/work done and leave the website. We needed to treat every user as a first-time user, and every use-case as the first use-case.

This led us to the most important consideration for the route that we would take for this design. Efficiency, in the traditional sense is to get user from A to B as fast as possible. The audience of Aadhar that we prioritized, were residents who came to create or update their Aadhar cards. The current website had all links and information in bulk, and finding your particular query was like looking for a needle in a haystack. This led to users being frustrated and leaving the website, which not only put an additional toll on the tertiary infrastructure like Aadhar support centres, but hampered reputation of the Aadhaar system. So while the existing design was ‘efficient’ literally, (all links in one page, so technically just two steps to get the users to info they needed) it did not make much sense for the website.

We prioritized only two sets of information — Aadhar services and updates. Since bulk of the users came for this, it made sense to show right information at the right time — to the right users. Updates and other services formed the backbone of most activity done on the website — and was the cornerstone of our information architecture. We changed the definition of efficiency for this project, in a bid to make it more relevant and useful for our desired sets of audience.

brainstorming session
image 44
image 45
Multiple iterations and brainstorming sessions helped us come to concrete ideas

To make the process for residents smoother, we kept two goals in our mind:

Residents got access to the right information at the right time: Bulk of our users were on their mobiles looking for Aadhaar update related information. This, today, required them to look deep in the website. If this could be brought up front and made easily accessible users would see value.
Residents got access to the information in the right context: Most of our users accessed the site from their mobile devices, if the site rendered well of their device of use, they would get access to the information they needed.For this, we needed to resolve the challenges of deep-buried information, lack of contextual FAQs, too many sub-portals and duplication that confused users. We needed to channel the information dump into an information flow.
This ambitious project of Aadhaar operated at a huge scale as we have already seen, so we had to make a few important considerations all along:
Accessibility This was one of the most important factors. Since Aadhaar was for anyone and everyone, we needed to especially take care of the website tiding over the hurdles to ability. From alt text to colour contrasts — we needed to make sure the website was accessible to all.
By now, the project had ballooned from its original brief. A complete design overhaul, a formidable design system, redesigned information architecture. What had not changed, however, was the timeline! We had three months to design and develop the website, and an additional month of testing.
Language support: Aadhaar website rendered in English and 12 other Indian languages. The redesign would have to work well not just on all devices, but also in all languages. (Eg. Arabic is written and read from right to left!)

The Path to Success: Pillars of design

Translating the above prose into simple objectives, we started off with the following in mind:

Reduce time taken to access key information

Ensure existing information is brought up at the right time

Ensure smooth performance across all devices and for everyone

Information Architecture

The first step was in getting the information in right order. Aadhaar website had everything the user wanted — our job was to make it readily available without having to hunt for it. We restructured the information keeping in mind mainly residents and then internal audience.

How this unfolded in the structure was by bringing updates and services related information upfront, followed by partner information & then media, news and downloads. The most important information from each section built the home page.

image 48 (1)
This was the structure we arrived at, after multiple interactions and validating with out internal stakeholders
image 47 (1)
UX Strategy
Taking care of our objectives and considerations, we devised the following UX strategy:
A unified Aadhaar portal though these existed as varied portals, we wished to unify them in user’s eyes, giving them access to one, unified Aadhaar website
Accessible Since our audience was so vast we took accessibility as the highest priority
Content relevance Based on user journeys, the site was restructured to show only the most relevant, and timely information
Device relevance Designed to suit any screen size, anywhere
Localised Available and ready to any Indian, in her language of choice

Wireframes were iterated on and reviewed, while we worked in parallel on style options for the website. We put up low fidelity mockups for different workflows on how the experience will look and feel on a mobile device.

4
Image
Image

We also designed additional pages for the website. Rather than having simple links, we created link cards — which could give the users a preview of where they are headed.

image 76

To make sure that we were making an accessible design, we went through these steps:

  • Extensive review of GIGW manual
  • Checks in UX wireframes for size of information chunks
  • Sentence lengths, and content simplification
  • Maintaining basic contrast ratio in design
  • Use of understandable iconography
  • A custom set of guidelines for design and QA just for accessibility
  • Use of automated testing for design and developed versions

Visual Design

The next step for us was to design the website. As the government’s flagship project, and Aadhaar being something that holds unique value and unlocks doors to different opportunities, the site needed to feel trustworthy and ooze authority. A user who lands on UIDAI.gov.in should rest assured that the website will have what he needs. We developed 3 design solutions, all communicating this. Collaborating with stakeholders, we finalized the below design.

image 57
Designing portals that looked seamless to the Aadhaar website

Design Creates Experiences that Facilitate Product Goals.

With more than 20 years in the UI/UX sphere, we craft experiences that match user expectations, thus enabling brands to achieve their business vision.

20 +

Years in Design

200 +

Satisfied Clients

500 +

Successful Projects

40 +

Designers On-board

Take a Look at Our Journal

September 26, 2022
Image

Fintech is an exemplary amalgamation of finance and cutting-edge technology, which is pioneering digital disruption solutions across the globe.

September 20, 2022
Image

Healthcare design trends have pivoted around new technologies and solutions for healthcare professionals as well as the patients. Read the article to know more.

April 7, 2022
Image

We define dark mode as a mood notion other than something more profound, let us understand what is dark theme and why is dark UI still trending.

There’s a Lot Happening Behind the Scenes in Our Lab!

An attempt for Netflix’s UI/UX redesign to offer features that can enhance usability, accessibility and make the experience more user-friendly for the viewers.

Image