Quizzical History

skills: board game design / UX design / visual identity / packaging / fabrication

Quizzical History is a historical education game created for an exhibit as part of the University of Minnesota’s graphic design senior exhibition Onward. The exhibits were based on each student’s thesis written in the previous semester with my thesis focusing on the accessibility of web-based quiz games—like Kahoot! or Gimkit—for blind or visually impaired primary school students. My goal was to create a project and exhibit that would stay true to my thesis’ themes of visual accessibility, education, and games in a way that went beyond simply building a Kahoot! clone with basic web accessibility features added.

The game requires players to guess historical terms by connecting them to their historical context. The base game has five rounds with the same selection of cards being used in each round. The clues in each round are based on a question: what, who, when, where, and why. For example, a player giving their team clues in the “Who?” round might give the clue of “King George III” or “Founding Fathers” if the term was the “Declaration of Independence.” By combining competitive stakes with required historical knowledge, Quizzical History aims to engage students while learning.

It also aims to include sighted and blind players in a way that enables both to play autonomously. On a functional level, the cards, rules, score tokens, and containers are all designed to communicate information in a tactile or audible way in addition to written text. However, there’s also the aesthetic level to consider since visual appeal is often a very important component of a board game. To create aesthetic interest for players with low or no vision, the design includes elements that play with high contrast and tactile interactions.

While I started the semester assuming I would choose the most obvious route based on my thesis and make a demonstration of how web-based quiz games could be made more accessible for blind or visually impaired players, another idea came to mind that seemed to offer more opportunity for experimentation, and positive feedback confirmed that it was time to pivot.

Instead of a digital game I decided to make a board game. Early on, my main considerations focused on accessibility considerations like leaning into varying forms and textures and considering alternative ways of conveying verbal information like braille or audio as well as the possibility of integrating digital technology.

However, while this initial ideation outlined general possibilities, it soon became clear that I’d need to figure out what the game would actually be before I could make any more progress. At first, I focused on educational games I was already familiar with like Trivial Pursuit or Cranium but none of these games brought to mind any new ideas for what mine could be.

Then one day during class, I was asked a simple question: “What games do you like?”

The game that immediately came to mind was Fishbowl, a party game that I suggest at nearly every opportunity. The rules of Fishbowl are simple. A group of players splits into two teams. Each players writes three prompts, either words or phrases, and adds them to a shared pool. In each round, the teams take turns sending up a clue-giver, and during each turn the clue-giver has one minute to draw prompts from the pool and get their team to guess as many as possible. The teams switch off until all cards have been guessed, then whichever team guessed the most cards wins that round and all cards are put back into the pool to start the next one.

What makes Fishbowl a little trickier is that the rules for what clues can be given change each round. In the first round, clue-givers can do anything as long as they don’t say any words on the card. In the second round, clue-givers can only say one word for their clue. And in the final round, clue-givers may not make any noise and must only use gestures for their clue.

That idea of having a shared pool of prompts that carries over between rounds with limitations getting stricter each round inspired the concept of Quizzical History.

Very soon after arriving at the idea for the game mechanics I came to the idea for the game’s visual identity. At the core of the game are the five questions and the connections players must make with them. These aspects come together as an icon of five question marks connected together by their dots and forming a flower. Since versatility is a key aim of Quizzical History, I opted for this playful and widely applicable symbol instead of an icon tied too directly to any specific area of history.

For the color palette and pattern, I tested many iterations before arriving at the final versions. A deciding factor for both was contrast. Too many high contrast color combinations or too much irregularity of the patterns was overwhelming but completely smooth transitions were underwhelming and especially for color, wouldn’t be as visible for players with low vision. The final palette and pattern found a middle ground. The color combinations transition from low contrast to high contrast and each of the patterns uses the same form overall while switching off between scalloped and waved borders.

Color palette and pattern iterations, forms inspired by logo icon

Final color palette and pattern structure

