Mobile mockup of the student group finder platform

Student Group Finder Platform

In collaboration with UofT's Innovation Hub
Overview
NEST is a one-stop platform for students to look for compatible groupmates and match them according to their indicated personalities and preferences. Without having to know everyone in the class, students can browse profiles and form groups for school projects. The app features tools such as group messaging and matching class schedules that make the group-forming experience smoother than before.

*This project was completed as part of the Fundamentals of User-Experience Design course at the University of Toronto.

Contributions

User Research
UI Design
Usability Testing

Timeline

Oct 2021 - Dec 2021

Team members

Erxun Ta
Jonathan Ho
Junjie Huang

Skyler Huang
Vitak Kam

View Prototype
Right arrow

UofT students find it difficult to connect with other classmates, especially when forming groups for course projects in a virtual learning environment.

Our team developed a one-stop-shop platform where students can browse through a list of classmates in the same course, view their profiles, connect, and form groups while taking classes online.

From identifying the problem space, and conducting desk research to designing user research sessions and prototyping design sketches, our team has gained hands-on experience in the fundamentals of UX process.

The problem

Online lectures can make it tough for students to meet new people, find groupmates, and even build friendships, something that our team experiences ourselves as well.

This is how we came up with the idea of developing an inclusive platform for students to identify others from the same courses, forming groups for projects, and ultimately developing lasting friendships.

Background research

We conducted a survey with 412 participants attending the University of Toronto and interviewed 9 participants, 7 of whom were graduate students to know how they feel about their group-forming experiences.

What our interviewees say 👇🏻
From our interview, we found that our participants found it hard to converse and assign tasks when doing group projects remotely. They feel awkward during breakout rooms and did not find Quercus (UofT's portal for courses) useful to form groups due to limited features.
Based on the research results, we grouped students' main challenges using the affinity diagram for prioritization.
Affinity diagram to group user pain points

How can students find group members and connect with others prior to meeting new people in person?

Project Direction

Our project will address the gap by designing an application that allows students to
✦ Reach out to classmates
✦ Form groups
✦ Communicate within groups
✦ Feel less isolated in an online learning environment

Understanding our users better

To get a comprehensive view of our users' current experiences, we created
✦ Persona
✦ Empathy Map
✦ As-is Scenario which helped frame our solutions around their needs.

Meet our persona Sandra,
a 2nd year international student at UofT
Sandra's, our persona's profile
We imagined how she would feel, think, do, and say when forming a group for an online course
Sandra's empathy map, illustrating what she says, does, thinks, and feels.
By mapping out Sandra's current journey, we can have an overview of the actions she takes and her feelings at each stage. We then voted on key challenges that need to be addressed.
Sandra's journey map. First she gets informed about group project.then she looks for group members, after that she forms a group and finally joins group on Quercus.
We concluded Sandra's need to focus when designing our solutions​
An illustration of what Sandra would want in an ideal group formation process.

She needs a platform to know, find, and form groups – all in one place.

Ideation
What ideas to go forward with?

Our group came up with 20+ ideas which are then ranked according to the level of feasibility (x-axis) and impact (y-axis). The top two ideas being the most impactful and feasible are a Personal bio and filter function and a Time-schedule matcher.

We also had fun coming up with absurd ideas – introducing a swiping function like a dating app; a Pokémon Go replica where Sandra can walk around campus to “collect” classmates as her potential group mates.

View Prioritization Grid
Concluding 3 features
Three mockup phone screens showing the 3 main features of the solution: first, a swipe function adopted from dating apps. Second, a personal bio page with filters that describe the users' personality and working styles. Third, a schedule matcher.
Iteration
Prototyping our solution

We visualized our ideas by sketching out the flow of the app and its main features, which helped us review the feasibility and logistics of the functionalities. We then tested this initial idea with a few users and incorporated these feedback into our medium-fidelity prototype.  

View Low-Fidelity Prototype
View Medium-Fidelity Prototype
Usability testing on medium fidelity prototype

We then asked 61 representative users from the University of Toronto to try our clickable prototype on Maze to test the overall flow of a more realistic solution. Users were asked to complete the 3 tasks.

Misclick rate for the 3 tasks in our usability testing on the medium fidelity prototype. Task 1 has 30%, task 2 has 45.2%, task 3 has 14.2%.
Task 01 Use the search function and tags to look for students in the same class
‍Task 02 Direct message and match with a classmate
‍Task 03 Go to the group chat and check group availability to find the best time to meet
The overall task completion rate is around 50.1%.
76% of participants rated the app 4 out of 5 ⭐️
User Feedbacks from Interview
“Love the tags, it is fun and a good way to make friends with other classmates”
“The search bar is not obvious.”
“Conflict between the swiping and searching - tend to swipe at first instead of search, could move the search bar above the recommendations.”
“It’s useful and efficient to find teammates who have similar schedules with me.”
"It can be better if you can link to google calendar / outlook because the app would not be used frequently and it’s inefficient to change the calendar manually.”
Changes made based on usability test
The wording has been changed to be more straightforward and indicative of context.
Two mobile UI screen demonstrating changes made. Changed wordings and added icons to be more straightforward and indicative of context.
The placement and size of the search bar and the swiping feature were changed to be more prominent and visible
We also added more intuitive actions with symbols and colour clues
What I took away from this?
Content ordering does matter
Time management is hard but important!

Users encounter a huge cognitive workload when interacting with a new system, so the order matters.
Placing important features (i.e. search bar) on the top allows easier scanning of a new system. 

Time constraints poses a great challenge during the entire project. We had design sprints and presentations every other week which limited the extent of our research work. If given the time, we would be able to recruit more testers and conducte moderated usability testings. Better time management would also improve our design process.

Should always consider common conventions

We should consider common conventions that are more intuitive to users. Rather than having users swipe up and down to view user profiles, it is easier to swipe left and right since it is commonly used in most smartphone devices and other apps (such as dating apps).

Communicating a shared sense of caring and community through thoughtful design.