Links — Bringing meaningful social connections into the classroom.

Michael
CS449/649 F20 — UWaterloo
20 min readDec 10, 2020

by The Designers

Introduction

Building positive social relationships between students and instructors is a struggle, especially when everyone is focused on their own deadlines and most people spend very little time focused on actually building relationships with each other. This is where our app Links comes in, a mobile app that is used before and during lectures to improve communication between students and instructors by incentivizing people to talk to each other, while building social relationships throughout the classroom, and promoting transparency between students and instructors when learning course material.

The first problem we are eliminating is the lack of social relationships in the classroom. Throughout a semester, most students don’t know each other and instructors don’t know their students. Therefore, our icebreaker game is the perfect way to help encourage students and instructors to engage with each other in a fun game that will help build social relationships throughout the classroom.

Additionally, we want to eliminate the lack of transparency between students and instructors when it comes to learning and understanding course material during lectures. A lot of instructors are not even aware that students are having trouble understanding the material during a lecture. On the other hand, students are reluctant to raise their hand and interrupt the instructor during the lecture. Therefore, the real time question feature of Links is the perfect solution since it allows instructors to see all the questions students have in realtime and gives the opportunity for students to ask questions without feeling awkward and embarrassed.

Empathize and Define

Anticipated Users

We have outlined three potential users that will interact with our app and have created relevant personas and empathy maps in order to better understand the pain points our users have. This will ultimately allow us to create relevant features that will solve these pain points. We have developed users for students, teaching assistants and instructors using the app.

Student

Student Persona

This Persona Map describes several biographical details of a specific student named Jennifer Webster

Empathy Map

This Empathy Map describes Jennifer’s lifestyle, emotions, and point of view

The student demographic is very broad and diverse, so by focusing on the persona of Jennifer we can meaningfully empathize with students who use the platform. As we are also students, we have an inherent advantage in knowing what a student would want, but we need to be careful to recognize our own biases when making decisions. Generally speaking, students are motivated to pursue relationships with instructors to improve academically, build their professional network and learn about opportunities.

Teaching Assistant

Teaching Assistant Persona

This Persona Map describes several biographical details of a specific student named Alex Berns

Teaching Assistant Empathy Map

This Empathy Map describes Alex’s lifestyle, emotions, and point of view

This persona represents the TA’s (teaching assistants) for each class. The main types of TA’s are Graduate Teaching Assistants (GTAs), Undergraduate Teaching Assistants (UTAs). Since the TA is a student, the age of a TA can vary greatly, but the goal is the same for all TAs, which is to help the instructor run the class smoothly and to assist instructors with classes. The motivation behind becoming a TA can vary greatly as well, including, but not limited to, the want to help others succeed, networking with instructors/TAs/students, money (if a paid position), or padding the resumé. TA’s are motivated to form professional relationships with students to improve their teaching skills and possibly use positive feedback from students as a performance indicator.

Instructor

Instructor Persona

This Persona Map describes several biographical details of a specific instructor named Dr. Steven Havertz

Instructor Empathy Map

This Empathy Map describes Dr. Steven Harvertz’s lifestyle, emotions, and point of view

Instructors tend to be older individuals who are highly educated in their respective fields and usually conduct some sort of research besides lecturing. The goal of an instructor is to ensure that they teach the content of their respective course effectively, while also answering any questions that the students may have. The common patterns of behaviour of instructors include running lectures where they interact with the students frequently and hosting office hours. Instructors form professional relationships with students as a result of needing assistance in research or a student asking the instructor questions.

Exploratory Study Process

Overview

In order to learn more about our users, we decided to conduct user interviews with participants that fit under the three groups of people who would use our app: students, teaching assistants and instructors. We created a set of general questions and some unique questions for each of the groups that focused on their current solution to building relationships between students/instructors/teaching assistants, their pain points and their expectations from an app that would fix it. We also asked them about their experiences and focused on them telling us stories of instances where they had positive and negative relationships. Afterwards, we collected and anonymized the data. Finally, we drew insights from the data we collected which informed us in our direction to solve their problems.

Student Interviews

The general demographics of students we interviewed were primarily 18–23 year old males in STEM faculties which had a total of 9 participants. Students generally thought that in order to build a relationship with their instructors or teaching assistants, the best way would be to approach them during their office hours. Many students did not seem to care about building a relationship with instructors or teaching assistants. Notably, students found instructors or teaching assistants more memorable when they did build a relationship, despite also claiming they do not care to build a relationship. There was a trend in students claiming that there was some initial ice breaker that led them to developing a better relationship with their instructor or teaching assistant.

