UI/UX Case Study

NIMC Web App




7 Weeks


UX Research, UX Design/Analysis, UI Designs, Wireframing, Frontend Development, Usability Testing

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.

About Project

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.

Project Goals

1. 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.

2. 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.

3. 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.

4. Easily meet Nigerians NIN needs:
To create a product for people to easily Enroll, Renew/Replace, Modify, and control death reports through their identities.

Research Plan

What I did:
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 Questions I Asked

  • 1. How many Nigerians are you able to register in a day
  • 2. What process do they take in registering your users
  • 3. How often do they register users who are in remote areas
  • 4. How long does it to to register a user and get a print out

"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, Interviewee

User Persona

What I did:
After summing up the User Interviews, We created a User Persona to help analize our customers in a more detailed view. with this, we could understand the main focus' behaviors, act and needs.

Current design

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:

1. There was misuse of space for the wizards, hence lesser space for activities.

2. Inability to tell between a button and an input field.

3. Instructions not well placed and could be easily ignored.

4. text on dark background and not readable

The approach for a new design

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:

1. 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..

2. 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

3. 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: