A communication app for Stanford's CS 247 class.

Who are we?

Cathy Zhu

cathyzhu

Kamakshi Duvvuru

kduvvuru

David Rockwood

drock07

Milestone 1: Team Formation and Ideating

When brainstorming for ideas for our project, we first thought of different types of communication. That naturally led us to think of various barriers to communication, like differing languages to lack of engagement. We also tried to think of a few techonologies we wanted to incorporate, though that didn't really play much into the next phase of brainstorming.

Once the flow of our ideas started to slow, we chose three broad topics to focus on and brainstormed more specific ideas within those categories. Interestingly, ideas seemed to come quicker this time. Maybe it was because we had "warmed up," or maybe because more specific topics inspire better. Either way, we eventually settled on an idea (or a combination of ideas) from each of the three topics. We chose to consider pursuing the following three:

Communicating Common Needs

Context

In introductory and intermediate CS classes, such as CS 110 and CS 107 at Stanford, office hours are frequently over-subscribed and inefficient. Though there are online forums like Piazza, students with less experience in CS often need someone to look at and walk through their code with them, like a TA at office hours. However, the ad-hoc ordering and organization at office hours wastes time and causes students to be passed over.

Target Users

Students in large introductory CS classes with a high student-to-instructor ratio

Communication Need

Students are often not comfortable asking what might be perceived to be a "stupid" question, or admitting they are stuck on an assignment. Though many students at office hours might have the same question or problem, the TA often has to answer it to each student individually. Were students able to communicate their status with the homework more easily, getting help on CS homework could be much more efficient and appealing. There should be an app for this.

Communicating With Anxiety

Context

The lifestyles of these individuals place them in environments in which meeting new people is both expected and often holds high stakes (i.e. networking events, conferences, dorms, classes, etc.). However, this high-stakes activity is at odds with their natural disposition, leaving them constantly negotiating between the fear of missing out and their own social anxieties and fears.

Target Users

Students and young professionals with social anxiety

Communication Need

Students and young professionals with social anxiety need a method to meet new people in a way that is more suited to their perspective on social interaction. The fear of anticipated communication in these situation needs to be lowered through some means that speaks to the apprehension of these individuals. We hope to make an app that can do so, possibly by pairing people that will "click" who are at the same event.

Communicating Through Conflict

Context

It's a sad truth that those closest to us are the ones we argue with most often. Conflict with a loved one can be a difficult obstacle to overcome. It is often accompanied with feelings of pride, guilt, misunderstanding, and frustration, all of which impede the resolution of the conflict.

Target Users

Couples or close friends in conflict.

Communication Need

Conflict with a loved one is often accompanied with feelings of pride, guilt, misunderstanding, and frustration, all of which impede the resolution of the conflict. Many times, the parties in the conflict need to be understood more than they need to be right. We seek to construct an app that can facilitate the expressing and understanding of both sides of a conflict, so that it may be easier to resolve.

Milestone 2: Storyboarding and Skit

When took a close look at the ideas we had picked out, we decided that none of the three would necessarily be a good fit for this class. Although they targeted problems and needs that require solutions, they either couldn't be completed within the time constraints of this class, or would be far too difficult to user test in our current situation.

We decided to pick three new ideas to focus on that we believe are much more doable, as well as more directed towards the theme of the class.

Lecture Video Annotator

A product comparable to classroom forums, like Piazza, this app would allow students to ask questions and give answers as annotations to a lecture video. As the student watches the video, he or she can pause the video and insert a question at that time marker. Other students can then answer the question, and later review it as they rewatch the lecture.

Late Night Walk Protection

When the time comes after a long day at the library to walk home alone, it can be frightening. People often pull out their cell phone even if they aren't talking to anyone just to give the appearance of not being alone. This both discourages attackers, as well as gives comfort to the one walking alone. We aim to create a tool that improves this experience. Using the communication tools afforded by a smartphone, we believe an app can both make a person feel safer as they walk alone as well as more effectively discourage would-be attackers.

Brainstorm Tool

