Milestone 3

User Experience Requirements

Teachers:

As a teacher I want to know if my students are in person or online in order to accurately accommodate their situation. (Task - collect attendance information, display attendance information to teacher )
As a teacher I want students to easily find a way to class (online or in person) so that they are not late or absent. (Task - direct students to class)
As a teacher I want an easy way to see how my students participated in class in order to take accurate attendance. (Task - taking attendance)
As a teacher I want an easy way for students to participate in class so that they don’t have to stress. (Task - allow students to easily access class)
As a teacher I want to communicate to my students how many seats are available in the classroom in order to utilize the space to the fullest (not over crowded or empty). (Task - planning classroom layout)
As a teacher I want to manage my zoom links for lecture and office hours to make them more visible and accessible to all. (Task - efficiency, simplicity)

Students:

As a student I want to know if there are seats available in my hybrid synchronous class so that I do not attend a full class and then get kicked out. (Task - attending class)
As a student I want my professors to know how I plan to participate in class in order to be marked present. (Task - get credit for participation)
As a student I want to be able to easily find the zoom link for my online lecture in order to attend class online and on time. (Task - attending class)
As a student I want to be able to reserve a seat in the classroom because I learn better in person. (Task -signing up for in person instruction)
As a student I want to be able to easily maneuver to important links and have them displayed. (Task - ease of use)

Choosen User Stories

Teacher Story Justifications:

Keeping track of online and in-person students in a hybrid synchronous class can be a tedious task. By decreasing the capacity of zoom sessions and in-class seating, the professor can create a signup sheet where students are required to input their own information and be more self-reliant. Users state how and when they plan to participate in lectures thus making reservations for the limited accommodations. This enables the instructor to see who should be present and in what way. This also gives students the option to choose between in-person or online lectures based on availability and monitor their own attendance
We think this is one of the most important parts of our apps because one of our main targets is for the app to better fill classrooms to capacity. By allowing this communication between teachers and students, we can ensure that the students scheduled to attend class are interested in attending, and allow students who decide not to go to a physical class be replaced with a student who wants to attend in person
We want to make sure that teachers have a clear way of seeing their zoom links as well as making sure that students can easily find them as well. This will make it easier to find the specific link for your class and sign in

Student Story Justifications:

This is the user story that originally inspired part of our application. When the university switched to online synchronous, online asynchronous , hybrid synchronous, and hybrid asynchronous classes it was hard for students and teachers to adept and know clearly how to approach these new forms of learning. A lot of this confusion was with lack of communication. We want our application to be the bridge to help people understand, and for students that starts with clearly knowing where to be and when. Which is why we chose this as one of our user stories for the app
There’s currently no way for students to let teachers know how they plan on attending class. Because hybrid-synchronous makes it difficult for teachers to track attendance(due to multiple classrooms: zoom and in person), students are often worried that their attendance was not counted. This is especially problematic because attendance is typically a direct part of a student’s grade. There should be a consistency and ease of access to attending class and get credit for it, whether it’s online or in person

Brainstorming

Teacher Wireframe Brainstorming:
3.

Choose your desired class
Calendar to choose specific day and time
Option to choose between online or in-person attendance
Shows zoom/seating availability and limitations
Displays a list of signed up users and their status
Confirmation page
Shows all relevant info on course such as professor name and contact info
Form for students to type in their own personal info
Send zoom link or assigned seat to student

The teacher can have a welcome screen and class list that mirrors student view
The teacher will have a form to create classes
The teacher will need to enter data that is specific to each class they manage

First screen might have the list of classes the teacher is a part of
Have each class be a box
Under each class have the zoom links for class and office hours

Student Wireframe Brainstorming:
1.

First screen for student user is list of enrolled classes, plus sign to add class
Or just a search bar to find the class
Might have to lead enrollment to teachers
Have a grid of available seats where students can click and pick a seat
Quick add/signup button?
Do a pop up once a seat is clicked or go to a new screen
Show how many seats are available/taken i.e. 11/15
Zoom link on top of the page
Also maybe destination tabs on the top or side (possibly make them dynamic)

Some kind of home screen that has a button that says “participation option” or something similar
Leads to screen for student is list of enrolled classes
Click on class
Gives schedule of the class in the week, can click on any day of the week the class is scheduled, which leads to a page described in the next bulletin
Given an option to select “online” or “in person”, with the number of seats remaining in each showing next to each option
Selecting “online” shows student the zoom link and gives them access
Selecting “in person” shows the class location and time

Alternative Designs

Teachers:

3.

Wireframe 1: Students can easily choose one of their own courses and select a specific day for attendance. Students can then see available spaces in class or on zoom as well as the max limit. Teachers can determine who gets credit based on the student id’s on the chart. Confirmation is also needed for attendance by providing the required information including a student email. An email will be sent when submitted that provides the appropriate seating or links.
Wireframe 2: Teachers can see a comprehensive list of students who confirmed their attendance as well as their preferred method of learning. Students can choose one of their own courses and add themselves to the roster by inputting their information. Class information can be seen clearly and visibly for those without access to a syllabus. The last page warns users to check their emails because a confirmation is sent to their student account with access to the seating chart or zoom links.
Wireframe 3: Students can locate and access their own courses easily due to the large buttons and fonts as well as the information about the class itself including times, professor name, and contact info. Students can then submit the required personal information and choose a preferred method of learning. The last screen is mainly for the teacher to have a list of all the students who confirmed their attendance as well as provide feedback to the students to check their emails for seats or links.

