Designing the e-ID Card Management and Distribution Portal for IIT Roorkee

Distributing and managing the physical ID cards of more than 8000 students was a hassle for the Dean of Students' Welfare. Hence we developed this in-house tool digitalize ID cards, distribute them, and manage and resolve queries if any.

Client:

DoSW, IIT Roorkee

Timeline:

December 2021 - February 2022

Team:

2 designers, 1 manager

Overview

 

The goal

Digitalising the students' ID card, and building a distribution, renewal, and query management portal for IIT Roorkee.

 

 

Results

‍10k+

e-ID cards distributed till date

~100%

Query resolution rate

90% less time

Required to resolve a query

Process

 

Why digitise my ID card?

IIT Roorkee, up until 2021, issued physical ID cards for all their students and staff. Although they were convenient in the conventional sense, they presented their own set of problems:

  • Poor durability: Students collected their (paper) ID card at the time of their registration, and kept the same for their entire course.
  • Low credibility: Although issued by a government facility, it had no watermark, seal, or any other indication that the given specimen is real and not a fake. A fake ID card could easily be made by printing out the form on a normal sheet of paper.
  • Incorrect data: The data on the ID card was filled out by hand by the admins. If something was misspelt or some data had to be changed, the student had to go through a long and tedious process.
  • Re-issuing the ID card: Doctorate students had to renew their ID card after every year, since their tenure was not fixed.
  • Losing your ID card: If your ID card was lost, the process to get a new one issued was long, extremely tedious, and involved going to the police as well (we will get into this later).

Who took care of these queries?

The Dean of Students' Welfare (DoSW) attended to these queries. The process was as follows:

  1. The DoSW receives 50–100 mails each day, only some of which are concerned with the ID card.
  2. There was no method to collect these queries in one place. Mails had varying subjects with no emerging pattern, and the requests varied significantly.
  3. Solving queries had no specific process some required going to the department head, some required mails to another dean, while some required changing info on the academics portal.
  4. The DoSW mailed the concerned admins, while keeping the student in the loop.
  5. Keeping track of the resolved and unresolved queries was difficult.
  6. The student had to repeatedly reply to the mail, exchanging information and progress with the busy staff.

On top of all this, keeping track of the queries was extremely difficult due to a lack of system and procedure.

Was it really that difficult?

Actually, no. To understand the process, we had to first understand what different types of queries were.

1. Data correction

This was the most common type. Students wanted their addresses, phone numbers and emergency contacts changed. The process was simple:

But students did not know about this process, hence a few extra steps were added:

This added tediousness and delay in the process, not to mention the frustration on the admin's side.

2. Renewal

ID cards for doctoral candidates were issued only for a year, and had to be renewed every subsequent year that they wanted to continue their research. Simiar to the previous case, there were differences in the ideal and actual flow:

3. Lost ID card

Similarly, the process was unnecessarily tedious for the last case, a lost ID card:

Each additional step added a few days to the entire process, with the end-to-end flow often taking more than 2 weeks. Hence, optimising the flow was our first priority.

Talking to the stakeholders

We interviewed the people on the admin side of this process, and this is what they told us:

  • Both the professors felt that managing the queries on mail was a tedious task and there should be a better method way of management.
  • Another problem that they faced is that the students barged right into the office with their queries. Students don’t even know the basics of resolving common queries.
  • Sending multiple requests about the same mistake was another hurdle. The queries become redundant and replying to them is a hassle.

At this point, we laid down our two main problems to solve:

  1. Digitise the process of distributing the ID card.
  2. Digitise the query raising and resolution process.

Time to Develop Solutions

Having collected enough resources and data, we started developing multiple solutions for the same.

The ID Card

The ID card needed a revamp for efficient online usage. It had to be clear, consistent, legible and should display only the necessary information.

Apart from the standard info —

  • The ID card had to be non-duplicable.
  • One should be able to scan the ID card easily.

To tackle both of the factors, a QR code was introduced in the ID card. It served as an extra layer of authentication.

Some of the iterations created for the ID card are shown.

Viewing ID Card — Student Side

The student side portal had to take care of —

  • Viewing and downloading ID card
  • Raising queries
  • Knowing about the standard correction procedures of common queries
  • Managing and knowing the status of queries

Some iterations of the same screen are shown below —

Changes were introduced in our feedback sessions with the DoSW. He asked us to give the information about the usage of the e-ID card and the option to directly print the card.

We tried to give an option for the student to edit their details here itself. But this was later deemed not possible as discussed later in the article.

Raising a query — Student Side

This feature was already present widely in almost all websites and services. Thus, we had a load of resources to take inspiration from.

The query types that we thought could be there were —

  • Misspelt information.
  • Misprinted colours/alignment.
  • ID card not received.
  • Extension of validity.

In our exploration, we were thinking of giving a feature to directly message the DoSW. In our feedback session, it was revealed that this was not a good idea.

