January 2022

iN2L Games

Interactive content and games created for use on the iN2L platform.

Project overview

Design a new look and feel for the iN2L game platform.

I.

Project duration

October 2021 to January 2022

II.

The problem

The current games lacked consistency, accessibility, and functionality.

III.

The goal

Update several key games to a new standard of accessibility and address several key requests from customers.

IV.

My role

Product designer designing and developing the iN2L game platform.

V.

Responsibilities

Meet with members of the game development team and gather information, iterate designs based on feedback, and test game code with customers.

Understanding
the user

  • User research

Usability research: Summary

All of my user feedback came from members of content team, and sometimes video of demonstrations. While not ideal, this did provide me with useful observations. As a result, I wrote a Game Design Guide.

View Game Design Guide

Usability research: Pain points

1 Font Sizes

Establishing guidelines for font sizes based on device and viewer distance became essential for defining projects.

2 Configuration

Users wanted more control over their gaming experience, such as changing difficulty, timers, and number of players.

3 Bugs

The process of improving the gaming experience was hindered by an infestation of bugs in current games.

The design

  • Mockups
  • Frontend Code
  • Accessibility

Bingo

Out of all the games, Bingo had the most requests for improvement. I learned more about designing for seniors from this one project than any other at iN2L.

Frontend Code

I discovered some opportunities for improvement in the frontend code of the games. They had been developed over several years and were in serious need of an audit.

1 gulp.js

All website assets including html, css, and js were being edited manually. I implemented a task runner to speed up the process.

2 sass

CSS was being edited manually. I implemented SASS so we could have consistent variables for color and typography.

3 partials

I added html partials to share common HTML code, such as HEAD, modals, and navigation.

4 optimization

Minifying code, optimizing images, and creating zip archives.

View Github Repo

Accessibility (a11y) considerations

1 Font Size

Font size based on device and distance from screen.

2 Color

Text color contrast and color states.

3 Consistency

Consistent UI elements and language.

Going forward

  • Takeaways
  • Next steps

Takeaways

What I learned:
Educating team members can be the most difficult part of the design process.

Next steps

1

Continue to process feedback

2

Create responsive games for mobile devices