🎱 Bingo wheel

To view and try out this first live-demo of this prototype version of this application, click here.

Project brief

I was tasked at my current workplace to create a bingo app based on the user needs of the employees as a starting point. The purpose of this simple bingo application was to create a digital replacement of the traditional bingo cage. Framom wanted an app that they could use to play bingo with in combination with traditional blocks and markers, which could keep better track of current drawn numbers and numbers that have been drawn in the past when employees play the game.

Goal of this project

Create a simple bingo application that meets the client's and employees' requirements and needs, while offering the most intuitive and seamless user experience possible.

Challenges

Convert hard-coded project in JavaScript in Editor X Velo on Framom's website.

Today's solution

Working with my mentor, Christel, we came up with a very simple yet entertaining design for our bingo game that has a practical working interface 👉 View final app (currently password-protected, only test candidates have access to the link).

Details

Bingo wheel is a single-paged app built with Vanilla JavaScript only, where the JavaScript code will be improved to optimize the app´s speed and usability.

Project/prototype is so far build with (from this repo):

• HTML
• Vanilla JavaScript
• Less CSS

Team/cooperation

Christel Hustoft and Nils Heldal.

My roles

UI design, frontend development and running user tests.

Toolboxes & technologies

• Adobe XD
• Editor X
• JavaScript (Editor X Velo)

Behind the scenes

01. Exploration

Through a prioritization matrix, it was determined and focused on which functions should be prioritized to be created before I began to outline the layout of the bingo game, which was primarily based on the task descriptions I received from Framom.

02. Ideation

From sketching phase of this project, I tried to outline its information architecture and an interface that looked a bit like the analogue bingo scheme we use when we're playing bingo as a starting point, in an attempt to mimic a bit the real experience of our version of our bingo game.

This particular app has undergone some UI changes related to its color palette, and button tweaks here and there from this stage, to further improve the entire structure and interactions of the application.

03. Design

The prototype version (image shown above to the right, wireframe to the left) underwent its first user test with a limited number of users. The user test was carried out on 4-5 users who were employees at Framom.

📋 Task description
Test out the interactive prototype of this bingo game with basic features on big screen.

🏅 Goal of this task
Understand the users' level of focus and responsiveness when we play bingo, and in this way test the user interface of it.

🔎 Observations

• Most users found the design to be clean with an efficient user experience.
• Some of the users did not quite understand the point of having a «timer» when the auto-draw function was not included in addition to manual number draw.
• Participants in the user test also requested after automatic number reader of numbers that are drawn.

🛠️ Further measurements

• Implement auto-draw of numbers that shows when the next numbers will be drawn through a progress bar.
• Add number reader when other additional functions mentioned above are implemented.

04. Development

As more features were added, the code set of this application grew in pace. Eventually it also became useful (and necessary) to split code into different modules/files and reuse it trough import-export method:

The final (so far) version of this app was built in Editor X - which is the platform Framom currently uses, where I was able to extend the functionalities of this application by adding JavaScript code in Editor X Velo. Today's final solution looks like this for now:

Note: The audio code snippet to this app are not working quite as expected at the moment and are under debugging.

Contribution

To contribute to this project, please create a new branch that can be reviewed and merged. All constructive feedback will be well appreciated, and thank you in advance!

Otherwise, enjoy and have fun! And let´s play bingo 🖍️

Acknowledgements

I would like to thank Framom byrå for giving me the first opportunity to immerse myself more into app design- and development, and to create the first functional app I ever created - which will be and is actually put in use! And I also would like to give special thanks to my mentor Christel Hustoft for professional input, feedback and support throughout the course of this project so far.
🙏