Download

5.

Wireframe 1 + Wireframe 2: Provide a homepage and view of classes managed that mirrors student view so teachers will have a similar view of class capacity to the student view.
Wireframe 2: Teacher’s can add/manage a class by adding information for each class such as classroom capacity, day of week, location, and time.

Download

6.

Class Orientation: There are many different ways to present a class to a user. Could have them all in a row or a grid. Or just show one at a time. There are also different ways to organize the information within a class. Left to Right, up and down, or just segmented.
Editing the Class: A Teacher will need a way to change the zoom links for the class. We have added an edit class button that will allow a teacher to change the link. Whether we present this function as a pop-up or new screen will mostly depend on how we decide to orient the classes on the main menu implementation.

Download

Students:

1.

Menu Bar Location: I had two ideas for the menu bars. Either have them on top of the screen or have it take up a side of the screen. The goal of these menu bars is to allow simple navigation through the website. It needs to be easily visible and consistent throughout the different pages. There are many other ways to create a menu but I am fond of these two because they are quite common. I went to a couple of different websites and took note of where they put their menus and navigation tools to get a good idea of what is common and popular.
Desk Signup Orientation: I wanted to make something visual, so my original design is an array of interactive squares that represent desks in a classroom and have them change color based on interactivity. If this was too complicated or non intuitive I made a simpler design that was just a list of each desk with written out information about which desk it is and its availability.
Pop-up or New Screen: After a student picks a desk they need a way to claim it. I was thinking of a pop up screen that would ask for the users information, but the first idea is not always the best. So I created another design where the sign up is its own page. I think the decision on which one to go with comes down to how much information we will ask for. The pop up is better for short forms because of its size but if we require a lot of information it may be worth it to make the new screen.
Boxes or Ovals: While I was playing around in XD I remembered I could turn rectangles into ovals. I thought this might make the design smoother and more modern. The rectangles are simple and fit well with the rest of the screen, but the ovals could provide a splash of something different.

Download

2.

Home Screen: Two different designs of homescreen. One is just a title page while the other would actually serve a function. Similiar to week at a glance you can select a day and see the classes for that day. Wanted the option because its easy to add but we might just want a plain home screen.
Class Style Still trying to determine how we want classes oriented, list or grid. Usually a student is only taking a small amount of classes a semester, anywhere from 1-6+. We can use this information to our advantage and find the average number of classes a student takes. If we know on average how many classes a student takes, we can develope a design that best suits that number.

Download

Mockups

Teachers:

3.

Download

5.

Why: I made the decision to use a vertical table for teacher’s to fill in information for each class as it allows more detailed information to be available for each class, as needed. The teacher can access this form from the same page they view classes.

Download

6.

The Simplisity of a Pop-up: We decided with the Pop-up because of how simple it is. It allows quick the user to see where they came from and gives them an easy way to exit. Out of the alternatives this seemed like the easy winner.
Class Boxes: To keep the theme across the board we decided to go with boxes. The ovals seemed tacky and didn't fit in well. Rectangles take up more space but allow us to easily fill it in with information, while text in ovals can be a little trickier since text can potentially peak out of a rounded corner if not carefully managed.
New Theme: We went with a darker blue for a few reasons. One, it stands out a little better between the white and grey. Two, it seemed more professional while adding a bit more character. Also, we just liked how it looked.

Download

Students:

1.

Download

2.

Days of the Week: Having each attendance day on the home screen seemed like the easiest way to implement one of our functionalities. Also gives user an easy shortcut to specific days. Might have to add the date to prevent confusion.
Quick: With how the navigation is set up a student should have quick access to class time and location. Or Zoom link and password if they decide to be online that day.
Consistent: Sticks with the same theme as the other wireframes. Uses the top menu bar option and rectangular class blocks. Colors need to be updated but is following the general color scheme.

Download

Video

Refrences

Adams, Caralee. “Coronavirus 'Confusion': Teachers Had Little Training for How to Do Online Classes.” USA Today, Gannett Satellite Information Network, 17 Apr. 2020, www.usatoday.com/story/news/education/2020/04/17/coronavirus-teachers-online-class-school-closures/2972529001/.
Describe in Brief the Different Types of Graphical Menus in HCI Applications., www.ques10.com/p/2585/describe-in-brief-the-different-types-of-graphic-1/.
Gillis, Orlee. “7 Rules for Website Color Schemes: Elementor.” Elementor Blog, 25 Jan. 2021, elementor.com/blog/website-color-schemes/?gclid=CjwKCAjwvMqDBhB8EiwA2iSmPGY9TsazQiMmiKRmHmCAIsjsiZArD9rTqy9SzrQc8OSG92u88D5LVhoCeDQQAvD_BwE.
Worcester, Daren, et al. “How Are Schools Tracking Attendance During Distance Learning?” Blackbaud K-12 Resource Hub, 21 Aug. 2020, k12hub.blackbaud.com/blog/how-are-schools-tracking-attendance-during-distance-learning.