4.1. User Interface
For the aesthetics of the page we have opted for a retro look that is reminiscent of old NES games. We felt like this style would be easy to work with, and also create a unique and iconic look for our web application. The aesthetic is also referential of old role-playing games (RPGs), where a lot of the battles are held through back-and-forth turn-based interactions between the player's party and a boss character. We adopted this approach in our gamification attempts, which emulate such text-based RPG battles.
| Screenshot | Description |
|---|---|
| The login page shows users our logo and has a single button for logging in, a throwback to the splash screen of games of old. | |
| Users log into the system through IVLE. | |
| An error page is shown whenever the user navigates to a 404 or unsuccessfully logs in. |
| Users can purchase and change their avatars in the dashboard. The levels and experiences gained in each tutorial are displayed here as well. |
| The modules list opens up to show the leaderboard, which ranks users in the tutorial according to the levels they've gained. |
| 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. |