With an idea for the general structure of the game and its visual identity, I could refine my ideas for accessibility. Instead of assuming that the solutions I had come up with as a sighted person would work, I looked for ways to confirm or contradict my ideas. A few valuable resources included 64 Ounce Games, a company that sells accessibility kits for board games; the forum r/Blind on Reddit, where many blind and visually impaired people share their perspectives and experiences; and blind creators like YouTuber Molly Burke, whose video with Allure on the accessibility of makeup packaging provided valuable insight for designing my own packaging. Overall, this research confirmed ideas I’d had, like integrating QR codes for screenreaders or including interesting textures, and presented options for implementation, like using clear labels for braille on text or pairing matte and glossy textures.

Another significant area of research was the standard for board game manufacturing materials and processes to get ideas for ways in which my design could be more realistic and ways it could push the boundaries. One element where this inspiration and reinterpretation is very apparent is in the development of the box.

The Box

With this being my senior exhibition project, I decided to push myself and go beyond a standard rectangular box. Since the five-petaled flower is at the core of Quizzical History’s visual identity, I chose a flower shape instead.

Because of the intricate shape, laser cutting offered the best speed and accuracy. In my initial prototypes, I tried solutions like tabs that hooked the box together or a “living hinge” to help the sides curve, but the test runs didn’t hold together well and more importantly, they seemed nothing like an actual board game box, so before going back to the drawing board I looked at examples of the actual board game box manufacturing process.

Cardboard prototype with hooked tabs

Chipboard prototype with living hinge on sides

3D model for chipboard mold

Laser-cut MDF mold and first vacuum molding attempt

Industry-standard board game box structure

The standard structure of a rectangular board game box is to have a flap at each of the rectangle’s edges that are then folded in and glued at the corners. For my unconventional structure, I took the basic idea of having the central shape with a flap for each side, but with a modified procedure to account for the curves of the petals. Since I was using the standard material of chipboard, trying to bend the flaps into shape in the material’s normal state would result in extremely uneven, wrinkled sides that would actively resist staying in place. To solve this, I added a stage between cutting and gluing.

When chipboard is wet, it bends much more easily without wrinkling or tearing, and once it’s dry again it’s just as sturdy as before and holds whatever position is dried in. To take advantage of this for my box, I modeled and printed a mold that would hold each flap in the shape of the side’s curve so it would hold its shape and could be glued in place much more easily.

Chipboard molding in progress

Another significant aspect related to the box was how the components would be contained inside. To help players keep the cards organized between games, I decided on an insert that would divide cards into stacks by time period. Because of the unusual shape of my box and the cards, making a plastic insert by vacuum molding was the best solution to get the precise form I needed. Because the cards are divided into eight time periods but the flower only has five petals, I made two inserts that could stack and divided the time periods between them. The finishing detail was adding clear braille tape with bump dots corresponding to each of the time periods to the cups to distinguish the sorted cards without needing to draw one.

Stacking inserts with clear bump markings at edge of each cup

Since part of my goal with this project was to consider experimental solutions that are possible but not currently realistic for commercial games, I included a feature that maximizes autonomy for blind players when first opening the game and learning the rules. A braille rulebook would be very impractical to include due to the length of the full rulebook as well as the fact that many blind and visually impaired people don’t read braille. To address this, I made an online webpage that could be read by screenreaders and added a QR code on the rulebook to help navigate to the webpage more quickly. However, without prior knowledge, a player who needed the online rules would have no idea where this QR code was, making it useless.

To communicate this information without relying on a printed or braille label that would need to be read by another player, I took inspiration from the use of audio in greeting cards and added a small audio device that would tell the players as soon as they open the box how they can read the rules online using the QR code and where to find it.

For the wrap of the box, beyond practical considerations like legibility, I wanted it to have aesthetic interest outside of its visual appeal. For the name of the game, I laser cut letters and glued them on top of the printed letters so they could be felt as a raised surface, similar to some of the makeup packaging discussed by Molly Burke in her video with Allure. To add a textural element to the pattern, I used a template to spray a matte coat on alternating stripes, then went in to paint a glossy coat on the other stripes, also inspired by Molly Burke’s commentary on makeup companies using both matte and glossy packaging for different products. The result creates an effect where the transition from one stripe to the next can be perceived by touch alone for a product that considers accessibility outside of pure function.