Teaching Assistant Interviews

The demographics of teaching assistants were mainly coop students who’ve helped with first/second year courses which were primarily 18–23 year old males in STEM faculties where 3 were interviewed. Some teaching assistants felt that when they had a better relationship with students, they were more comfortable and less stiff during tutorials. Teaching assistants seemed to be fulfilled when engaging in a mentorship relationship with students.

Instructor Interviews

The demographics of instructors varied by ages above 40+ and varied in faculties including social sciences and STEM where 3 were interviewed. The instructors that were interviewed wanted to have clear boundaries in their relationships between themselves and students. The main places where instructors interacted with students was before/after class and during office hours. The instructors said they felt more energized during lectures if they had good relationships with their students.

Exploratory Study Results

Affinity Diagram

Affinity Diagram Part 1

Affinity Diagram Part 1

Affinity Diagram Part 2

Affinity Diagram Part 2

Affinity Diagram Part 3

Affinity Diagram Part 3

Using an affinity diagram to organize the observations made from our user interviews and questionnaires revealed several key themes. One of these key themes is communication between students and instructors/TAs, which includes methods of communication (i.e. email) and difficulties in initiating discussion. Another key theme is the effects and impacts of building relationships with instructors/TAs that are perceived and experienced by students. The final key theme we uncovered is improvements to classes and teaching that students and instructors/TAs desire.

After completing our affinity diagram, we noticed a couple things that could be improved in our project concept. We need to consider less involved modes of communication and increase incentive to communicate. Additionally, we need to set boundaries between a professional and personal relationship between the groups of users. The affinity diagram of our user interview responses provided us with a good amount of insight, and we will take what we have learned forward in order to improve our project.

User Tasks

Early on in the process we created a few user tasks that eventually were adapted and changed as we got more feedback from peers, TAs and interviews. We focused more on the social aspects of the user tasks in how a user would create a social presence on their app, how they would interact with other users and what an ice breaker game would look like in terms of execution. Later on, we would develop the game in more detail in our high fidelity prototyping and messaging would be adapted to suit asking questions during a lecture directly to the instructor. Some tasks may seem similar to other platforms like Microsoft Teams, but can be argued they are necessary within the context of this application because we plan to add features to enrich messaging to help initiate conversation and social profiles would be tailored to reduce friction in introductions.

Playing Games Before Class

User task to play games during class

We’ve identified that playing games before class can be a valid ice breaker to begin improving relationships between students and instructors or teaching assistants. We want to create a feature that will allow instructors/teaching assistants to set up games right before class starts in a seamless and easy way. These games will be run for a short period of time (about 5 minutes). Students and instructors need to get to class and set up whatever they need for the lecture. The instructor or teaching assistant would open up the app and start one of the games available. The instructor or teaching assistant has an opportunity to play the game with the students. This game can end on a timer (when class starts) or manually by the instructor or teaching assistant. After the game ends, the instructor or teaching assistant will begin the lecture.

User messaging

User task to message people directly

We want to provide a way for users to interact with each other through instant messaging. Initially we plan on having chat rooms set up by instructors which support students asking questions during class. After the chatroom is created, the user can send a message and await a response in person or in class. Later on we would support private messaging, chat rooms and even integrate with chat solutions like Slack or Microsoft Teams to reduce the burden of using multiple apps.

Task Analysis

Based on our user interviews we developed features for a mobile app to improve relationships between students/instructors/TAs. We noted that an ice breaker typically happened with a student and their instructor or teaching assistant that was memorable. This resulted in positive sentiment from the student about their instructor or teaching assistant. Additionally, we noted that interactions before class is a perfect opportunity to build relationships as it is typically a waiting period. By adding an ice breaker game that is played before class starts, we can give instructors/TAs the option to allow students to get to know them better.

From the hierarchical task analysis we learned in more detail the exact steps a user would undertake when accomplishing tasks. We developed a better understanding of the flow to start a game, play it and finish it in a classroom. This will help in designing the mobile app to streamline this process for them as the task is time sensitive. Furthermore, we learned more about pain points in current communications between users and developed a user task to allow for better instant messaging. We can adapt instant messaging to allow instructors to open a channel during class to allow students to ask questions. Overall, the hierarchical task analysis gave more insight in how users perform their high level tasks.

Ideate

