Milestone 3
Overview Video
A. User Stories
As a Teacher I want to…
- ask my virtual class a question in order to measure their understanding of the current topic.
- ask a specific, virtual student a question in order to see if they are paying attention.
- see the results of past class questions in order to see how my class has been progressing.
- directly message a student so that I can check on their class progress.
- check direct messages from my students so that I can stay in contact with them and help them with issues.
- check the attendance of students in the virtual meeting so that I can see how many students are not attending class regularly.
As a Student I want to…
- show the teacher that I am engaged so that they feel like they are teaching to an active audience.
- demonstrate my understanding or lack of it so that the teacher can appropriately pace the class to the students’ needs.
- be able to ask my teacher a question so that I can better understand the current/previous topic.
- be able to receive assistance during class so that I do not have to use other forms of communication outside of class to reach the teacher.
- be able to see my previous scores (and the correct answers) so that I can track my progress and use the in-class practice quizzes to study.
Most Relevant User Stories
- ‘As a teacher, I want to check direct messages from my students so that I can stay in contact with them and help them with issues.’ & ‘As a teacher, I want to directly message a student so that I can check on their class progress’ & ‘As a student, I want to be able to receive assistance during class so that I do not have to use other forms of communication outside of class to reach the teacher.’
- These user stories are very important because they emphasize the communication elements of our solution that have been lost due to remote learning. A Pew Research Survey found that 90% of people say that communication is the most important skill for children to get ahead in the world today[1]. By creating a solution that increases communication in asynchronous classrooms, students will be able to grow both in their academic learning as well as in their communication skills.
- ‘As a teacher, I want to see the results of past class questions in order to see how my class has been progressing’ & ‘As a student, I want to be able to see my previous scores (and the correct answers) so that I can track my progress and use the in-class practice quizzes to study.’
- This pair of stories is also very important to our solution because it allows both the instructor and student to view their past mistakes. This allows the instructor to view if many students missed the same questions, and allows the student to see which questions they have missed.
- ‘As a teacher, I want to ask my virtual class a question in order to measure their understanding of the current topic.’ & ‘As a student, I want to demonstrate my understanding or lack of it so that the teacher can appropriately pace the class to the students’ needs.’
- This pair of stories is important because it lays out the quiz aspect of our solution. The instructor may ask the entire class a question or single out a student or students to answer a question in front of everybody. The student is then given a prompt to answer the question.
B. Wireframes
Wireframe 1 (Ben Weinand):
- (Home Screen) Ben wanted to keep the interface simple and consistent throughout the pages so it was easy to find options no matter where you are in the app. He also wanted the chat window to always be visible so that it is easy to check messages or chat with your classmates.
- (Messages Tab) The color scheme was a work in progress but Ben was using complementary colors of purple and green for the example.
- (Student Grades Overview) When viewing a tab like messages or grades, the info of that tab replaces the main menu options so that the user is not overwhelmed by the amount of options on screen. The user can also easily get back to the main options by clicking the back arrow.
- (Teacher Grades Overview) When viewing a class, the popup covers the main area of the screen so that it is apparent what the user is looking at. This popup can also be minimized to make room for other features.
- (Group/Teacher/Fullscreen Zoom) When in a class, there are multiple viewing options, some of which are only controllable by the teacher, such as the "restrict chat" option. It is simple to switch between viewing modes, the user just double clicks on a portrait to maximize them and again to minimize them.
- (Pop-up Quiz) When the teacher assigns a question it pops up in front of everything else so that there's no chance of missing it. It can be minimized to access other features of the app.
- (Quiz Tab) Users and teachers can create their own questions and review past or practice questions that have been added to the class.
Wireframe 2 (Andreas Marsh):
Andreas chose to create a mockup that incorporates elements of all three user story groups.
As a response to story group 1, Andreas decided to add a chat feature on the zoom screen of his application similar to that of Twitch.tv so that students would be more likely to engage with the chat during class. Andreas also added the feature to easily send a private chat to the teacher in case a student wished to send a question anonymously during class and also an unmute button in case verbal communication was required. Also, a messages tab exists and functions similar to Outlook but is separated based on class inboxes, allowing conversations to carry on outside of class time between both teachers and students.
As a response to story group 2, Andreas created a Grades tab where students can review past assignments ranging from previous in-class assignments to tests/quizzes.
As a response to story group 3, Andreas created a wireframe for a pop-up quiz overlay that the teacher could turn on mid-lecture to access how students are comprehending information as well as an Assignments tab that displays active assignments to be done outside of class.
By having all of these functions built into one application, students will be less likely to miss information that is crucial to their class performance and will be more likely to engage with their teachers as there are fewer barriers between the student and teacher thanks to this application.
Wireframe 3 (Sahil Balhara):
- (Student's Screen) This page provides the student's previous questions answered and results. An explanation is also provided in case the student answered incorrectly. This is a good concept so all questions answered can be accessed together whenever the student wants to.
- (Teacher's Screen) With a pie chart statistic, the teacher can easily distinguish the class's response from a question in class. If there is more answer variation, that means the teacher can go over the topic next time in class.
- (Questions and Quiz) This design was chosen because it's a simple UI that asks the student a question with four multiple choice options. Based on the answer selected the class results screen will be updated on the teacher's end, and eventually the student's screen once the whole class has answered.
- (Communication) It was important to ensure a simple and efficient messaging system between the teacher and the student. With a chat bar, the student can send messages privately during class and wait for a response from the teacher when he/she gets time. The teacher can also provide feedback on the student's class progress.
Wireframe 4 (Flavio Salgado):
- (Launcher Screen) This page shows a menu with different actions that a user (student or teacher) can do.
- (Student Grades Screen) This page shows all questions that have been asked during class with the grade the student received.
- (Student Review Screen) This page shows what a student would be able to see when clicking on a past question. The student would be able to see what question was asked along with the correct answer.
- (Teacher Grades Screen) This page shows what teacher would see when they view old questions. They would be able to view the class average along with how individual students scored on the question.
Wireframe 5 (Desmond Adonle):
- (Student's Quiz) This the zoom view that we all know and love but with a dedicated section at the bottom allowing for viewers to be more interactive. In this case, Desmond used it to display a quiz that the instructor has created for the lecture.
- (Instructor’s View) This is the zoom view that the admin sees. It accounts for the added dedicated session along with making admin controls a little more accessible for easy access. The left sidebar displays results to the quiz question displayed to the students.
- (Students Quiz Result) The same section that was once used to administer a quiz question is now being used to display the results to that same quiz. Along with that is a text bar at the bottom allowing students to ask a question regarding the question and an option to ask anonymously for students who want to an answer but don’t want their class mates to know who asked. (The instructor could have an option to see the names, but regardless, all other students would not be able to see who asked).
- (Student's Question about Result) When the student asks a question, it will be displayed for everyone in the call to see. Any student can click on it to give an answer in the chat. Displaying it front and center in the call instead of tucking the question away in the chat allows not only the instructor to be tuned in, but all the students. It helps ensure everyone stays in tuned with the discussion. Instead of making it required to move their eyes away from the zoom call to interact with a discussion in the chat and being at risk of staying in that side discussion, your eyes an attention stay in the zoom call and the main discussion at hand. This is similar to Twitch streamers overlaying their text and chat to make their streams more interactive. The student can feel more like they’re in class and less like they’re just live-streaming a lecture.
- (Instructor’s Question View) The instructor can see the questions they receive about the quiz right below the quiz results. They can either answer it within the zoom call or type it out for the answer to be displayed in the chat.
C. High Fidelity Mockup
Below is the interactive high fidelity mockup 👇
Justification: Andreas’s wireframe was chosen to be turned into the higher fidelity mockup due to it having the most overlapping features among all of PleaseCompile’s wireframes. Andreas’s wireframe, as well as Ben’s, combined various features into one easy-to-navigate application which included integrated zoom, chat, quiz, and review features to aid in both the students’ and teachers’ experience and ease of use. Due to Andreas’s wireframe already being fairly high fidelity it was clear that his would be easiest to turn into a mockup. New to the mockup is the addition of a show video button built into the chat so that students and teachers can have face-to-face conversations. This will allow students to more easily present complicated questions and allow teachers to better explain concepts to students who may need extra assistance. Try pressing the yellow ‘Show Video’ button when on the ‘Zoom’ tab to give it a look.
Another new feature to the mockup is the addition of a teacher-side grade viewer where teachers can have both a detailed view of how students did on each question of an assignment and also use the quick overview feature to easily see if a particular question was more difficult for students than others. Feel free to click to the ‘Grades' category of the top navigation bar and then press anywhere in the middle of the screen to see the teacher grades viewer. Besides these new features, the rest of the design was kept similar to that of Andreas’s original wireframe. The reason for those initial design decisions can be seen above underneath his initial wireframe.
Download Pngs
Download Source File
Resources
- Sara Kehaulani Goo. “The Skills Americans Say Kids Need to Succeed in Life.” Pew Research Center, Pew Research Center, 19 Feb. 2015, www.pewresearch.org/fact-tank/2015/02/19/skills-for-success/. Accessed 8 Apr. 2021.