Bachelor Thesis: Accessibility in Gaming

Level Up Inclusion!

This was my Bachelor Thesis for my graduation at Danish School of Media and Journalism. The assignment was to create an idea or identity for an excisting company. I chose the live stream website Twitch, and created a countdown for a campaign concept, made for a community of gamers with disabilities, sharing the awareness of inclusion for everyone, in the gaming universe.

🏆  Graduated Visual Communication in Interactive Design

Subjects: Interactive Design, Visual Identity, Motion Design

SoMe-Mockup1

Concept Teaser

1337 and Numeronym

The word accessibility can be shortenend as A11y. This is called a numeronym: Shortening the word using the number of characters between the A and Y. 

In the gaming community, 1337-speak (Leet) is commonly used as a reference to hacking, typing words with numbers instead of letters. The numeronym A11y is therefore, sometimes read as "ALLY". Here the title of the campaign is reffering to both 1337 and the numeronym for "Accessibility". 

A11y-logo-loop_1

Product mockup

The interactive product I presented was a landing page for the campaign on Twitch, before the launch. 

Bonus:
1. Motivating game developers to create accessible games.
2. Helping gamers understand how this may benefit everyone.

Why: Creating awareness around accessibility

What: Share experience among gamers about accessibility

How: Include gamers from several different disabled communities

Comment1-mcringleberry

Process and Affinity Map

In my research in accessibility, I mapped the different elements of disabilities, the barriers, and possible accessible solutions, and find parallels as to how this may benefit the common user, therefore creating inclusion and comprehension for everyone.

Preview-Combi-4

Colors

I took the original colors from Twitch's own identity, and adjusted them. The colors are tested for contrasts, AAA being the highest rating. This makes the text easy to read for the user. The green is inspired by the green tags from the AA and AAA-ratings, and is used in logos and icons, to make it more playful, and create an eye-catching experience.

Colors
Font-tests-board

Font

I researched what makes a font accessible. One of the important constraints for me, was the difference between letters and numbers, in order to make text easy to read, for example a upper case "i", lower case "L", and the number "1".

(I, l, and 1 doesn't meet the requirements here, because the font sucks)

Font
Comment2-DixieBorkBot2

Assets and Illustrations

There are generally two types of assets, made in Figma and ProCreate:

  1. Pixel stickers which are retro game references
  2. Hand-drawn illustration, representing real-life objects
Pixel-elements-overview
jugrei_Illustration01-Sign-Lang
Illu.CartoonDixie.ArtBork
jugrei_Illustration17-Controller
jugrei_Illustration06-Cane-w-fill
jugrei_Illustration20-HearingAid
jugrei_Illustration19-Notes
jugrei_Illustration12-Wheelchair-speed
jugrei_Illustration26-Glasses
Divider-fun

Alt Text

As a hint to the features of accessibility in coding, I included some dividers with alt-text: Explaining what images appear on screen, for those with impaired eye-sight. Also to give a tiny bit of insight in accessibility for the common user. 

Divider-example-2
Card-1-Ross-Minor-Divide-example

Accessibility Tags

When sharing the schedule of the community events, it would also be important to define which accessible elements are present, for the users to know, if the specific stream or physical event is accessible to them and their needs. 

Schedule-Tags-Vertical
Schedules-Crop-5
Schedules-Crop-4

Instagram Campaign Stories

BONUS:

Stress Proces Video

Thank you!

BlueMoonSticker

Julie Eide
hello@julieeide.dk
+45 60 22 36 93