Design
If you would like to use the Power App prototype (this one has the proper screen navigation functionality and feature layout structure), you may access it at the link below:
This is the screen that will initially appear when the app is open. It will display the name and logo of the app (currently a stage spotlight as the placeholder). Pressing the begin button takes you to the Login Screen.
Once users select "begin" on the entry screen, they will be brought to the login screen. This screen allows users to log in with their account as well as recover forgotten passwords and create new accounts. Pressing the login button with valid credentials takes users to the Home Screen. Pressing the back arrow will take the user back to the Entry Screen. Login and forgot password also take the user to their own screens.
If the User were to click on the 'Sign Up' button on the last page, they would be able to easily input their email and sign up for our application. Then if the user inputs a valid email, they will receive an email asking for verification. If the email is not signed up with our app, there will be red text that appears on this screen, saying to provide a correct email. Pressing the back button in the top left will bring them back to the Log In page.
If the User were to click on the 'Forgot Password?' text, they would be brought to a screen prompting them to input their email to recover their account and reset a new password. Pressing the back button in the top left will bring them back to the Log In page.
After users log in, they will be brought to the home screen. Here, they can randomly select students in their classes by pressing "SPOT!" (takes the user to the Student Selection Screen screen). They can also access other application features from this screen: the people icon in the bottom left corner displays their class roster (Student List Screen), the statistics icon next to it displays overall class statistics (Stats Screen), and the pencil icon in the bottom right enables users to edit their class (Class Edit Screen). The hamburger button allows users to switch between classes (Class Selection Screen) and the cog icon brings users to settings (Settings Screen).
The boxes in the back represent seats within the classroom. The initials correspond to the student who is sitting at that spot. Users may click on the seats in the back to see which student is sitting in which seat. They many also edit and move students around as they see fit.
When the 'SPOT!' button is selected, a randomly selected student name will appear on the screen. This is the student elected to participate. From this screen, the instructor can rank the student's performance as well as mark them absent or unprepared. They can then select another name by selecting the ">" button, or return to the Home Screen (Home Screen) by selecting the check button. There is also a skip button if the professor has some reason they want to skip the student without penalizing them with a bad rating.
The settings screen is accessed by selecting the cog symbol in the top right of the home screen. This is where users can toggle specific options as well as sign out of the app (signing out takes you to the Login Screen). The back arrow takes the user back to the Home Screen. Each setting has an information icon that a user can select to learn more about the corresponding setting. Above is a small sample of all settings that will eventually be included in the settings screen.
This is the class statistics screen. Users of the app can access this screen by selecting the statistics icon in the bottom left of the home screen. Here, instructors can view a dashboard of the overall statistics for the currently selected class. Pressing the back button returns the user to the Home Screen. The statistics screen uses a machine learning algorithm to compare the performance of their students on a given day, and outputs to the user how their students are doing compared to previous weeks / months. The statistics screen does a quick number crunch of the inputted data of the day.
The class menu is accessed by selecting the hamburger menu in the top left of the home screen. Here, instructors can select which class they want to view (pressing the class they want returns the user to the Home Screen). This allows instructors to seamlessly switch in between their classes throughout the day. Instructors can also create new classes by selecting the plus button (takes them to the Class Creation Screen). Pressing the hamburger menu in the top right takes the user back to the Home Screen.
After pressing the plus button to create a new class, users will be taken to the initial class creation screen. Here, they can enter the name of their class and select which type of class they want to create. Currently, the options are "grid" for users who want to assign their students to seats in a grid structure (takes the user to the Grid Class Creation Screen), and "no structure" for users who do not need any seat arrangement (takes the user to the Unstructured Class Creation Screen). The back arrow takes the user back to the Class Selection Screen and the hamburger icon takes the user back to the Home Screen.
If users select "grid" in the previous screen, they are brought to the next screen of creating their class. In this screen, instructors can enter student names and select their assigned seat. They can also adjust the number of rows and columns in the grid using two input boxes. Finally, instructors can import rosters into the app so that they do not have manually type all names. Clicking the back arrow takes the user to the Class Creation Screen. Pressing create also takes the user to the home screen (but completes the transaction).
If users select "no structure", they are brought to this screen. Here, instructors simply type in and add student names to a running list. Like in the previous screen, they can also import a class roster from a file. Pressing create also takes the user to the home screen (but completes the transaction).
The class edit screen is accessed by selecting the pencil icon in the bottom right of the Home Screen. Here, instructors can press a spot on the grid (if the class has a grid) and then select the student to assign from the tray on the right that expands (Assign Seating Screen). Pressing the home or update button return the user to the Home Screen (with update saving changes). Pressing the pencil icon allows the instructor to change the name of the class.
Selecting a student on this screen will assign the student to the spot that was pressed on the grid in the Class Edit Screen and then return the user to the Class Edit Screen. Pressing the back arrow will also return the user to the Class Edit Screen.
The class roster screen can be accessed by selected the people icon at the bottom left of the home screen. This screen allows users to view the roster for the currently selected class. From this screen, users can also select a specific name to view detailed information about that student (e.g. Student Info Screen). Pressing the back button returns the user to the Home Screen.
This screen is the result of selecting a student's name from the class roster. Instructors can view personalized statistics for each student in their classes. Pressing the back arrow returns the user to the Student List Screen. Pressing the pencil icon allows the user to the Edit Student Screen screen.
This screen allows the user to edit any information on the student, including their name, seat assignment, year, and statistics if they discover an error needs to be corrected. The update button and the back arrow take the user to the back to the Student List Screen (with the former completing the transaction). The delete button will simply delete that student from the student list. Note the dotted red lines are an artifact of our prototyping software and will not be implemented.
All screens comply with the color scheme shown above (although some #fe0000 red is also used).