Wrap for game box with the lid and sides to catch interest and the back for more details

Testing shapes and information splits

Close-up of raised lettering and contrasting matte and glossy textures

The Cards

In my design for the cards, my goal was to effectively tie them to the game’s visual identity while ensuring a smooth flow during gameplay. My initial designs tested out possible shapes and divisions of information between the front and back sides. Because the flower shape would require more complicated production and be more prone to hooking onto each other while trying to shuffle, I chose the circular card for the final design. As for the information, I decided to keep it all one one side for higher legibility and to not detract from the decorative pattern.

Since the cards needed to hold up to lots of handling, I knew they’d need to be printed on thicker paper than what I typically used. A test print confirmed that my best option would be the university’s professional printing services rather than trying to print myself using the graphic design department’s printer. To cut the cards, the circular shape meant I couldn’t use a standard paper cutter. Once again, I turned to the laser cutter. After an initial test cut that got too smoky on the underside, I switched from cutting to double engraving so it would only come from the top, leaving my cards perfectly cut and with no trace of the laser.

Testing printing and cutting processes

To make the information on the cards accessible, my design includes braille, bump dots, and a QR code sticker. As with the online rules, the QR code ensures that blind and visually impaired players who don’t read printed text or braille can also read the card themselves. I tested how the QR code scanning process could be the most efficient and found that InDesign could encode plain text into a QR code in tandem with the data merge utility, allowing for hundreds of codes to be created in an instant.

Using the plain text option instead of the website option, the information loads much more quickly and doesn’t depend on a fast internet connection to keep up with the game. I also found that the Code Scanner feature on iPhones had a more streamlined process than using the Camera app, so I added a tip in the rulebook to help players have the best experience possible since Voiceover for iOS is the most popular screenreader for mobile devices. The QR codes are printed on stickers so the edge of the sticker can be felt to identify where to scan, and the codes are also printed on the cards in case the sticker comes off and gets lost.

For the braille and bump dots, I used clear braille tape and a slate and stylus. The clear tape could be placed on top of text without obstructing it while holding up to wear and tear. While the QR code and braille over the necessary information to play the game, I made sure to add the bump dots for the level of difficulty and time period so a blind or visually impaired player could immediately know the type of cards they’re choosing while setting up the game.

The Tokens

For tracking the score, I decided to use physical tokens as an opportunity for more textural interest and information. Initially, I planned on having three types of tokens: chipboard tokens to track the number of cards guessed in total, wooden tokens to track the number of passes taken in total, and plastic tokens to track the number of rounds won in total. These materials would provide distinct textures while still being standard materials for the industry. This way, the winner could be determined by most rounds won, then in the case of a tie by fewest passes taken, then in the case of a tie by most cards guessed.

However, I realized this idea conflicted with another one. To help keep the tokens in one place and easy to count, I designed the tokens to have a hole in so they could be placed onto a hinged ring. With the number of cards that might be guessed each round, it would be extremely impractical to try and fit them all onto one ring. Because having to break a second tie would be a much more narrow scenario, I came up with an alternative tiebreaker and simplified the system to just the pass and round tokens.

In addition to their distinct color, I made the tokens distinguishable by touch with their forms, the pass tokens having edges while the round tokens are rounded, and their surfaces, with the pass tokens being matte while the round tokens are glossy. As with the other elements of the game, all information is available without needing vision.

3D model for printing round token

Unpainted round and pass tokens

The Rules

My priorities for the rules, both the printed and online versions, was to make them highly legible, readable, and navigable. For legibility, all text has high contrast from its background. For readability, all text has enough space to breathe, and the hyphenation and justification are adjusted to make the flow from each word and each line to the next smooth.

For navigability, the sections can be easily found either by finding their page number in the printed version of the game overview or by clicking their link in the online version. I also made two versions of the rules for the questions, a quick guide and a deep dive, allowing players to learn the rules in the right amount of depth for their group. For the online rules, since navigating by headers is by far the most popular way to find information when using a screenreader, each level of information has the appropriate level of header to make it easy to jump to the desired section. Additionally, all links in the online rules are associated with text that clearly describes their purpose so that someone navigating by links knows where each one will take them.