When groups brainstorm, they usually run into two different bottlenecks. First, no matter how many people they have, they either run out of markers or run out whiteboard space. Their ability to write all of their ideas is limited by the physical constraints of writing on a whiteboard. Second, after they manage to write down a portion of the raw ideas that were in their mind, there's no easy way to organize the ideas. At best, one can erase and rewrite an idea, putting it where they want it. We've thought of creating an app that would be a virtual whiteboard for those involved in a brainstorming session. Each person would connect through their tablet or phone, and they'd be able to contribute to and collaboratively organize the ideas as they go.

Milestone 3: Wizard-of-Oz Testing

Milestone 4: Functional Prototype I

Link to Prototype: http://duzuro.herokuapp.com/

Features:

View Questions/Answers:
The user will be able to view questions added to the lecture video and their corresponding answers in a sidebar. The user will have the option to toggle between questions that pertain to his/her place in the video and all questions in the video. Further, there will functionality to search the questions or order them by various filters such as popularity or time proximity in this sidebar.

Visual Markers:
The video stream bar will feature visual markers, much like the annotation markers on SoundCloud, to indicate the presence of questions/comments added at certain points in the video.

We felt that the above two mechanisms for viewing questions allow users to easily survey helpful questions, both in the case when they are looking to find a specific question at a certain point in the video or when generally looking to get a glimpse of doubts/discussions.

Ask Question:
A user will be able to submit a question at any point in the video by clicking a button on the video controls, upon which a submission form will show up on the bottom bar of the screen. He/she will be able to submit a question by incorporating rich media such as screenshots with annotation and/or Khan Academy style video annotation.

Add Answer:
A user will be able to click to add an answer to a particular question in the sidebar, upon which a form appears in the bottom bar for submitting an answer. The same functionality for incorporating rich media as described above would be available.

We felt that this video/screenshot annotation system facilitates easier and more rich online learning in that it places the classroom discussion within the context of the class material itself and further enables more learning-oriented (as opposed to answer-driven) communication.

Upvoting/Downvoting:
Users will have the ability to upvote/downvote answers to questions.

Concept Clustering/Tags:
There will be a system for structuring or labeling the video content in time blocks, serving as streamlined tags for generated questions. This would make distilling one's own question and discovering relevant question/answer pairs at a certain point in the video far easier. Further, it could help inform the instructor on the topics that students are most confused about. This concept labeling could either be sourced by students or instructors.

Intelligent Prompting:
Based on factors like when the user pauses a lot or replays the content, intelligent prompts could be given to the student to view or create questions around the concept corresponding to the time block. Further, based on factors like a lack of pausing during certain time blocks and history of contributions, prompts can be made to "expert" users on certain topics after they complete the video.

Implementation Progress

View Questions/Answers:
Questions that have been asked on the video are shown to the user in the "Question Sidebar" with a title and time stamp. Questions and answers can each be clicked to display the detailed view of each.

Ask Question/Add Answer:
An "Ask Question" button is located on the video controls bar, displaying a basic form for submitting the title and detail of the question. An "Add Answer" button is located on each question's detail page. Clicking this will also display a basic form for submitting the title and detail of the user's answer.

Video Functionality:
Video embedding and controls have been built.

Infrastructure:
All the underlying infrastructure (fronted & backend) of the code has been built.

Basic UI

Annotation Progress:
We gave high priority to the development of a rich annotation system, but as it requires all the functionality in the layer beneath it (video, questions, answers) to have been built first and is itself a large and complex feature, we are still in the process of completing it. We have made progress in developing this feature, and plan to have it completed for next week's user testing. However, for the purposes of in-class pilot studies, we feel that the ability to embed and interact with even text questions and answers directly in the stream of the video allows users to experience the rich, contextualized classroom learning we are hoping to deliver.

To Do (In Decreasing Priority):

Complete Annotation Capabilities

Add User Accounts

Add Time Proximity Filters for Viewing Questions

Add Upvoting/Downvoting

Add Concept Clustering/Tags

Add Intelligent Prompts

Milestone 5: User Study

Introduction

