Interaction Design with Adobe XD
Gamification of Concordia’s Moodle Pages
My main goal for this project was to transform the current Concordia Moodle page into an interactive and engaging platform that would motivate students to use it frequently. I aimed to incorporate gamified elements and playful features to make the website more enjoyable to use and encourage students to view Moodle as a valuable resource.
Gamification Assignment - Interactive features
Navigation bar
I added a navigation bar with buttons including all the main features of Concordia’s Moodle. The user can then move smoothly from one page to another.
Texts and resources
They are all included as links in the Weekly tasks box for each course.
Stars progress bar system
When a new task is added, an empty star appears. Click the star to complete the task and earn rewards that increase the star meter. The yellow message indicating the task's completion disappears after the task is done.
Course progress bar
The progress bar increases in opacity and moves when assignments or exams are submitted. This motivates us to complete the work faster.
Course badges (Homepage)
These badges direct the user to the “My courses” page which contains the list of all the completed and in-progress courses. These icons are also larger than those on the navigation bar, suggesting the user start exploring the list of courses first.
Colourful accomplishment badges
Upon opening the website, the vibrant badges immediately catch the user's attention. This motivates them to engage with Moodle more frequently in order to earn these badges of achievement. Additionally, it piques their interest and prompts them to explore how they can accomplish these goals within a timeframe.
Discord link
Students can access the Discord Chat Room for their specific class by clicking the link located at the end of the course task list. They can then collaborate with other students by asking questions and providing assistance.
→ To encourage users to engage with course content
→ To centralize the overall learning experience
→ To encourage users to explore course content
→ To invite users to connect with other students