GEC Exam's portal

A web app that enabled safe & hassle-free exam registration for our GEC students during COVID-19.

Pause

Every JNTUK affiliated college student has to register for their semester examination through a manual process by filling out an application and paying for the college exam section.

Problem

During COVID-19, we had an exam notification from JNTUK for the 1st batch of B.tech students to register for their semester examinations. We have only 2 weeks until the last date of registration. Due to lockdown, none of the students are allowed to go to college for registration.

Challenge

To replace the existing manual registration with a more straightforward solution that allows students to register for their examination at their leisure (i.e., from their HOME).

Process Followed

Since there are only 2 weeks until the registration date, we adopted a 4-Days Remote Design sprint for fast and accurate solution delivery.

4 days sprint
4 days Design Sprint

Planning for the remote sprint

before diving into designing, We gathered the team member who will be the part of our remote sprint.

Our team and responsibilities.

Ravikiran Dhulipala

Ravikiran Dhulipala (me)

I was responsible for defining the overall design direction of the project as a UX/UI Designer and as a front-end developer to develop the web portal.

Y durga prasad

Y Durga Prasad,
Exam Section Incharge

p sasi kumar

P Sasi Kumar,
Exam Section Staff

Ch sai prakash

Ch Sai Prakash,
Backend Developer

V surendra

V Surendra,
Backend Developer

Our principal is also involved early in our discussions so that the college business goals would also be accomplished. We carefully planned our sprint and development with in our 2-weeks time.

1st Week

Design and develop the solution remotely.

2nd Week

Testing with our student's, iterations based on feedback and promoting the website among the students.

Before our Day - 1

Before starting the design process, I had a few calls with our students to understand their primary challenges faced during registration and their expectations from our solution.

key points from the student research
Students expectations

I also did competitor research with our fellow colleges to find how they are dealing with this situation.

Day - 1 : Understand and defining the challenge.

I started with some lightning talks to bring our team on the same page early in the process. Since we also included our principal, I got a clear idea of the business outcome.

We got a quick note from our principal that

The payment gateway should not be integrated into our solution

why? - since we cannot get the bank KYC documents & higher level permission to integrate it during the lockdown

I encouraged my team for a How might we session to have a clear picture of the problems identified from our students and competitors.

some of the questions from how might we session on day -1
HMW session notes

After the session and based on the problems we presented, I held a voting session to prioritize the essential issues. A long list of HMW questions is narrowed down to 4 after voting.

We ended our Day - 1 after the HMW session. As an organizer, I planned an ideation and sketching session for Day - 2.

I created user stories for student and exam section staff by consolidating the student's pain points and HWM questions to engage our team on Day-2.

Day - 2 : Ideating and Sketching

I presented the user stories that I had created on Day-1.

After my presentation we ran an Ideation session to think out the possible ideas by keeping the gateway challenge in mind. Some of the ideas from the session are

spending half of the day in brainstorming, we finally ended up in creating a web portal for student's where

  1. Student first pays the exam fee to the college bank account using any payment mode (Gpay, phonepe, paytm etc.,) directly to exam section bank account.
  2. Fills the required data in the portal along with the transaction id of the payment.

and an Admin portal for exam section staff to manage the registration data from the students and accept (or) reject the applications upon verification.

Sketching out the Ideas

I created a user flow for the student portal based on the finalized solution.

I have designed paper wireframes keeping the user flow centered and prototyped using marvel to present to our team.

I encouraged exam section staff to create paper sketch of the admin portal, which made our work much more manageable.

Since the exam section has created their flow, we decided to hand off the sketches to the final development of Admin portal.

Day - 3 : Designing & Presentation

Keeping the paper sketches centered I created Mid fidelity screen's using Figma. I also included the actual content in the screens to check how the content fits in our layout before development.

I also presented some of the key parts from the mid-fidelity design to the team to have a clear how student questions are clearly addressed.

upon validation from the team, I transformed mid-fidelity wireframes to High - fidelity screen's with our college logo and pictures.

Day - 4 : Testing & Iterations

I identified some key sections and defined the goal for our remote student testing. We tested our High fidelity prototype with 5 students remotely to find out

My observations

Based on my observations from the student testing, I made some changes to the UI to solve the tricky parts and tested it again.

comparing screens from old design with newly modified design based on the user feedback.
modifying the Popup modal with account details link and what to enter in the transaction ID field.

It's The end to the 4 days sprint.

Result of the Sprint

It's an Epic Win for the team. Our sprint worked so well that we could design a solution to a critical problem quickly. Failing fast with the prototype made sure we were on the right track of building a correct solution for our student's problems.

After the Sprint

We started developing the student portal. I have used Bootstrap studio to quickly convert our student portal design to responsive web design. During the Sprint week, the Front end part of the Admin portal was created by me. All the necessary backend part was done by our backend developers Prakash & Surendra.

Durga Prasad, Exam section Incharge and also a CSE lecturer, designed the Database structure to efficiently keep track of records.

Final Outcome

5 people, strived for 2 weeks to design and development the solution.Finally, here comes our Happiest part - Success to our Hard work 🥳

Our success was made even huge by the JNTUK exam section staff

we appreciate Giet Engineering College as the only college to send the hard copy of application during COVID-19.

Iterations

Though we have made an impact to reduce the students' efforts and the exam section staff's efforts, there are some issues with the existing design.

Things that don't work in the existing design.

account details in current design

These issues resulted in the increase of outgoing calls to students from the exam section to validate some details. We decided to resolve these issues through an iteration of the existing design.

5 Step process

I divided the entire registration process into 5 simple steps. I have replaced the instructions section with our 5 step process representation.

5 step exam registration process
5 step process design

Examinations

I gave enough breathing space in between the exam names and also gave emphasis to the required parts like last dates and instructions.

exam representation in the student portal

Account details 

I included the account details and ways to pay the example fee after showing the fee structure first.

I have also introduced an animation after submission to intimate the student that the data is being transferred to the exam section and after successful data transmission, I have added a confirmation screen at the end.

Here's how the new design looks like

Current Design of student portal

After testing with some of our students we integrated this into our GEC Exam Cell to enable ease of access to our students.

My Learnings as UX/UI Designer

Other Projects

GEC Exam cell
Disney+ hotstar brand image
Hotstar login experience
E-commerce delivery experience