Mad Libs For ALL

An Inclusive Mad Libs for All

Refined educational game

When working in K-12 schools, I found that many English Language Arts (ELA) teachers use Mad Libs as an instructional tool. However, the traditional way of playing this game only happens during school time as students need to interact with each other face-to-face, and they are unable to play the game alone without peers. Also, due to the nature of this game, many students with reading impairment are excluded from a certain extent. Therefore, I decided to create an online version of Mad Libs that facilitates K-12 students’ learning in the ELA class, where the game helps students to build a richer vocabulary and master grammar by inciting laughter through weird and inappropriate word combinations. To make the game more inclusive, an audio feature that converts the story text into audio speech will be provided for students with reading impairments.

Tools: JavaScript, HTML, CSS, Photoshop

Click here to play.

Comparative Research

The official Mad Libs website is not quite user-friendly as it is more like a space for commercial advertisement to sell its printable books. The official Mad Libs app, though serving as a commercial app to sell the books as well, is more user-friendly as students can play directly on the mobile devices. However, one common shortcoming that many existing Mad Libs projects have is that it does not differentiate for students with varied reading and writing levels. Almost all paper-based Mad Libs have one-page long stories that young age students may not be capable of playing.

Based on these existing projects, I decided to refine the game, which has the following features:

Accessibility for more students,
Differentiation (i.e., multiple difficulty levels), and
Text-to-speech

UX Framework

Screen Shot 2020-07-19 at 10.11.44 PM.pn

Design Gallery and Demo

Page 1 - Start

To attract students' attention, I redesign the logo using Photoshop, adding the words "An Inclusive" and "For All" to indicate that this is a refind Mad Libs game that is suitable for students with varied language capabilities. The final design has the eyeball moving with the mouse, and the eyeball can be resized automatically based on the current size of the window.

Page 2 - Select a Level

To make the game age and content appropriate for K-8 students, I create a menu bar that differentiates multiple levels of Mad Libs stories that students can choose from. It has five levels so far, with the first level having three blanks and the fifth level having fourteen blanks. Each level button has a hover effect that adds another layer of enjoyment for students. The black and white color palette reduces the unnecessary cognitive load from colors.

Future Improvement

Include more differentiations that can be categorized by the topic of the story so that students have the option to select the topic they are interested in.