I worked with an instructor at CSU to develop a gamified course for the Design Thinking (IDEA) program. It is an introductory level course and topics include the purpose of college, strategies for educational wayfinding, and the integration of work and worldview. The instructor wanted to make the course more engaging for students so we designed the course to have a superhero journey theme which you can see in the design, layout, and assessments in the course.

1. Confidential Customized for Lorem Ipsum LLC Version 1.0
Gamification in
Canvas LMS
Briana VanBuskirk, Laura Malinin, & Sarah Malinin

2. Presenters
Instructional Designer CSUO
Briana VanBuskirk
RDC Director
Laura Malinin
RDC Operations & Academics
Admin
Sarah Badding

3. Overview
● Take a look at a gamified course in Canvas and its components
● Design elements demo (FreePik, Adobe Illustrator, Canva, CidiLabs Design Tools, PowerPoint)
● Experiences from the instructor and students

4. Objectives 1 Recognize the benefits of course
gamification in relation to
student engagement and user
experience.
2 Identify tools and resources that can be
utilized to add gamification elements to
course pages.
3 Discuss ways you can implement
gamification strategies in your courses.

5. Course Description:
IDEA 110 Designing your University Life
“Application of practical design thinking tools, ideas, and
decision-making strategies to construct an individualized
approach to finding and designing academic and practical
experiences. Topics include the purpose of college,
strategies for educational wayfinding, and the integration
of work and worldview.”

6. Background

7. DESIGN “U”
Designing your
University Life
● Gameboard
● Quests
● Superhero Theme

8. Quest Assignments
Slide decks created by graphic design student, Justin English.

9. Student Samples

10. Finance Videos
Ikigai Framework
Guest Lecturer Brad Sparks discussing finances.

11. Life Journey Videos

12. Demo time
Canvas Course
Walkthrough

13. Tools:
To create the banners and homepage design I used
free vector graphic elements I downloaded from
freepik.com and Adobe Illustrator. I used CidiLabs
Design tools for Canvas page layout and navigation.
If you don’t have these tools, below are other options:
01 | Microsoft PowerPoint
02 | Canva.com
03 | Utilize features of the Canvas page editor

14. Demo time

15. Illustrator
Document Setup
● Open Illustrator
● File > New Document
● Width Minimum: 195px
● Height: Up to you
● Artboards: 16 (for 4x4 grid)
● Select Create button

16. Illustrator
Document Setup
● Select the Document Setup button
● Select the Edit Artboards button
● Select the Rearrange All button
● Make Spacing 0px
● Select the OK button

17. Recap: Freepik
1. Search for and download the freepik item of your choice.
2. Within the .zip file that downloads, there will be either an Adobe Illustrator file or a .eps file. Open
either file in Illustrator.
3. If you’re editing the file, don’t forget to right click on the item and “ungroup” so that you can select
the individual pieces of the design and change them. Note: you may have to ungroup items more
than once, as subgrouped items can be grouped together.
4. Once your design is done, copy and paste it into your game board Illustrator document and
arrange it as desired on that page. Tip: It’s easiest to group your items before copy/paste so it
stays together after pasting it on the game board document.

18. Exporting in Illustrator
When you game board is ready, follow these steps:
● File > Export > select Export As
● In the pop-up window, navigate to the
folder you’d like to save your game board pieces (artboards) in.
● Save as type: select JPEG or PNG
● Check the Use Artboards radio button.
● Select the All option to export all of your artboards.
● Select Export.
● All of your artboards will be saved in the location you selected and then you’re ready for Canvas!

19. PowerPoint Document Setup
Open PPT > Select Design tab > Select Slide Size button
Example size - width: 16in height: 8in (the width should be divisible by 4 if you have 4 blocks across)

20. PowerPoint Document Setup
Create rectangles that fit within the grid. Copy/Paste the box 15x and arrange a grid on your slide
Tip: change the box
color to white or no fill
and the stroke to black
for a clean start
Note: remove outline
on boxes when done.

21. PowerPoint Document Setup
● Create a 2nd ppt with 16 slides (one for each box)
● Adjust slide sizes: Select Design tab > Select Slide Size
button (make slides the same size as your boxes)
● Copy/Paste from your grid so that each slide has the
individual box
● Export the slides so you have individual jpegs

22. Setting up Canvas
● Once you have jpegs to work with, add them to the Canvas page as an image
● Create links from the images by going selecting the image, going to the link menu, and select
course links > choose the page you want to link to
● Scale the box (in order to activate a width/height in the HTML code)
● Edit the code and adjust the width to 25% (no height % needed)
○ Note: 25% is based on 4 images (4 x 25=100)

23. Canvas Code

24. UX
Design
User
Experience

25. UX Design
User experience refers to the overall
experience of a person using a product such as
a website or computer application, especially
in terms of how easy or pleasing it is to use.

26. Survey of
student
experience

27. Question 1
This course has a gamified theme. Did you find this
style and approach to the course to be more or less
engaging than other online courses you've taken?

28. Question 2:
0
1
Feedback Sample 1:
It makes things feel more fun
and exciting
0
2
Feedback Sample 2:
It's very fun to be a superhero and to
have this self discovery class be about
how we all are superheroes in our own
way :)
0
3
Feedback Sample 3
This theme of this course definitely
changed my perspective on this outcome
of this class. I enjoy the class work.
How did the gamified theme of the course
change your approach to the coursework?

29. Question 4
How likely are you to take a course again that
approaches the learning in a gamified style?

30. Challenges & Upcoming Changes
● Snow days - difficulty adjusting design on the fly
● Student backgrounds (some students were seniors, some students in different majors)
● Maintaining points for grading
● Adding badging

31. Thoughts/Questions

32. Thank you.