Interactive Bingo Card Prototype

Posted

Emma Simon, Good Habits Bingo, Prototype Stills from Figma

Madeline Stanislav, Road Trip Bingo, Prototype Stills from Figma

Hannah Miller, Self Care Bingo, Prototype Stills from Figma

Educator/s:
Institution:
Level: , , ,
Duration: 5 weeks
Category: , ,
Filed Under: , , , , , , ,
Bookmark Project

Project Brief

A well-designed interface is critical to the success of an interactive environment. Learning and practicing the Interactive Design Fundamentals (interactions vs. gestures + patterns) as well as Visual Design Fundamentals (communication + direction + amusement) is a component of this introductory course in Interaction Design. This project introduced students these fundamentals through the creation of an interactive BINGO card prototype using Figma, a commonly used web-based prototyping and design tool. Before the design and prototype implementation, students researched and reported on the multiple origins of the game BINGO and surveyed interface design examples.

Learning Objectives

Phase 1: Research + Report

  • Collect visual examples + principals of interface designs.
  • Research the origins, history, and current forms of BINGO.
  • Brainstorm alternative forms of BINGO.

Phase 2: Design + Prototype

  • Prepare for using Figma as your prototyping and design tool.
  • Individually create an interactive BINGO card prototype using Figma, a digital prototyping tool. Your prototype should show how someone plays and give an indication of when someone plays. The prototype should show at least show the (1) the incomplete bingo card, (2) how an individual element on the card is selected, (3) how the card responds to that selection, (4) a complete BINGO card. Your interface should imply whether is it a multi-player or single player game, how the elements on the card are being called and/or experienced, and if there is a summary of past games played.
  • Practice interactive and visual design fundamentals i.e. gestures, interactions, UI patterns, consistency, grid, typography, color, placement, scale, images, icons, motion, as it applies to interactive design.
  • Account for digital craft in the final execution and throughout the process i.e. elements align, typography is well spaced, no text is missing, grammar and spelling are correct.

Deliverables

Phase 1: Research + Report

  • Interface Design Principles + Examples (Small Group Collaborative > Google Slides Presentation)
  • BINGO Presentation (Small Group Collaborative > Google Slides Presentation)
  • BINGO Brainstorm (Class Collaborative > Padlet)

Phase 2: Design + Prototype

  • Interface Design Analog Sketches (Individual Contribution > Padlet)
  • BINGO Card Interactive Prototype (Individual Contribution > Figma)

Readings/Resources

There are too many to list! If you are interested in resource details + the lecture content—I'd be willing to share a link to the course google site. Email me at tegtmey2@msu.edu.

Reflections

This course in Interaction Design is the only IxD course in our Graphic Design program, therefore it has to do a lot of heavy lifting. Despite having taught this course for many years, I am constantly reworking how to ease students into thinking like an Interaction Designer. With the added challenge of teaching remotely, I wanted to devise a project that would be fun, somewhat low-key, and be a simple way to introduce IxD. Fall 2020 was the first time I ran this project and additionally, it was the first time I have ever used Figma!

Figma was a great tool to use because I could see all the working files of my students and easily comment, but if one doesn't know how to design or prototype with it, it takes time to learn the design capabilities with a lot of tutorial research. Therefore, learning Figma + interaction + visual comm + remote learning made for a more complex project for the students than I originally intended. If students didn't put in the time to learn what is possible with Figma, the designs turned out looking more like a cartoon-ish wireframe and less like a polished prototype. In hindsight, perhaps the purpose of the project should have been to produce a high-fidelity interactive wireframe and design the interface independently, then merge the two together...it's always the instructor's challenge, to teach BOTH visual and interaction together.

The students did take into account the current pandemic and looked at how this type of game/application could be used in this context. The student examples shown here exemplify this as well as the successes of working within the realm of interactive environments.

Considering that I am still teaching the class as I write this and we moved on to the next project (Interactive Data Visualization), perhaps this first project will pay off in the long-run and students will revisit their BINGO prototype designs at the end of the semester (my wishful thinking that there will be time and the motivation to do so). I will be reteaching this project again in the future as it gave me something to build on for next time. I'd love to hear if anyone else attempts this as an introduction to IxD as well! Please get in touch if you do!

The student examples posted here are static for now, once the Fall 2020 semester ends I might have animated prototype (videos) to link.

Related projects