SMUMods

Personal group project for SMU students to review their Professors and modules

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.

Search

Responsive Design