Designing A Better Way To Connect Student Cohorts
By Random: Caroline Chen, Daehan Kang, Edwin Zhang, and Wangsen Tian
Introduction
Cohort — a group of students in the same faculty or department, who take similar courses and face similar challenges in school.
Problems & Goals
Over the course of the ongoing COVID-19 pandemic, students often feel more disconnected due to the nature of remote learning. Reaching out or talking to peers is more difficult than ever, and a lack of face-to-face communication has prevented students from making new friends, forming study groups, and strengthening connections. Additionally, current online platforms aren’t specifically designed for connecting large student cohorts. Existing platforms might connect students who already know each other well, but may not necessarily encourage students to meet new people or regularly set up meetings.
Based on this, our goal is to investigate motivations for students to interact with their peers in their cohort and normalize the social experience of meeting new people online. We want to understand the challenges brought by the pandemic and provide a solution that connects students to each other to easily set up online meetings, especially during this period of remote learning.
Value Proposition
We decided to do something about this problem and design a platform that connects student cohorts. As already mentioned, one of the biggest issues facing post-secondary institutions is that students have a hard time maintaining and building social connections through online platforms. Specifically, this situation can feel very challenging for first-year students, who need to adapt to new systems and environments while simultaneously trying to find new friends through virtual classes and orientation events. Beyond this, there also are many causes for concern when using online platforms, such as privacy, security, and cyberbullying.
Our solution to this is an integrated mobile application that satisfies the needs of both social interaction and academic collaboration among students. To do this, we developed an app focused on recommending new students to each other based on shared interests and courses. Through our platform, students will be introduced to each other individually and have the ability to set up meetings quickly using platforms that they are familiar with. Our mobile application also aims to provide a clean and easy to use interface that creates a friendly social environment.
Empathize and Define
Personas and Empathy Maps
One of the most important decisions we made during the design process of our application was deciding who our users were. We chose to create personas and empathy maps for upper-year and lower year students from our cohort to capture differences in user behaviour.
Specifically, we chose a lower year CS student Jennifer Li and upper-year John Smith, respectively. Both of these students need ways to connect with other students but are either new to university life or already have established friend groups. Since our entire team is composed of CS students, these personas were familiar to us.
We also chose a fine arts student (Ashley DiMambro) who interacts with technology differently than CS students, as well as a first-year engineering student (Rajesh Khan) who differs from the other personas in that he has a much more well-defined cohort.
User Observations and Interviews
After hypothesizing about our users, we spent some time developing a short questionnaire, along with detailed interview questions to validate our ideas. The goal of this was to figure out how our users currently connect with each other and determine what could be improved. During each interview, we asked participants to fill out the questionnaire alone before proceeding to the interview questions. Questionnaire questions were closed-off and more specific, whereas interview questions were unstructured to openly explore various responses.
We also conducted a mock interview to refine our questions. In general, this went well, but the most notable hiccup was with one of our questions: “If you were invited to a virtual social or mixer with your peers, what would make you feel comfortable going to the event?”. This seemed too open-ended and the interviewee was uncertain with their answer. We refined this to narrow down the range of answers as: “If you could choose between video, voice chat, or messaging for the event, which would you choose and why?”.
The Questionnaire
Our questionnaire contained short answer questions in various formats about demographics and online communication methods. This included several Likert scale questions that allowed users to rate their satisfaction or frequency of use for various platforms and communication mediums.
The Interview
Our interview questions openly explore how interviewees might engage with peers and identify advantages and disadvantages of existing solutions. For each question, we made sure to follow up with why interviewees used certain platforms or how exactly they used products in their daily lives to connect with each other. At the end of an interview, if an answer from the questionnaire was interesting but hadn’t been discussed yet, we made sure to follow up with additional questions.
Interview Results
In total, we interviewed 6 individuals, 3 males and 3 females. All interviewees were over the age of 19 and enrolled in an undergraduate program at the University of Waterloo. We had 1 first year, 1 second year, 3 third year, and 1 fourth-year student, where 2 were engineering students, 2 were in the science faculty, and 2 were in the math faculty. Overall, we discovered three key insights.
1. Large group call sizes make online conversations much harder — Typically only one person can speak at a time and platforms don’t really address this issue. However, platforms like Zoom have a “breakout rooms” feature so people can temporarily create smaller, randomized rooms to meet in.
2. Video is the most preferred method for social gatherings — Although the majority of interviewees reported feeling the least comfortable meeting new people via video, it was usually preferred since it’s a closer experience to meeting someone face-to-face and forming connections.
3. Different platforms were used in specific social contexts — Microsoft Teams, Zoom, and Slack was primarily used with work colleagues, while Slack was occasionally used with classmates and larger social groups. Discord was popular for gaming and voice chat, while people rarely used phone calls. Facebook Messenger was used widely when talking to friends, and Google Hangouts was often used for video calling both colleagues and close friends.
“Hangouts is the easiest way to set up small meetings, the flow to create new meetings feels much easier than something like Microsoft Teams or Zoom” —Interviewee
Creating an Affinity Diagram
After gathering observations in our user interviews, we created an affinity diagram that helped us group our insights into three major themes.
1. Productivity — Most participants felt that efficiency was an important aspect of communication, especially within larger groups. Several enjoyed using platforms like Slack because they could easily communicate with many people simultaneously. Instant messaging was generally perceived as an efficient way to communicate, but one person noted that it can be difficult to get complex ideas across using messaging.
2. Social Connection — The majority of interviewees valued face-to-face video conversations and want to feel more comfortable connecting online. They also valued building deeper connections in smaller groups.
3. Usability — Every participant mentioned in some way or another that they enjoyed using platforms that were fun and easy to use. Overall, we abstracted these results into key ideas around building more accessible platforms, reducing user stress and generally improving usability.
User Tasks
After creating our affinity diagram, we defined 3 user tasks to help us brainstorm feature ideas. We performed a hierarchical task analysis for each to identify potential pain points and ensure each task was efficient and fit in with our overall themes.
1. Registering for the Platform
For this task, we wanted to make sure that the user had a simple onboarding experience that gathers basic information about their cohort, interests, and courses. This information could be useful for introducing students to each other and providing them with user recommendations later on.
2. Initiating and Setting Up a New Meeting
We wanted to make sure users could set up meetings as easily as possible, especially for video calls since they were valuable for many potential users. This task allows users to create new meetings and invite others based on recommendations or manual searches.
3. Joining a Social or Study Group
For this task, users can join the study or social groups to message each other or set up meetings. This would help students communicate efficiently within larger groups. A user would be able to request to join new groups by browsing through suggestions or searching for specific ones.
Process & Reflection
Originally, we included common subtasks for tasks such as “open the application” and “sign-in”. However, we removed them to make the diagrams more concise since they weren’t specific to any one task. Instead, we assume that users have already opened the application and are logged in when necessary.
Additionally, we thought about different ways to shorten the user journey for each task. For example, should finding social or study groups require users to navigate to a group details page before sending a request, or could we add shortcuts to do this directly from search results and recommendations? However, we were cautious to add such shortcuts since they could increase the learning curve for users.
Ideate
Choosing Features and Developing User Stories
After finishing our task analysis, we came up with four main features: call scheduling, user profiles, friend lists, and user recommendations. These features were chosen because they were the minimum requirement that we needed to build a usable platform. After deciding on the features, we created user stories for each.
Storyboarding
Next, we created storyboards for each feature to think about how to design for real use cases and come up with concrete requirements.
1. Call Scheduling
2. User Profiles
3. Friend Lists
4. User Recommendations
Sketches & User Flows
We used our storyboards and user stories as inspiration to sketch out some rough initial designs. These show basic interactions for each of our proposed features. Even though these designs aren’t perfect, they allowed us to get our basic ideas out there so that we could begin iterating on them.
1. Call Scheduling
Users can schedule calls with friends and navigate to their profiles by tapping on their name in the friend list. Each entry provides the option to schedule a quick call using the selected platform and availability, shared by both users. One of the main things that we took from our user interviews was that students use a very wide variety of platforms to communicate, so we wanted to allow third-party platform integrations for calls.
2. User Profiles
The profile page shows information such as a user’s interests, courses, integrated platforms, and schedule. This is important for users to find students with similar interests or the same classes. There are buttons to add a user as a friend or schedule a call when viewing another profile, while a user’s own profile will allow them to edit their information.
3. Friend Lists
In this sketch, we designed the friend list to show a list of friends and groups that the user has joined. There is also a search bar and the ability to create new groups via the “New Group” button, where users can invite others based on interests or courses.
4. User Recommendations
This shows a recommendation page containing a match with another student (top left). From this page, users can schedule a meeting with the user and add them as a friend (top), or they can search for other users using filters (bottom). Tapping on the profile picture of a matched user or search result will navigate to their profile page.
Ideate Design Iteration: Feedback and Actions
Originally, we decided on a messaging feature instead of the user profile but removed it because we already wanted to use third-party integrations for setting up calls. In this case, messaging might be redundant since we directly connect users on these platforms.
The profile also fits more naturally because the other features could be integrated easily to create a cohesive experience. Friend lists could link to profile pages, call scheduling could use shared availability from profiles, and recommendations rely on profile information. As a result, it was very important for users to see and edit their own profile, or be able to view someone else’s.
Prototype and Test
Low-fidelity Prototypes
For initial prototyping, we created 4 tasks based on the two features that we thought were most important for connecting students: user recommendations and call scheduling. We wanted the recommendation feature to be similar to Slack “Donut” chats to normalize meeting new people. The profile and friend list were kept as simple secondary features since they are important to the entire user experience.
1. Searching for users
Users can search and filter for other users from the home page using the search bar. On the home screen, we also show a list of upcoming and past meetings, as well as the currently recommended match. Tapping on the “schedule meeting” button will open a call scheduling popup.
2. Scheduling a call with a recommended match
The call scheduling popup shows shared availability from calendar integrations and a list of shared platforms. The invite message is auto-generated once a platform and time are selected, but is optional and can be edited. After confirming, the recommended match button changes to say “reschedule”, and a new upcoming meeting appears.
3. Meeting follow up
This popup automatically opens after a meeting is completed and the user navigates to their home page. The section to add friends will only appear if two users are not friends. After selecting a response for each question, the submit button can be pressed. Users can also skip a follow-up and complete it later. This prototype also shows how a user might find a new match.
4. Navigating across pages
The navigation bar allows users to visit our three main pages. The profile and friend list pages are simplified versions of our initial sketches. Users can edit their profiles and add/delete interests and courses, in the same way, search filters were added in the first prototype task. The friend list now shows a list of friends, along with incoming and outgoing friend requests.
Low-fidelity Evaluation
We used the four tasks outlined above to conduct user evaluations. To do this, we created Figma prototypes for each task and asked users to try to accomplish a goal, such as scheduling a call or navigating to their friend list. In total, we conducted 3 evaluations.
The first interview was a mock interview that helped us refine the evaluation process. One of the most important learnings from this was that we were missing explicit buttons to cancel actions. We also lacked labels in our navigation bar and the icons seemed confusing to the tester. In terms of the evaluation procedure, our initial script failed to provide enough context for each task, which made it hard for our tester to understand objectives. During real testing, we added more context for each task to make things clear.
The next two interviews were with real target users of our app. During these tests, we identified and fixed several potential problems. This included difficulty returning to certain pages, a confusing search filter mechanism, and lack of visual feedback when selecting options. We were also entirely missing the ability to delete courses and interests on the profile page. Overall, this feedback helped us polish the prototypes and refine our designs before jumping into high-fidelity prototyping.
High-fidelity Prototypes
During this stage, we named our app “Sync” because it was short, easy to remember, and embodies our goal of connecting student cohorts to keep them in sync. For the logo, we opted for simplicity and used the letter “s”. The primary font is “Inter”, a modern font developed at Figma. Our colour palette contains 3 shades of a blue-grey, along with a red, which is our primary colour for buttons. The shades of blue are used as accents and secondary buttons.
We decided to narrow down our low-fidelity prototypes and focus on 3 major tasks that we were confident in:
1. Scheduling a Call with a Recommended Match — The main goal of our app is to connect students within cohorts to each other, and setting up meetings is a critical aspect of this, especially in the context of our recommendation system.
2. Sending and Accepting Friend Requests — Each week the user is matched with a user that has similar interests to meet a new friend and add them to their friend list.
3. Navigate to profile and back to the home page — Since we are evaluating user control and freedom, being able to navigate between each of the tabs is quite important.
The overall flow for these tasks are similar to the low-fidelity prototypes but eliminate several aspects such as the post-meeting follow up since it wasn’t a core part of our platform. For similar reasons, we removed the search bar from the recommendations screen since it was more of a secondary feature.
High-fidelity Evaluation
Once we had high-fidelity prototypes, the next step was to get real users to test them out. We asked 2 evaluators to perform heuristic evaluations, and 1 evaluator to perform a cognitive walkthrough using our three tasks.
Heuristic Evaluation
For each task, we asked our evaluators to provide feedback on 5 heuristics from Jakob Nielson’s usability heuristics for UI design. These included user control and freedom, and aesthetics and minimal design.
Our evaluators provided useful feedback, and we learned that the friend list page looked cluttered, the italicized text was inconsistent, colour contrast was sometimes poor, and that we lacked an undo mechanism for user actions. We didn’t implement some of these concerns such as the undo mechanism, since these were complex and secondary to the core product.
Cognitive Walkthrough
During this evaluation, we asked the evaluator to think out loud and provide their reasoning for performing actions. Overall, the tasks went smoothly which gave us confidence in our design choices. However, some small details that were mentioned include the addition of a notification icon for pending friend requests and a calendar view to compare availability. In the end, we left these out since they seemed to clutter our UI.
Prototype & Test Design Iteration: Feedback and Actions
Based on the evaluations for both the low and high-fidelity prototypes, we were able to iterate several times on our designs and add the necessary changes. This included updating our search filtering flow, restructuring the friend list page, labelling our navigation bar, and improving the layout of our home recommendations page.
Here is a quick demo of our final design!
Conclusion
Reflection on Design Process
This project started with a big goal of connecting student cohorts — which is something we feel that our product has accomplished in a simple, effective way by providing recommendations and the ability to schedule calls easily. During the design process, we discovered a ton of valuable insights through multiple rounds of user interviews and evaluations.
Narrowing the problem scope. Iterating across multiple designs helped us scope down broad ideas into the most critical elements and allowed us to keep our app simple. We developed a set of features that were all simple on their own but came together cohesively.
External feedback is highly valuable when improving our designs. By conducting interviews and performing usability tests during each design stage, we quickly uncovered pain points and learned how to streamline the user journey based on feedback.
The importance of small visual details for usability. Color, contrast, and accessibility were important topics that often arose during testing. By making the necessary changes and listening to concerns, we learned to better understand the time, energy and thoughts that go into a well-designed product and how small visual details can increase usability.
Current limitations and future plan
Our app is currently limited in that students can currently only schedule one-on-one meetings with users from their friend list or recommendation pages. In the future, we’d like to add additional features such as the ability to schedule group calls and create cohort-wide events with more people. We’d also like to add things that we left out of our final design such as our searching and filtering system.
More generally, we could also expand this app to students across North America, not just at the University of Waterloo. We hope for the app to become a mainstream platform used among classmates to communicate and meet each other. To do this, we would need to add more third-party integrations with major social media platforms and encourage new users to join.
