Project Context
Over the summer of 2020, my friends and I came together to work on a project for the NTU community. We always wondered why there wasn't a platform for NTU students to visit if they ever needed advice on which modules to take, which professors to go to for help or tips and tricks to ace the final examinations. Even more so, why wasn't there already a platform for NTU students to discuss final year examination questions with? And so the group of 7 other friends and I embarked on a project that could bring all of those aspects together on a website.
ROLE
Visual Designer & Front-end Developer
DATE
May 2020 - Beta Testing
TOOLS
Figma & ReactJS
Features
.png)
Module Description
Everything a student needs to know about the administrative aspect of a module such as prerequisites, no. of hours spent, course aims etc.
Reviews
Get module reviews from other students as well as tips and tricks to ace the final examinations. Students are highly encouraged to leave their own reviews
Final Exam Forum
Students can post their queries and doubts on the forum encouraging more discussions of how to solve these examination questions.
1
Design Prototypes
.png)
Reduce cognitive load
Shortcuts of some other modules within the same discipline
Promote visual clarity
Red colour immediately captures the attention of users, making it easier for people to find information with a quick glance
Consistent user interface
Standardised colour scheme, alignment and structure of each sub-section
Description
2
Review
.png)
Visual consistency
Same colour green used for all submit buttons
Easy to navigate interface
Visual cues for users on where exactly they are at. Place users in control
Follow platform convention
Similar pattern of top navigation bar and profile on the top-right hand corner
Making actions reversible
Requesting for a confirmation by the user, putting them in control of the entire process
3
Final exam forum
During the process of designing the interface for the final exam forum, i encountered much more difficulties. In terms of whether to standardise the number of questions in each semester, or allow the users freedom to add as many number of questions they wanted. Many questions started flowing into my head such as, how should the user add a question? How should the user input the question number? Should all the questions be displayed in full on the first page or should there be a drop down arrow for each question? Due to the nature of a forum, with so many components to consider, it took a long time to come up with a prototype that was not only simple and neat but easy to navigate.
In the end, I chose this prototype of the forum whereby users get a bird's eye view of how many questions have already been posted in the forum to allow for easy navigation. Additionally, this helps provide a clean interface for users. Users can add the question number using the input text box and the questions will be sorted accordingly. Users can then click on the question heading to be directed to the actual forum for discussion.
.png)
.png)
However, I received feedback from the lead front-end developer that this design would be too challenging to implement. Furthermore, ReactJS was a new programming language for all of us and so he requested for a simpler design that was easier to implement but still retains quality user experience.
This design on the right presents the entire forum in 1 page which includes the available years of final examinations, where students can input answers and all the answers posted by other students. This is a much simpler layout to develop but does not neglect the user experience as users can get to their desired page with lesser number of clicks.
Learning points
Adaptability
As a designer, we need to adapt to the different dynamics of the team. To have a good balance between making it simple enough to implement for software developers but at the same time not compromise on the look and feel of the website. These are hard decisions to make and often a compromise has to be made. But regardless, a good UI/UX designer should be able to consider both ends of the spectrum and make a decision to allow for a harmonious balance.
Reusability
Often, in this time and age many outstanding designs have already been implemented in different websites and applications. Designers struggle to come up with something fresh and new every single time. But I feel that there is no need to squeeze your brain juice to create a new design each time. Existing patterns and structures have already been put in place to give users a familiarity in using websites and applications. Why not use them and instead change some aesthetic elements to make them my own?
