Brief description of SMUMods

SMUMods is a platform for SMU students to review their professors and modules, with more features coming soon. This idea was born from the needs of students and it serves as a guide for them to know more about the professors and modules they might be bidding for in their next semester. The SMUMods team operate with a team of two, with our roles split between a front-end and a backend developer, and our main aim is to benefit the SMU community.

My role: Full-stack UI/UX Designer

From user research, observations, user testings to designs and front-end development, I took part in all the stages of the design process.

Special note: SMUMods has since been taken over by my juniors under a different name, "AfterClass". Gabriel and I are now mentors for their project.

2. UI Design (MVP)

Based on the preliminary survey, I went ahead to sketch the design on Sketch App with four main tabs: Discover, Professors, Modules and Profile. Since the survey also revealed the importance of the Search feature, it will be positioned below the tabs with a full width.

Main Screens

Main screens

Other Screens

In order to ensure that I could get a working prototype within Sketch, other screens were essential in testing out the flow and clarity of the content.

Review Process

The UI for writing reviews, in my opinion, should not be too cluttered. If I were to show all the fields required for the user to input, it might deter them from writing any reviews. So, I came up with a multi-page review process that splits “Writing a review” logically into three sections: Module, Professor and Preview.

Review screens

Professor and Module Screens

Since the team's aim was to ensure a community-driven content in SMUMods, we made use of Reddit's voting system to increase the visibility of good reviews, while also pushing down reviews that are not helpful. The rating metrics of Professors were derived from the survey, and they are designed to help users find Professors that match their criteria more easily.

In the Professor screen, I also experimented with an action sheet that showed 'Save', 'Write a review' and 'Share' buttons to group the key buttons. In other screens, you might see a mix of 'Start reviewing by rating' and a 'heart' icon all over the UI, which was not consistent and very out of place.

To ensure some variety of colours in the UI, I found the need to assign one accent colour for Modules, Professors and Profile.

Filter modal, More filters and Professor screen with action sheet

Submitting reply, Show more review, Module Screen

Search

Following Google's current search implementation, I went ahead to do a search page that spans the entire height. To facilitate a better user experience, users can search with the Professor's name, module's code or module's name. Since any Professor belongs to a module, searching either the Professor's name or module's name/code will return both the Professor and the module, which can be useful for users who could not remember the professor-module association.