Case Study UI/UX — Obafemi Awolowo University CBT Platform Redesign
Guy 1: I could barely see anything on the interface.
Guy 2: At least you finished it, I mistakenly submitted. I’m pained.
Me: A lot just went wrong.
This was the conversation that ensued after my SWEP 200 exam with 2 other colleagues, and I figured that majority of the students had similar experience. Couple of the problems were design-related, while others had to do with the back-end of the platform.
Overview
The C.B.T platform is a test taking application which allows for various departments to conduct test and examinations. In other words, the platform test students and grades them.
As a result of my observation that very day of my examination, I decided to take upon myself to redesign the CBT platform.
Problems
The interface of the platform is generally bad and the consequences are being passed to students who continually have issues with using the platform
- Bad UX
- Bad Design Implentation
- Little Attention to Design Principles
- Visibility Issues
These and many others are the problems that students using the platform experience.
I wasn’t able to get my hands on the actual picture of the interface, but based on past usage of the platform for various tests, I was able to recreate the visuals of how it looks like.
Goals
- Redesign the platform to have an appealing and refreshing interface
- Improve the UX.
- Eliminate mistakes made by students due to bad UX.
The Design Process
While undergoing this project, a lot of design ideas were contemplated, but they could not be implemented because the project was aimed at eliminating errors, increase visibility and many more
Sketch
The sketches were made using a pen and a jotter I found lying in my bag, not a sketch pad nor a notepad. I was happy with the sketches and it helped with my first hands on experience with wireframes.
Wireframe
I was satisfied with the sketch and I decided to try my hands at wireframing. I used Adobe Xd to make the wireframe and the structure was satisfactory
Design Phase
Before I get to design, I’ve found the habit of showing my sketches to few people to try to know if they can guess the project without having full details about it. This was no exception and it helped me to know if the average user can relate to what I am producing.
For my designs, I use Adobe Xd as my primary design tool. I can use various design tools given to me for my design works. I’ve just been so familiar to Adobe Xd as I dont have to switch different tools to achieve the goals of designing and prototyping. I can get everything done with Adobe Xd.
Visuals
I made sure that the redesign is not different from what the users are acquainted with. I also added a feature that allows candidates to be able to select any numbered question and answer to it regardless of how far/near they are from it.
Accomplishments
- Employ design principles like Contrast and White-space to achieve a better UI Design.
- Eliminate submissions made by mistakes due to switching questions
- Enhance visibility of important elements like “Time”
Overall
The effectiveness of the platform cannot be overemphasized as students’ results are at stake. Not so much design related problems have to be fixed too but it all begins with conscious steps.
At a particular point or another, a department would make use of this platform, so therefore, it should be able to serve its needs.
You can test the prototype here: https://xd.adobe.com/view/67d03d89-1bd4-474a-7494-410635c158a4-11e1/
Thanks for stopping by.
You can reach me via Twitter or Instagram.
With Love!
