GEC Exam's portal
A web app that enabled safe & hassle-free exam registration for our GEC students during COVID-19.
A web app that enabled safe & hassle-free exam registration for our GEC students during COVID-19.
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.
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.
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).
Since there are only 2 weeks until the registration date, we adopted a 4-Days Remote Design sprint for fast and accurate solution delivery.
before diving into designing, We gathered the team member who will be the part of our remote sprint.
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.
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.
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.
I also did competitor research with our fellow colleges to find how they are dealing with this situation.
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
I encouraged my team for a How might we session to have a clear picture of the problems identified from our students and competitors.
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.
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
and an Admin portal for exam section staff to manage the registration data from the students and accept (or) reject the applications upon verification.
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.
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.
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
Based on my observations from the student testing, I made some changes to the UI to solve the tricky parts and tested it again.
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.
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.
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.
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.
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.
I divided the entire registration process into 5 simple steps. I have replaced the instructions section with our 5 step process representation.
I gave enough breathing space in between the exam names and also gave emphasis to the required parts like last dates and instructions.
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
After testing with some of our students we integrated this into our GEC Exam Cell to enable ease of access to our students.
