7.1. Initial UI Flow and Mockups
Mockups for each page with the essential functions represented by blocks. Each sketch is arranged in chronological order according to the flow of events upon entering the page. These mockups were composed at the beginning of the project and included all the features we intended to implement, however the final implementation differs significantly from this.
This legend provides a breakdown of the colours used to represent each element and their context.
- Panels are coloured pale blue and represent the background of the page.
- Buttons are violet and are interactive elements on the page that users may click on.
- Frames are in green and represent sub-elements on the page.
- Notifications are in red and are used to catch the user attention.
- Input fields are in yellow and may have text written within.
| Mockup | Description |
|---|---|
| Both students and tutors log in with their existing IVLE accounts to get the relevant data out. | |
| On log-in failure there is a notification to prompt the user to try again. |
| Mockup | Description |
|---|---|
| The tutor is presented with a wardrobe for avatar customisation and a list of modules drawn from IVLE. | |
| Clicking on a module in the list expands out a list of tutorial groups that the tutor is tutoring. | |
| Clicking on a tutorial group in the list expands out the sub-groups within the tutorial group, if any. | |
| The tutor is able to create new subgroups, or select existing subgroups. |
| Clicking on the create new subgroup button opens up this overlay with additional details for creating a subgroup. The tutor is able to name the subgroup, view a list of students and the subgroups they currently belong to (if any) and add or remove them to the current subgroup. The tutor is also able to input a size in the Random Size Input field that will randomly sort students into subgroups of the desired size. |
| Clicking on an existing subgroup opens up a similar overlay, allowing the tutor to rename, add or remove students from the subgroup, delete the subgroup, and open up the lobby page. |
| The layout and functionalities are similar to the tutor's dashboard, except the student is only able to join a lobby when the lobby open notification is shown. Clicking on the subgroup when the open lobby notification is up will bring the student to the lobby page. |
| The lobby is initially locked, preventing students from joining and allowing the tutor to set up the lobby. The tutor is able to zoom, upload documents and images to the interactive whiteboard, draw, and insert text before students join to prepare for the discussion. The tutor may choose to mute/unmute, show or hide their webcam feed and may also adjust the volume of their feed. The tutor can also return to the dashboard, which will close the lobby. |
| Unlocking the lobby will allow students to join, and unlock the chat box and student list. Students are shown by name, and the tutor may set the permissions for each student allowing or preventing editing of the interactive whiteboard. Students can request for help from the tutor through the notifications, which are displayed next to their name in the student list to alert the tutor. The tutor can also begin a battle, which will bring the tutor to the battle room page. |
| Students in the lobby will be able to use the interactive whiteboard with the same functionalities as the tutor, and will be able to adjust the volume of the tutor's webcam feed. Students can also see other student's help requests, and send their own to grab the attention of the tutor. The student is unable to proceed to the battle room page until the tutor has entered one. |
| Mockup | Description |
|---|---|
| Students without permissions to edit the interactive whiteboard may only zoom in and out of the board. | |
| When the tutor starts a battle, the lobby elements will mostly be greyed out except the battle button, to prompt students to proceed to the Battle Room page and join the tutor. |
| In the battle room page the tutor is able to view their avatar, along with the avatars of the students involved in the battle. The students and tutor can communicate through the chat box, and there is a list of each student by name. The interactive whiteboard functions the same, however may be expanded to aid in composing questions for the tutor. |
| The interactive whiteboard is expanded into an overlay over the rest of the elements of the page that can be contracted to return to the previous page and access the other elements once more. |
| Each student is shown in the list by name, along with the subgroup they belong to. The tutor may select students to direct the question to in this list. Once the tutor has selected students to direct the question composed on the interactive whiteboard to, the attack button appears to allow students to answer the question. |
| While the students are preparing their answers on each subgroup's respective interactive whiteboard, the tutor may toggle through to observe their work, and the student avatars update accordingly to reflect the selected subgroup's interactive whiteboard. |
| Once the students have submitted their subgroup's interactive whiteboard, the tutor may rank the correctness of the answer, which will convene experience points to the students in the subgroup based on effectiveness. When the tutor has assigned a rank to each subgroup, the tutor may click on the grade button to send the rankings out to each subgroup. |
| Mockup | Description |
|---|---|
| Graded interactive whiteboards display the effectiveness as an overlay. The tutor may then compose another question. | |
| Previously answered questions and their answers will be pushed up and the tutor may scroll back to inspect them. | |
| Subgroups and their respective scores are displayed in a summary at the end of the battle. The tutor may then end the battle session and return to the lobby. |
| The battle room page for students contains largely the same elements. Students are able to access and utilise their interactive whiteboard as the tutor prepares their own, and an indication is given on the tutor's interactive whiteboard to let students know the question is still being composed. |
| Mockup | Description |
|---|---|
| Students may expand both their own whiteboard and the tutor's. | |
| When the tutor has finished composing, students may send their complete answers to the tutor for ranking. | |
| While the tutor is grading each interactive whiteboard students are shown a notification. |
| When the tutor has finished ranking all the interactive whiteboards for each subgroup, the students may then be able to see the interactive whiteboards of all the other subgroups engaged in the battle, and the respective effectiveness given by the tutor to access the answers. |
| Mockup | Description |
|---|---|
| Similar to the tutor's battle room page, all previous interactive whiteboards are pushed up and may be scrolled to. | |
| A summary of experience and levels gained for the battle is shown in an overlay to students. |