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.

3. Usability Testing of Multiple User Flows

The most nerve-wrecking period; how do I know if the UI I’ve designed was usable? Was there anything that was unclear to the users? Do they know how to navigate my UI? Before I could start developing the front-end UI, I have to assure myself that the UI I’ve created was usable to most users. So, I turned to Maze.design to test my Sketch prototype to gain some actionable user insights.

Maze.design organises each task as a mission i.e. “Search for Professor Alice, ZHANG Lin.” Furthermore, Maze.design allows me to see where users clicked, the paths and the duration for each path they took. By looking at their behaviour, I was able to quickly identify the screens that require fixing before republishing each time to test if it finally worked.

Usability Testing Round 1

Goal: Find out the usability of the main user flows of SMUMods with the following set of missions that revolves around the basic features (No. of users who completed the mission / total number of users):

1. Search for Professor Alice, ZHANG Lin. (7/7)
2. Read the 1st review in detail and upvote (6/6)
3. Find out more about Professor Alice, ZHANG Lin (4/4)
4. Search for module “Information Systems & Innovation” (2/4)
5. Submit an anonymous review (4/4)

With the number of paths users can take for Missions 1 and 4, I wanted to find out which path was the most obvious to users. With the help of Maze, I was able to see which the paths user have taken so I could concentrate my efforts on these paths.

A community-based application requires some kind of tool to sustain itself. Thus, the “Upvoting” of reviews is the key feature of SMUMods and I wanted to find out if users can understand the arrows that signify the upvoting/downvoting mechanism.

Also, I believe some users want to stay anonymous when posting reviews; I wanted to find out if they could find the “Post as anonymous” button.

Other missions were simply a reassurance to whether the UI is effective - Could users find out more information about a particular professor?

Some Useful observations

Mission 1: The most obvious path for users to find a professor
3 of the 6 testers managed to find the professor right from the discovery page, which means that they were able to quickly comprehend the details of the home page since they only took an average of 7.5 seconds.

2 testers used the top tab bar “Professor” tab to systematically find the required professor. However, searching for the professor from the list wasn’t obvious enough for the users. They continued to move to the other tabs or tried to go back. Since they had no choice but to click on “Alice” on that page, they managed to find it in the end. None of the testers clicked on search bar in the “Professor” tab, the “Filter” button and the list sort dropdown to narrow their search.

Mission 3: More information about Professor
All testers managed to find the “More Information” button quickly (avg. 4.7s) on the Professor page

Issues that require fixing

Mission 1/4: Search page
Truncated module name was not helpful. The emptiness of the page confused some users as they are unsure what can be searched or that there was a glitch in the application showing blank results.
Action: Make the list item taller to show the full name of the module. Include empty list illustration

Mission 1 or 4: Module/Professor page
None of the testers clicked on search bar in the “Professor” tab, the “Filter” button and the list sort dropdown to narrow their search.
Action: Re-think missions and re-do testing for this page while tweaking certain elements

Mission 2: Expanding reviews
By looking at the intensity of the hotspots, many of the users mis-clicked the read-more button and instead, touched on the paragraph to expand the review.
Action: Allow users to expand review by clicking on the paragraph (or anywhere for that matter)

Issues caused by UX Prototype Testing limitations

Mission 1 or 4: Unable to search (pre-filled)
The inability to type in the search bar confused some users. 3 testers were seen clicking on the search bar and the clear button, as if they were unsure why the search field was pre-filled. As a result, they bounced back and forth in the search page, trying to make things work.

Mission 2: Unable to upvote immediately
Most users tried to upvote the first review detailed in Mission 2 without first expanding the review. This was an intentional constraint as I wanted to find out if people are able to find the “Read more” button. I assume that after they re-read the instructions, they were able to complete the mission without any issue.

Mission 5: Unable to click on certain elements
Elements such as the review form and other parts of the UI that could potentially bring the users to the right pages were disabled, thus confusing users. However, users still managed to finish the test once they understood that there were only a few points that were clickable.

Since my testers were able to navigate directly or indirectly to complete the mission, I dug deeper to find out whether any of them got lost, especially for the fourth mission and republished an updated tests before conducting a second user test.

Updated test missions (with accompanying success rate)

1. Find Professor “Alice, ZHANG Lin” from the School of Information Systems (5/5)
2. Edit your most recent review (4/4)

Usability Testing 2

Goal:

1. Find out if users can filter a list
2. Find out if users can find where their reviews are located and edit them

Subsequent test missions (with accompanying success rate)

1. Narrow down the list of Professors to only those from the School of Information Systems (9/9)
2. Edit your most recent review (7/8)

Useful observations

All testers were able to find the filter button to filter the list of Professors. However, there was one user that tried to use the search feature to filter the list of Professors which was understandable.

7 testers were able to find where their posted reviews were located. However, 1 tester did not complete the mission. This was caused by the prototype’s error where the hotspot for profile was not enabled at pages other than “Discovery”.

Overall, these missions have proven that the initial observations of the tested features were easy enough to use for most users.

---

You have reached the end of the third part of the SMUMods series! Thank you for reading and I hope you have enjoyed it.