Designing products to be intuitive and effective requires proper considerations for how users will perceive, and interact with the product. Writing user stories, storyboards, sketches and user flows allows for quick feedback. Using these insights, we can iteratively make improvements to our product.

User Stories and Storyboards

To build our design arguments we used the Crazy 8s game. This allowed us to build and refine a plentiful list of features into our core features. User stories and storyboards provide insights on how end users would interact with existing features.

Timeboxed Video Player

Design Argument Statement: As an instructor/teaching assistant, I want to play a video/movie before class starts.

Example User Story: As an instructor/teaching assistant, I want to start a video that runs for a set period of time or stops at a certain time.

Before a class starts is the perfect time for an instructor/teaching assistant to engage with students through a shared activity. By having an app manage and timebox playing videos we can streamline setup, video selection, timestamps, etc.

Private Messaging

Design argument statement: As a student/instructor/TA, I want to message the people in the class so that I can communicate with them.

Example User Story: As a student, I want to message my friends privately to ask them questions about the course.

Students can immediately receive an answer that they need. Relationships will improve as students manage to ask questions and answer questions, as both make the instructors’ life easier through improved communication and student assistance respectively.

Real-time Signals

Design argument statement: As a student, I want to express my confusion to the instructor regarding a specific topic being taught in lecture in real-time.

Example User Story: As an instructor, i want to be able to enable signalling from the app once the lecture starts

The app will keep questions anonymous, while allowing students to also vote on the questions they think are good. They won’t feel anxious asking their questions due to fear of looking dumb/various other reasons.

Ice-breaker Game Room

Design argument statement: As a student, I want to play games before lectures and feel more comfortable in learning and approaching the instructor

Example User Story: As a student, I want to be prompted to join a game for the duration of a few minutes before lectures.

This feature resolves the disconnect between students and instructors by making it easier to comfortably share personal details and making them have fun with each other. Rather than being obtrusive, the feature allows for voluntary participation to keep everyone comfortable.

Social Media Style Question and Updating Posting

Design argument statement: As a student/instructor/TA, I want to be able to reach the entire class easily so I can ask questions, provide information I think might help me/others.

Example User Story: As a student, I want to ask questions that anyone in the class can see and answer

This feature allows the class to communicate outside of class. Including updating others on the proceedings, providing administrative information, or answering each other’s questions. Allows the class to remain connected and give the students the support they need.

Sketches and User Flows

Sketches and user flows of the feature screens help the team get a sense of how exactly the users would use the application. We utilized Crazy 8s for layouts which was very effective in figuring out the best layout for each feature. Then we drew our wireframes and user flows for each layout.

Timeboxed Video Player — Sketches

Timeboxed Video Player — User Flow

Ice Breaker Game Room — Sketches

Ice Breaker Game Room — User Flow

“Complete” is the state at which the game is done

Social Media Style Question and Update Posting — Sketches

Post List Screen

New Post Creation Screen

Post View Screen

Social Media Style Question and Update Posting — User Flow

Chat — Sketches

Chat — User Flow

Realtime Signalling — Sketches

Realtime Signalling — User Flow

For Instructor

For Students

Design Iteration

The analysis of the results of these ideation techniques and feedback from our buddy group combines first party and third party insights. These insights allow us to improve the breadth of our feature set, as well as the overall ease of use of our application.

Ideation Critiques and Reflections

Critique 1: The user flow for the “Timeboxed Video Player Flow” feature was a little hard to read.

Reflection 1: A way to improve this process is to ensure there is a level of clarity for someone unfamiliar with the feature. Adding some text to describe each step and arrows to show the flow of actions.

Critique 2: The “Ice-breaker Game Room” feature seems like a great way for students to learn more about their professors, but it wouldn’t necessarily help instructors/TAs learn more about their students.

Reflection 2: There is inherently an imbalance of how these relationships are formed where the spotlight is moreso on the instructor/teaching assistant. We can help instructors learn about their students by removing the pressure to initiate conversation that is mostly on the students.

Critique 3: I think you could consider the pros and cons of playing the videos at different points in the lecture (at the beginning? The end? As a quick break in the middle?) and finding out what would work best.

Reflection 3: Maybe before class isn’t the perfect solution. We would need to research how having an interruption in the middle of the class or right before the end of class would impact the regular schedule of events within a lecture.

Prototype and Test

Low-fidelity (paper) Prototype and Evaluation

This is the base interface for both features of the app.

This is a standard input element for search across the app.

These are standard buttons that will be used across the app.

Realtime Question Student Screens

