As a computing student, I took a module offered in NUS Computing called CS3240 Interaction Design, which focused on teaching us the principles and practices that go behind designing user interfaces as well as user experience s.

This was an early assignment which taught us about creating prototypes starting from low-fidelity frames, before going on to high-fidelity ones, to actual implementation.

Lo-fi prototypes were done in Balsamiq, Hi-fi prototypes in Figma, and implementation in HTML / CSS. The repo for the implementation can be found here.

In this case, we needed to do a redesign of a current website. I chose NUS's Education Record website due to its importance and potential to be better.

EduRec sports an outdated design out of touch with modern user interfaces. A lack of visual hierarchy and proper modular design causes much confusion about the difference between the different options. This causes the process of accessing vital information tedious. Simply checking one's academic progress is not easy, with the ambiguity of the options compounding the effort needed to do so (FYI, there are 3 tabs you can press into to check your progress!).

My idea was to redesign it such that the site would feature a dashboard displaying important & relevant information to the user, while making sure all options available are easily accessible in one click.

This design would also employ a visual hierarchy, with the most relevant options taking up the most space, and vice versa. Additionally, it would be styled in a way that would be most familiar with NUS students. This is done by styling it similarly to the widely used learning website LumiNUS. This would enhance intuitiveness as it ties into the mental model that NUS students would have of NUS-based information websites.

For our first stage, we created mockups using the wireframing tool, Balsamiq.

This was my first implementation utilizing Balsamiq as required by the assignment. Here are some key features I implemented:

    1. Global Menu Bar

    2. Timetable Module

    3. Everything accessible in one screen

For some context on the timetable, NUS utilizes a (very beautiful) timetable web app called NUSMods, a widely used student timetable planner. What's ironic is that it wasn't an official timetable planner, but a student based one instead. On the other hand, EduRec did not sport such a feature, and instead gave out timings with no visual element. This made timetable planning on EduRec alone really tedious. Integrating both of them together would be good due to EduRec being able to use directly use student module information.

For the second stage, we created a high-fidelity prototype using Figma.

Key changes:

    1. Reduced number of individual boxes on the Dashboard

    2. Changed colour scheme

Firstly, I removed the Examinations module and combined it with the middle as I felt that there was too much visual clutter which could overwhelm the user. It would also cause less trouble for implementation due to a less complicated grid structure.

Secondly, I altered the colour scheme such that the dominant colour is NUS's orange instead of blue. My rationale was that if the layout was too similar to LumiNUS, students may get confused between the websites. NUS has a LOT of different websites. Here's LumiNUS's UI:

Lastly, we were made to implement them in HTML and CSS. The github repository for my files can be found here. 

As shown, this is largely similar to the implementation in Figma.

That's the end of what I've done for the assignment, and I believe that my redesign has successfully solved some issues that have plagued the user experience of the website. I believe that I have found a good balance between UI design and potential for development, by showcasing the (pure) HTML & CSS implementation of the Hi-fi prototype.

Thanks for looking into this little assignment of mine!