An experience created for NTU students, by NTU students

NTU Modules

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

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

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

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.

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.

Final implementation
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?

Let's connect!

Would love to get to know you. Come say hi !