We are interested in helping students of online classes build a virtual learning community and make watching lecture videos a more enjoyable experience. Specifically, we are targeting current offerings of Stanford classes with online components. Through previous interviews with students and teaching staff of online classes (e.g. current offerings of CS 155 and CS 110), we've come to the following conclusions:

  1. Remote SCPD students tend to have very little interaction with fellow students (SCPD and local) in their class, leading to a feeling of isolation.
  2. A very low percentage (< 30%) of on campus students attend lecture regularly if at all, and more than half of the students are at least 1 week behind on lectures.
  3. Students often zone out while watching video lectures in the form of browsing other websites, doing other things, or dozing off.

We hypothesize that:

  1. Having a shared lecture watching experience with other students through group annotating and discussion threads will be more enjoyable than watching it alone. i.e. make students more likely to watch lectures and less likely to "zone out."
  2. Being in a smaller group (vs. being in a "public" group with the entire class) will make students more open to interacting with each other. I.e. posting / sharing questions and annotations, starting / joining discussions.
  3. Having supplementary media like diagram and link features will help students convey their annotations and discussions more easily.

We would like to find out:

  1. What kind of social and curriculum-based needs do remote vs. local students have in the "classroom"?
  2. What kind of communication (video-embedded, diagrams, content-independent) is most beneficial for these students? What is currently difficult?

Methodology

User Recruiting

We reached out to professors of two current SCPD classes (CS 110 and CS 155) who helped us reach out to their SCPD students. We recruited local students and TA’s from both classes via email, Piazza, and going to office hours. We also recruited several HCI expert users from the CS 247 teaching staff and students for critiques.

So far, we have:

  • Local Students from CS 110
    • Devin
    • Qianying
  • SCPD Students from CS 110
    • Currently scheduling via Skype
  • Teaching Staff (TAs) from CS 110
    • Sophia
    • Arpan
  • Expert Users
    • John
    • Grace
    • Borui
    • Chinmay

Study Design

We conducted our expert user studies on Thursday and Friday and have since pivoted and clarified our focus. During our expert user studies, we asked each user to:

  • Find and look at an answer to a question on our interface
  • Answer a question on our interface
  • Ask a question on our interface

For our student user studies, we plan to ask each user to:

  • Mark up a lecture for his / her study group.
  • Use previous annotations to get a sense of what this lecture is about.
  • Respond to a post by another student.

Results, Discussion, and Future Steps

Milestone 6: Functional Prototype II

Link to Prototype: http://duzuro.herokuapp.com/

Pivot:

After our first round of user interviews, we decided to narrow our focus to SCPD students and decided to pivot from our original idea based on the interesting needs we learned through their feedback and insights.

That is, the overwhelmingly similar set of needs expressed by all the SCPD students we interviewed was the following: they felt a sense of isolation and, only having piazza and instructor office hours, there was a middle ground of casual, peer interaction that was missing from their classroom experience. They expressed that they needed peer connections for casual assignment help through live and organic interaction.

Considering this fact that students had a greater need for communication around an assignment than lecture videos and a greater need for live, casual interaction rather than formal question & answers, we have moved away from our original idea of a lecture video based forum towards a tool for connecting and corresponding with peers over the course of an assignment.

The following list contains the comprising features of our new idea and maps them to the driving insights from our SCPD interviews:

Implementation Progress:

Timeline:
We have built a basic implementation of the timeline that consists of the various milestones. This timeline is the home page that the user lands on, and serves as a navigation bar at the bottom of the screen as they move to other pages. Since we don't have user profile pictures at the moment, we are displaying the users who are on each milestone on the individual milestone pages rather than on the milestone timeline.

Milestone Framework
The framework for individual milestones, each consisting of relevant resources and communication threads and a register of who is "on that milestone" has been implemented. A form allowing users to add new milestones must be created. Further, this framework must be expanded to allow for multiple assignments per account.

Chat
We have enabled group chat with whoever is online and on that specific milestone. However, private chat has not been implemented.

Pinned Posts
We have allowed for basic "pinning" of posts from a chat, which will then appear in a tab on the milestone page.

Resources
Built basic functionality for uploading resources. We might aim to enable partial screenshots and/or annotations of these resources in addition.

Rich Embedding
Allow for uploading of documents on chat.

Basic Login System

Milestone 7: User Study II

Results

Participant Consent Form

Milestone 8: Final Presentation

View our code on Github or download our code directly.