The Exhibit

With the game being the main focus of my project, my exhibit was designed to complement it both visually and tonally. At first, my ideas focused on the visual side, and I had a concept to make a flower-shaped surface to display the information with leaf-shaped shelves coming off the stem to hold the game itself. However, this direction seemed underwhelming, so to scale it up a bit I considered having the surface be shaped like a vase instead. While this edit made the visual impression stronger, the exhibit would still be lacking interaction outside the game itself, so I started to think about how I could use three-dimensionality to my advantage and found the solution. To capture the playful nature of the game, the vase would be spinnable.

Sketch of idea for flat exhibit

Model to assess the exhibit’s scale within the exhibition

Because I’d never attempted making anything like this before, this was a part of the project where collaboration was especially important, like getting suggestions about the internal structure of the vase, learning to use the tools I needed to build the tables and lazy Susan, and attempting to fit the gigantic vase up my century-old house’s narrow basement stairs.

One very helpful critique related to the presentation of the game. Having worked on the idea for months on end, it was easy to take for granted my personal familiarity with the project, so I appreciated the recommendation to include materials that would quickly explain how to play the game and highlight the accessibility features. I added two information sheets to my interactive table. One summarized an example game while explaining how other games could look very different because of Quizzical History’s adaptability.

For the other, I decided against the suggestion of making glasses that would simulate visual impairment to demonstrate the accessibility features. From what I’d read online, opinions on this type of activity seemed mixed at best, with many pointing out that these types of activities more accurately simulate a sudden loss of vision rather than actually living as a blind or visually impaired person.

Instead, I decided to invite visitors to interact with different parts of the game and highlighted the design choices, explaining their purposes as necessary and asking participants to consider their function. I also wanted to acknowledge the limitations of the project, being designed for a specific range of accessibility needs for a specific type of game, and challenged visitors to think beyond the project about how Quizzical History or other games might be adapted to an even wider range of players.

Sketch to assess exhibit’s scale compared to interacting visitor

The Presentation

To present our final project as a whole, each student had a choice between creating a short video summary or a case study website with more in-depth writing. As an honors student, I was required to do both. For my website and video, I wanted to take the opportunity to be experimental with my style of presentation and storytelling, with both being inspired by the imagery of evidence connected by threads on a board just like how players make connections while playing Quizzical History.

For the case study website, I decided to build it in Webflow since I’d just used the platform to build the exhibition website as the manager and main designer of the website committee. I was intrigued by the animation tools and used them to direct readers through the story in a highly linear way while being completely distinct from the typical scrolling experience.

While I liked the idea of moving around an evidence board, having the reader’s entire view move and spin with every transition would be overwhelming and highly impractical to set up. Instead, I saved movement and rotation for transitions between sections and within each section built frames for imagery and text that would stay consistent as the content changed.

For the video, I wanted to take the idea even further, leaning into the idea of the evidence board by creating a highly narrative framing device to add a playful twist to my explanation. The video is narrated by a sleep detective working in Slumber City, a metropolis whose accent happens to sound like a very bad New York accent, and the detective’s newest case is to investigate me, Heidi, for my crimes against sleep.

The detective asks for the viewer’s help in solving the mystery by going over the project’s motive (the ideas), the modus operandi (the process), and the crime scene (the final result). In my writing, I kept a balance between referring to the framing device and using in-character vernacular while ensuring that the basic details of the project were all included. For the visual style, I took inspiration from classic films while tying it into the game’s visual identity by making it a film violet instead of a film noir.

Overall, both presentations take to heart Quizzical History’s spirit of playfulness in learning.

The Project

Looking back on this project, I could focus on the million little edits that could be made or the things that didn’t turn out quite like I’d imagined them. However, what I want to remember from this project are the ways it tested me. It tested my ability to mitigate and solve problems, to understand others’ wants and needs, to ask for and accept help, to embrace failure in order to move forward, and to take the risk of being experimental and playful, all skills I’ll appreciate in every future pursuit.