Realtime Question Instructor Screens

Icebreaker Game Student Screens

Icebreaker Game Instructor Screens

Paper Prototype Evaluation for Real-time signalling

Clearly, after conducting the interview, the interface for the Question Screen is not intuitive at all. The main things to focus on is adding better labelling for the question list and changing the icons on the page.

Firstly, the name RTS Session is not clear. A better name may be Realtime Question Session, since this makes it more clear what the feature is about, since the original title was confusing due to the word signal.

Lastly, we can change the “+11” icon to a “(Thumbs Up Icon) 11” so it is more clear that this is a voting system, which users are familiar with from other popular websites like Facebook. Moreover, since resolving a question by swiping is not intuitive we should add a “X” button or a “Resolve” button on each question card so that the user can intuitively know how to resolve a question.

Paper Prototype Evaluation for Ice Breaker Game

The notification screens will be combined into one screen and the badge will be replaced with a red dot. The waiting screen should say “waiting for instructor” to be more clear contextually. The user should be told if they won or lost.

The voting screen should make it clear which option was selected, and give the option to choose a different answer instead. We should also clarify if/when an option has been eliminated in order to help the students.

The application should display which classes the user is registered in and show any classes with games running on the main screen so that they can join any game even when the notifications are dismissed.

High-fidelity Prototype and Evaluation

The following prototypes are updated based on the low-fidelity prototype feedback.

We decided to build a logo as a circle to establish that our app is about community, friendships, relationships, unity and trust. We added horizontal lines within the circle to further establish the community aspect of the app and used closure to connect the circle to the horizontal lines. We also added a capital L into the circle in order to connect our app to the logo and leveraged closure to connect the whole design together.

We decided on a color scheme full of orange and blue as these two colors are complementary. Orange is our primary color and is used to express the app is friendly with cheerfulness and confidence. This was chosen as our platform facilities relationships and we wanted people to feel as comfortable as possible. The blue complementary color was chosen to express trust, dependability and strength. This was chosen as a secondary color as relationships are built on trust and we want our platform to seem reliable and emphasize the strength of the relationships being built.

Logo

Chosen Heuristics

The following heuristics are the ones we chose to use during our heuristic evaluation:

  1. Visibility of system status
  2. User control and freedom
  3. Consistency and standards
  4. Aesthetic and minimalist design
  5. Help and documentation

Cognitive Walkthrough

When the user performs an action, we asked them relevant questions to better understand their thought process. Below are the 3 tasks that the users were asked to perform.

  1. [Instructor] As an instructor of the class, you want to set up an icebreaker game for the class.
  2. [Student] Your class is playing an Icebreaker game for the next class, and you want to join and play the entirety of the game!
  3. [Student] You are in class and have a question, and you want to ask it in the Realtime Question Session.

Overall, the feedback was positive from the cognitive walkthrough. The participants were able to walk through the tasks with ease and with minimal confusion.

Conclusion

The design process was an incredible way of identifying the problems our users face, finding solutions that actually address those problems, and building a solution that our users enjoy, while solving their initial problem.

Firstly, throughout the Empathize stage, we dove deep into understanding who our users were, about their physical or emotional needs, and what is important to them. For example, we learned that a lot of students feel socially distant from their classmates and that instructors did not always know their students very well. In the Define stage, we were able to clarify and focus on a specific problem to tackle that actually helps our users. We knew we wanted to help build social relationships in the classroom and within this stage, we were able to identify our goal of helping bring people closer together. Next, in the Ideate stage, we were able to clearly see the problems and needs of our users through their eyes using user stories and storyboards. Lastly, in the Prototyping and Testing stage, we were able to prototype our solutions for the user’s problems and test that our solution actually addresses their needs. In this stage, with a lot of user feedback and a bunch of changes, we were able to come up with real solutions to real problems.

Although we have accomplished a lot, our journey is only just starting. Currently, we only have high fidelity prototypes and have no idea how effective our solution is. Although we can make guesses, we will never know how impactful Links will be, until we get a working prototype into the hands of users and objectively measure communication levels in the classroom with and without Links. Moreover, we would need to continue iterating on our design and making sure that every feature we build and every decision we make is in line with user needs. In order to do this, we would need to continue talking to users and understanding the world from their perspective. Our immediate next steps would be to build a working prototype of the application and begin to measure the effectiveness of our solutions and iterate from there. In the end, we hope Links brings lots of positive and meaningful connections into the classroom and we believe that we are on the right path to make this goal a reality.

--

--