mAadhaar: Mobile App Redesign — UX/UI Case Study
In this case study, I’ll walk you through the design choices I made while revamping the mAadhaar mobile app for a more user-friendly experience.
What is mAadhaar?
The mAadhaar App, developed by the Unique Identification Authority of India (UIDAI), is your virtual Aadhaar card on your smartphone. It allows you to access and manage your Aadhaar information and utilize various services conveniently from anywhere, anytime.
Why did I choose mAadhaar?
I wanted to address a real issue through my design. While the Google UX Certification Program offered a list of project prompts, none of them resonated with me. They were mainly about creating a food delivery app or other common projects that many people had already worked on or already existed.
I was at home when I noticed my father struggling with the mAadhaar app, which inspired me to start this project.
My goal was to make this app user-friendly and more accessible. To ensure the effectiveness of my design, I researched both the App Store and Google Play Store, as well as other online sources like Reddit, to understand what users truly want and how they prefer it to work.
Behind the scenes
Typically, designers begin by talking to users, but since I’m at the early stage of my career with limited resources, I started by analyzing user reviews. While the Google UX Program suggested simulating interviews for initial projects, I chose not to go that route to avoid potential design misunderstandings.
After reviewing user comments on my own, I conducted research by observing and collecting data through various means. I also utilized AI to assist with time-consuming tasks. The data was gathered from:
- Google Play Store: Analyzing more than 5,000 recent reviews.
- App Store: Scrutinizing over 5,000 latest reviews.
- Verified Online Forums: Investigating more than 1,000 discussions from platforms like Quora and Reddit.
Synthesizing all this information, I created three personas to better understand user goals and pain points. This guided the subsequent steps in the project.
After creating the three personas, I developed user stories for each of them. These user stories helped me outline the specific needs, preferences, and experiences of each persona in more detail.
Subsequently, I crafted user journey maps for each persona to gain a comprehensive understanding of their interactions with the product or service throughout their entire experience. These journey maps allowed me to visualize the various touchpoints and identify potential pain points or areas for improvement in the user experience.
The combination of user stories and journey maps provided valuable insights to inform the next steps in the design process and that is the problem statement, while similar to user stories, problem statements provide a more in-depth perspective from the designer’s point of view.
Here’s one of my persona’s problem statement:
A rural homemaker, who needs an easy-to-use multilingual Aadhaar app that enables effortless updates for her and her family’s profiles because she is not a tech-savvy and eliminating the need for costly and inconvenient enrollment center visits.
After understanding the problem statements I begin to the next steps.
I selected the old information architecture (sitemaps) for the app. I aimed to identify any issues with the current sitemaps. During this process, I discovered:
- The same features/pages were found in multiple locations
- Difficulty for users to navigate.
- Presence of redundant or unnecessary features.
- Low discoverability of the reset password option.
- Challenges in navigating update status and other status-related features.
- Unstructured information.
- Difficulty in finding the online eKYC section.
- Lack of clarity on what is housed in the “more” tab.
- The absence of the “Add profile” option in the settings.
In the updated sitemap below, I have addressed various issues by eliminating duplicates, improving information organization, and incorporating more useful features. I have adhered to fundamental principles of Information Architecture to ensure a user-friendly experience:
- Object Principle: View content as “living” and changing over time.
- Choice Principle: Provide fewer well-organized choices rather than overwhelming options.
- Disclosure Principle: Avoid unexpected or unnecessary information.
- Exemplar Principle: Group concepts and categorize information.
- Focused Navigation Principle: Design navigation menus with a clear strategy and logic.
- Growth Principle: Consider that the amount of content will grow over time.
By following these principles, the updated sitemap aims to create an intuitive and efficient user experience, promoting ease of navigation and understanding.
After this, I created user flows for each persona, and I moved on to storyboarding.
Before that, I crafted goal statements for each persona to enhance the quality of my storyboards. I developed two close-up storyboards and one big picture.
For simplicity, I will present the big-picture storyboard, focusing on just one persona.
Moving on to the design phase
I created many wireframes for each screen by following the Google UX Certificate approach. They suggest coming up with five different ideas for each screen. Then, I combined the best elements from five wireframes into the sixth one, creating Version 1 for one screen.
This method helped me explore various design options before settling on a final.
Following the initial wireframing, I transitioned to digital wireframes using Figma and developed low-fidelity prototypes.
After this stage, I started crafting components, and icons, selecting colors, and defining typography for the app.
During the low-fidelity design phase, I noticed certain components that could be reused across the app. Recognizing this, I decided to establish a small design system to ensure consistency and efficiency in the overall design.
I proceeded to create the high-fidelity prototype for the app, also known as the actual design.
Beginning with the home screen
I opted to showcase the Aadhaar card with two options: downloading and flipping the card. I designated the “flip the card” button as the primary action since users are more likely to use this feature.
Following that, I introduced the “Manage Aadhaar” section where options are dynamically displayed based on user interaction, possibly leveraging machine learning for better personalization. Users can access all settings from this section.
Additionally, I included a segment where users can view their connected bank accounts with the Aadhaar card.
To align with the existing business model, I retained a section for downloading the PVC card, as the original app also provides this feature.
Lastly, I created a dedicated section for e-KYC, consolidating features like generating a virtual ID, viewing authentication history, and downloading offline e-KYC. This grouping was done to enhance user navigation, as these features are commonly associated with e-KYC.
The e-KYC generation process is kept simple: a QR code is generated for users who want to share their KYC information with others. This feature aims to be straightforward and user-friendly.
In the old app, checking authentication history wasn’t the most user-friendly; users had to input dates to view their history. To improve this, I opted for a simpler approach.
The authentication history is presented in a format similar to an email list, offering users an uncomplicated view. Users can modify the order (filter), download the history if necessary, and perform searches based on name, type of authentication, and date.
This design aims to enhance user experience and make the authentication history more accessible and user-friendly.
Updating Aadhaar
Moving on to a critical aspect of the app — the information update feature. Currently, the app offers paid updates, a model I maintained due to the existing business structure. However, I introduced a change: users are given one free update before encountering charges. This way, users are informed upfront about what is free and what is paid.
To streamline the update process, I included an “Update Status and History” link in the updates tab, providing a centralized location for this information. This was an improvement from the old app where information was scattered across different sections.
Certain updates, such as changing a photo or date of birth that require biometric verification, necessitate a visit to an enrollment center for security purposes. I added a link/button directing users to find the nearest enrollment center.
To simplify the user experience, I made input fields for form elements clear and easy to understand. For example, fields like “new address” require only a few inputs, including one verification document and an OTP for verification.
I aimed to address the frustration observed in the old app’s user flow, where users had to repeatedly enter Aadhaar details and OTPs for various actions.
Settings — Previously called more
For the settings page, I opted for a complete departure from the old app. In the old mAadhaar app, there was a tab called “More,” but I didn’t find anything interesting in more, profitable, or user-focused. Therefore, I redesigned it as a dedicated settings page. I included essential elements that a settings section should have but were lacking in the old app.
The new settings page includes features such as:
- Account Switching: Allowing users to easily switch or add between different accounts.
- General and Security Settings: Featuring options like passcode, notification preferences, language selection, and two-factor authentication.
- Visual Preferences: Including options for dark mode, changing font size, and other visual customization features.
- Customer Support: Providing easy access to customer support for user assistance.
- Feature Requests: Allowing users to request new features, enhances user engagement.
- Legal Information: Including sections for terms and conditions, privacy policy
- Logout: logout functionality — features that were not present in the old app.
This revamped settings page aims to enhance user experience and provide a more comprehensive and user-friendly approach compared to the previous “More” tab in the old app.
Onboarding
In revamping the onboarding experience, I departed from the old app’s cumbersome process where users had to input their phone number, verify it, then input their Aadhaar number and verify it, and finally set a login password. Instead, I designed a more straightforward login and onboarding model. Users are now only required to type their Aadhaar number, verify it, and set up a phone or custom lock for the login password.
As for the onboarding details, I shifted away from the old app’s approach, which included references to features like “dashboard services,” which might not be meaningful to users. Instead, I crafted a simpler onboarding experience communicating what the app can do for users. This aims to provide users with a more straightforward and relevant introduction to the app’s functionalities during the onboarding process.
Testing — Usability Testing
After completing the design phase, I planned a usability testing session with users conducted remotely. I opted for an unmoderated usability study, where participants independently navigated through instructions, tasks, and questions without a moderator.
The participants included 2 males and 1 female, aged between 20 and 35, and were existing users of the old app. As an incentive, I offered them a free PVC Aadhaar card.
Following the usability study, I carefully reviewed the recordings and took notes using spreadsheets, a methodology similar to the Google Certificate program instructions.
I then transformed these notes into affinity diagrams, essentially a list of sticky notes. I then found similarities in sticky notes data and clustered them into 5 groups.
- Greens: Onboarding and User Engagement
- Blues: Navigation and User Interface
- Yellows: Transaction and Banking Features
- Greys: Security and Authentication
- Purples: Information Presentation and Notification
Upon identifying patterns and problems from user feedback, I redesigned a few screens to address these concerns. The first issue highlighted was user confusion around the “change passcode” field. To enhance clarity, I revised the terminology to “Login passcode” for better understanding.
Additionally, it was noted that users were unclear about the two-factor authentication process. Previously, it was simply presented as a switch button. In response to user feedback, I modified the design to prompt users for verification before enabling two-factor authentication, enhancing the security and understanding of this feature.
In response to what users wanted, I added a new feature to the Aadhaar Enabled Payment System (AEPS). Users wanted to see a history of their transactions, especially those made through AEPS. So, I created a special section where users can check the transaction history for all their connected bank accounts. If they want to see the history of a particular bank, they can filter the list.
Some users also asked for the ability to add or remove bank accounts. However, because I’m concerned about possible security issues, I decided to wait before adding this feature. I want to make sure it’s safe before introducing it in the future.
Users also expressed a desire to easily check the current update status without navigating to the Update tab. To address this, I added a small notification or message bar at the top of the app’s homepage. This feature will allow users to quickly see the current update status, and if they click on it, they can view more detailed information about the update.
New feature💫
31/01/2024
I have added a new feature that will allow users to link their devices, making it possible for them to instantly log in to other devices, such as the web. The reason for adding this feature is to make it fully cross-platform.
Link to Prototype →
That’s a wrap, I hope you guys found it useful and informative.
Thank you for reading! If you have any suggestions or feedback, please feel free to reach out to me at the following details:
Email: azlibdar@gmail.com / azlibdar@icloud.com
Let’s connect on LinkedIn
