Interactive Bingo Prototype
|Michigan State University
|Junior, Senior, Sophomore, Undergraduate
|Interaction Design, User Interface, Visual Communication
|Brainstorming, Digital, Iteration, Mobile Application, Online Learning, Process, Technology, Usability
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 to these fundamentals and asked them to reimagine how the popular game BINGO can be played on a smart phone device. Using Figma, a commonly used web-based prototyping and design tool, student designed an interactive medium-fidelity prototype. They followed an interaction design process resulting in the final product that was a simulation/model/prototype of their idea.
PROCESS LEARNING OBJECTIVES:
1: Brainstorm traditional + alternative forms of BINGO.
2: Write a Concept Statement articulating your individual idea and context of use.
3: Define a User Path by writing a User Need Statement and diagramming a User Task Flow.
4: Sketch interface designs for a smart phone device.
5: Generate a medium-fidelity wireframe.
6: Conduct visual research and reference ideas for
a design direction in a mood board.
7: Create a consistent design system—type, colors, images, icons, etc. (original and sourced).
8: Prototype (Medium-Fidelity) your Interactive BINGO game building on your medium-fidelity wireframe.
9: Generate a static mockup image of your prototype and record your prototype in use.
All Weeks at each critical step:
Critique the work of your peers and take into account the feedback you receive along the way.
PRODUCT LEARNING OBJECTIVES:
+ Exhibits your use of Figma as you maintain and generate
all of your process work in a single Figma file
+ Clearly indicates how someone plays your new game design
+ Is a model of typographic design, easy to use, easy to understand
+ Inventive solution to a reimagined BINGO game
+ “Digital Craft” is well-executed; Content is free of typos and/or grammatical errors; transitions and animations are
smooth and concise
+ Exported + shared from Figma in the means communicated, appropriate for public portfolio presentation purposes
Concept Statement (Writing)
User Need Statement (Writing)
User Task Flow (Diagram)
Sketches (Analog or Digital)
Design System Components
Mock-up Images of prototype
Recording of Prototype in Use
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 materials collected in Figma. Email me at email@example.com.
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 in 2020, 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! Now in 2022 I have since ran this project in-person twice and Meaghan Dee ran the project once. Having someone else teach it has only improved the project even more. Student end the project with a completed case study ready for their portfolios!