NIMC Web App
UI Design
About NIMC.
NIMC (National Identity Management Commission) is the body responsible for the registration and management of Nigerian Identities, they oversee the registration of every Nigerian citizen as well as issuing of Identity cards to every registered citizen of the country. Since it's inseption it has register over 60M Nigerians and counting.
Validating the problem
NIMC Web App is a project that aims at moving the current desktop application into a seamlessly fast, modern and reliable platform, thereby enhancing the usability and bringing in more operators into the application to ensure the ease of registration of users both in Nigeria and diaspora.
About Project
To register more Nigerians: The first goal of the project is to build an easy-to-use app that can enhance the registration of more Nigerian citizens thereby moving away from the old and slow desktop app.
To create more job opportunities: By introducing the NIMC web Application, there will be an increase in the accessibility of the app which will give rise to the number of operators thereby creating job opportunities.
Increase Accessability: To make the app readily assessable both in urban and rural areas especially remote areas where there are no much stable network services.
Easily meet Nigerians NIN needs: To create a product for people to easily Enroll, Renew/Replace, Modify, and control death reports through their identities.
Market Research - Plan
Before opening any design tool, We reached out to the current operators who are tasked with enrolling people on a day to day basis to find out some of their pain points, needs and frustrations using the current desktop app.
Some Question I Asked
- 01 - How many Nigerians are you able to register in a day?
- 02 - What process do they take in registering your users?
- 03 - How often do they register users who are in remote areas?
- 04 - How long does it to to register a user and get a print out?
User Personas
I love my job and I wish I can have a more seamless application that can help me move from registering just 10 people daily into 50-100 people or more - Janet Ayomide
The Old Designs
Asides from the app looking old, it also lacked some usability features, as a team we where able to spot those out through user research and usability testing which was conducted in the earlier process of the design phase, we noticed some the following:
- 01 - There was misuse of space for the wizards, hence lesser space for activities.
- 02 - Inability to tell between a button and an input field.
- 03 - Instructions not well placed and could be easily ignored.
- 04 - Text on dark background and not readable.
New Design Approach:
The result of our first design approach translates into a minimalistic views that solves the usability issues of the past design. We’ve solved these by:
Identify the faults in the current application: For us to design a usable product we had to know what the current app looks like and how it performs, that way we can know what to inprove on and how to inprove them.
Ensure it is responsive for all devices: Since we are converting to the web, we know most of our users will be using smaller devices like phones and tablets so we designed with reponsiveness in mind
Ensure it works in remote areas: We had to consider a wide range of users in the remote areas where there are no good network connections by building in PWA features so that the users can opprate the app offline.
HTML Code Snippet
As an advocate for bootstrap 5, I was able to write some HTML, CSS and Bootstrap artifacts for the entire pages with linked "hrefs" for final testing with the users to see if it matches their needs and work on any concerns they may have using the product.
The Final Design (Making Enrollment Easier and Faster)
We brought to life a new Enrollment dashboard that delights the user by its functionality ease and minimalistic look. We remove friction from the Enrollment feature to allow users to perform their activities faster. Below is a nimc flow of how NIMC official can easily enroll a user