Prototyping

Prototyping for the game interface

We started a miro-board to give an overlook about what elements we needed to make in our game: starting page, two games, score page, profilpage and more. All of these things, we needed to prototype.
We all did a prototype for the interface - like starting- and homepage - and came together with these prototypes to figure out what would work best for our target-group. After this, we quickly started making some paper prototyping and settled on the structure of the game. We agreed on some global standards for our interface - ex.: colors, fonts, outlines and elements - and now we continued making one prototype that would show how every page of the game should look like. We also agreed on two "minigames" to code, so that we can showcase these at the Design Expo.

The methods and digital tools we've used for prototyping is:

• Figma
• Miro
• Paper
• Visual Code Studios: JavaScript, HTML and CSS

There are different advantages for each of these tools. As example, we were quick to find some paper to illustrate and communicate our individual thoughts. We then would move over to prototyping in Figma to get a higher fidelity and a possibility to do iterative prototyping. We also wanted to code as much of the two minigames as possible, and wrote this in JavaScript. Before coding them, the concept and look of it was prototyped in Figma as well. This took more time, but on the other hand we can get exactly the visual and interaction we wanted in the games.