This was due to several reasons —

  • Students could use informal language with the professor.
  • Most conversations only last up to 2 messages on mail.
  • The messaging feature would spam the DoSW’s inbox with redundant reminders from students.
  • It would bring a lot of load and server costs to the tech team.

After several discussions, the chat feature was discarded, but we decided to give the student an option to explain their query in a description box.

Also, it was decided that in case the DoSW wants to reject a query, they should also explain the reason for rejection.

Hence, a single message chat system was incorporated into the product.

Query Management and Review — DoSW Side

This part of the solution involved regular feedback and interviews since we were not familiar with the management techniques used by the DoSW.

We took inspiration from the already existing certification portal and referred to its design system.

Snapshots of the Certification Portal

The certification portal consisted of —

  • List of students to whom the aforementioned certificate would be issued.
  • Option to accept or reject a list.
  • On reject, send a message describing why it was rejected.
  • View the details of students, and the certificates they would be getting.

On the e-ID management portal, we had to show—

  • The information of the student who raised the query.
  • Option to reissue or reject the query.
  • Giving the reason to reject.
  • This would be replaced by the reason they need a new ID card/ the misinformation in the card in the e-ID card portal.

The Authority Dilemma

In one of our discussions, the developer team explained to us the procedure to display the e-ID card —

  • Create a copy of all the information of students from the academics portal.
  • Create a template of the ID card using HTML and CSS.
  • Feed information from the backend to the ID card for each student.

They explained that they need not add the DoSW in the circle of issue and re-issue, since the ID card is generated dynamically. Hence, any information updated on the acad portal would be directly reflected in the ID card.

But the DoSW countered the proposition, saying that we are stripping the DoSW from their ability to control the flow of ID cards.

The DoSW demanded that the supreme authority of granting the ID card remain with him, and not be shifted to the frontend.

To maintain this balance of power we added a trigger in the portal — the information from the acad portal will only be refreshed once the DoSW agrees to reissue the ID card. Moreover, the ID card will only be reissued if the query on our portal and the changed information on the acad portal are identical.

Final solution

 

Ready to Deliver

The ID Card

In the end, the ID card was decided to have 2 sides, since it was not feasible to put all the information in a legible format on a single side.

The colours were chosen to go with the institute’s website and branding. A clearer version of the logo than the previous ID card was placed on the top to add to the authenticity and pride of the institute.

The design overall was liked by all as it was legible, easily scannable, and clean.

Viewing the e-ID card — Student Side

The e-ID card was given a separate row in the certificates table of the already existing certification portal.

On clicking ‘view’, the ID card, instructions about its usage, and a list of raised queries were given, with the option to raise another.

Raising a Query — Student Side

The finalized flow for raising a query is as follows:

There are 3 pre-defined query types. The data entered in each of the query types varies—

  • Incorrect data — description, incorrect data field, original value (auto-filled), corrected value.
  • Technical or design side error — description, e-ID card photo (auto-sent) file (optional).
  • Other queries not covered by the above 3 types — description, file (optional).

A feature of the form is that one can mark their query as important. On doing so, the query is shown at the top of DoSW’s portal. An exclamation mark denotes the same. This is to take care of instances where a person urgently needs their ID card.

In addition to the form, the standard procedure for correcting the query is given as an overlay when a query type is selected.

Managing Queries — Student Side

After raising a query, one has the option to know the status of their queries. This is shown where a person’s queries are present.

A query entry shows the type of query, the date it was raised, the description, and the status. In case the query is resolved, all is well and good. If it is rejected, one may see the remark associated with it.

Query Management Portal — DoSW Side

This was the final product on my part. The finalized flow for the same is given below:

The queries that couldn’t be handled by the DoSW (eg. glitchy name, unsupported characters etc.) were to be forwarded to the technical team manually.

1. Correction of Data

The queries are shows in a systematic, easy to scan list. The important queries are shown at the top, while other queries are shown after that. The resolved queries are shown at the bottom.

In case a query has to be rejected, a message stating why it has been rejected also needs to be added.

Resolve All — A ‘Resolve all’ button was given as a bulk action for the table. This was useful in case of technical glitches, where a reissue of an ID card was necessary.

2. Technical/Design Error

This query type takes care of glitchy errors in name, layout, colour etc. This was quite common in the initial rollout since the frontend was buggy, and not responsive. The DoSW received a ton of queries regarding the same.

As mentioned earlier, a photo of the ID card is always attached with the query, while any additional documents that might be needed are attached by the student.

3. Other Queries

These consisted of all the other types of errors that could be there. The screens were similar to the technical/design error screens.

Although this type was used only in cases where an extension of the validity of the ID card was required.

Extras

 

The showcase

Teamwork, dedication and a deep understanding of the academic system allowed us to successfully deliver the finalised product.

That’s all for today 🏁

It was a highly intensive project, having to coordinate between the development team and the administration, listening to their queries and needs, and demanding in-depth research.