Live Class Reactions and Q&A Platform

A IOS User Interface Design | UCSD course: Cogs120/Cse170

Overview and Background

As a student in a big university, have you ever been in a long line asking questions after class? Were your instructors unable to answer your questions in class due to the time constraint? Or, do you just feel uncomfortable talking in front of a large group of people? These are all the communication problems we experience in a class with over 300 students in a big university. 

We wonder if there is a way to improve the interactions under the constraint that school has to offer large classes to satisfy the enrollment needs. I worked with Eryue Xu, Wenlong Qiu, and Jiayu Fu to found out. Instead of improving conventional communication styles like hand-raising, we would like to bring out the notion of “creative collectivity” in a mass class environment. Our goal is to make the communication more efficient in a bi-directional style between students and professors.

Problem Statement


Instructors and students have problems communicating efficiently and simultaneously via instant feedback in a mass lecture environment. 


Problem Statement

Most of our team members are international students who need to make adaptations to the way classes are taught, and the interactive teaching style in a university in America. The first obvious difference we notice is the wide use of computer and mobile phone in classrooms which are not usually allowed in China. Soon we found that the devices are not distracting or affecting us as much as the actual learning style of students here, such as the way they take notes, ask questions, talk to each other, and their thoughts during the in-class discussions. We found it hard to quickly feel natural and comfortable with the environment sometimes. We were also not active enough in front of so many people to express our ideas, and learn what we want to learn. For this problem is common among international students like us, we would like to make the environment more compatible for all students to get involved efficiently in class.

In addition, we realized that this has to be done in two directions: students and the instructor, when we talked about how some instructors also feel weird about how inactive some students are. We believe we should make changes that get the instructors involved as well so that we can cooperate to create a better interactive atmosphere in the classrooms. 

Our inspiration for creating an anonymous virtual platform for live communication came from: 

1) The increasing usage of electronic devices for studying purpose in class; 

2) It is easier to talk about difficult materials and answer questions immediately in person for the best understanding and memory, rather than after class. This applies for both students and instructors.

Competitive Audits

We conducted research on the popular online platforms for class communications to find the pros and cons. We also included “iclicker” which is a physical device but connects to an instant poll system, very commonly being used in UCSD.


Storyboard 1: An instructor is bothered that students always email her about the class material after class. She finds an app that allows her to receive instant feedback from students during lectures and now she can address students’ questions and concerns on the spot.

Storyboard 2: A student is too shy to raise her hand and ask questions in class. She is also too shy to communicate with her fellow classmates. There’s an app that helps her to anonymously submit real-time comments on slides and lecture contents so that everyone who has answers to her questions can help her.

Storyboard 3: Emily enrolled in a class by herself and was not able to join an in-class discussion because she was alone and didn't know anybody in the class. She found an app that can pair her with another student in the same boat and enable them to discuss via an online chat. Now she feels more engaged and comfortable.

Low-fidelity Prototype

Paper Prototype 1: Student-Instructor Focused (For storyboard 1 & 2)

It allows better communication between the instructor and the students. Focus on instant feedback from students to instructors mentioned in the problem statement. Also solves the problem of lack of feedback between students and instructors shown in storyboard 1 & 2.

Home Screen: 

has two buttons for students and instructors to 

go to their respective screens with specific features. 

For instructors:

  1.  Login view controller for instructors to log in

  2.  Select the class view controller for instructors. 

  3. View controller that displays the number of active students in real-time to let the instructor know that he or she can begin the lecture.

  4. Live comments from students to let the instructor know how the students feel about his/her materials.

  5. A slide-in menu for fast navigation to different tabs/views. 

(A popup window shows to remind the instructor to explain more about the material when the more than 50 percent of class feedback is negative)

For students:

  1. Login controller for students to log in and to add their classes

  2. Select class controller to select current lecture. 

  3. View controller that lets students input comments that shows on the instructor’s screen. Also, students can react/express how they are feeling about the material. Scroll down to see the preview of comments history from other students.  

  4. A detailed view controller that shows complete expandable comments

  5. Students can create their own discussion boards as forums

  6. Slide-in menu for quick navigation between view controllers.  

Paper Prototype 2: Student-Student Focused (For storyboard 2 & 3)

It allows better communication in-between students, matches the motivated idea that students should be encouraged to communicate with each other, solves 2 & 3 storyboards’ lonely and shy students’ problems. 

For students:

  1. For students (includes home screen for both the student and the instructor)

  2. Join the class by entering a unique class code

  3. Click to find a partner in the same class

  4. System processing: wait to be paired

  5. Paired successfully

  6. Start an online discussion about the class material

For instructor

  1. Generate a unique class code. View controller that displays the class code and the number of active students in real-time.

  2. Start pairing students. End the session by clicking the button

  3. After ending the session, the instructor can leave the class or start another round of pairing.  

User Testing

We used 10 criteria of “heuristic evaluation” to test our flow by showing the user our paper prototypes. By collecting the feedback under each criteria, we compared the advantages and drawbacks of each prototype, as well as some advice for improving our flow in each. After analyzing the evaluation feedback and scores, we decided to make these changes in our next stage.

Reflections and Checkpoint

Since we already had two prototypes at the beginning, our goal was to decide the exact flow to keep for our further design. Under the consideration of the evaluation, and the feedback we got from other peers in the discussion section for this class, we found that the first flow is more unique than the second. The second flow is more close to the existing feature of Kahoot, for example, which makes the flow not as pragmatic to develop further than the first.


There are some unique features of our first flow that reinforce our design approach too. It is a live comment interaction system which provides simple reaction signals which are emoji buttons that allow the instructor to know when to look at the live comments and answer questions instantly in class. The feature of live and anonymous feedback adds a way for the instructor to know the students’ confusions more quickly and clearly, and allows the students who do not have a chance to talk in class to raise their questions. Our combination will increase the efficiency of communication between students and instructors in an innovative way in big classes. 


Thus, we decided to focus on the first prototype in our further design and development.

Alternate Design

We developed a few versions of the comment entry page for the student's side. We had discussions and received comments on whether jumping to a new page after the comment box is clicked is fluent and conventional for users in the class discussion. After testing in our own group, and under the consideration of aesthetic design, we selected two versions to move forward for the A/B user testing.

Version A: our original design, jumping to a new page to type comments

Version B: a single page with chatting window style

A/B Testing

We sent out a testing link which randomly assigned the version to participants for testing. We recruit our participants by randomly selecting target users who have not been tested for our previous version before.

We asked the users to send out comments to the class discussion on our app. We collected both quantitative and qualitative data from the testing. Statistically, we observed a higher number of comments sent and fewer numbers of clicking on the comment page. However, due to the relatively small sample size, we did not conclude a significant difference between these two versions with a chi-squared test. However, we did get some useful feedback as our qualitative data. We learned from the users’ feedback that they preferred version B than version A, which is consistent with the numeral data, regardless of the result of the chi-squared test. We decided to select version B as our final version.

High-fidelity Prototype

Student’s side

Instructor's side

Login Page


Marketing Video: 

Pitch Video: 

Walkthrough Video: 


Use your iphone to click into this link. Download testflight first, then click the second app to download our app. Or scan this qr code with your iphone.

 © 2020 by Jing Lang. 

  • LinkedIn
  • Instagram
This site was designed with the
website builder. Create your website today.
Start Now