The idea came to me to make a board game bingo because I was struggling to continuously play interesting board and card games with my friends. I decided to make a bingo game that is multiplayer in which the players try to play and win a variety of board/card games. The goal is to win as many board games since each time someone wins one of the games they mark the bingo board off. A single tile selected is worth 1 pt while a bingo is worth 10. The goal is to get as many points as possible before the entire board is filled. Once the board is filled, whoever has the most points is declared a winner.
I also wanted to add stakes to the game to spice things up and make it more competitive, so there is a portion at the beginning where the user adds money to a pool and that is held until the board is filled, and once it is filled the winner will get the pool of money.
I started with this user task flow (shown above) to figure out what pages I should have and what each one should do. I then took that task flow and sketched out this layout for the pages for the bingo game. Each step of the process brought new challenges and changed the flow and amount of pages in this taskflow.
I made this sketch of the initial wireframe for the bingo game. This was where I developed the pages based on the task flow. I then took the sketches and made this low-fi digital prototype (shown below) for the website. This was more about the location of images and text and less about actual design and color palette stuff. I was given feedback from my cass mates and was able to determine that I needed a few extra pages to include missing information and to make space for the current amount of information.
I then turned that into this mid-fi after edits (shown below) and with notes added. I added some pages and began to add more detail to each page to make things easier for the hi-fi prototype. I added a couple of overlay pages as well that I then went on to prototype in the hi-fi.
This was my first round of hi-fi edits (shown below) where I began to get an idea of the color palette and the type and image choices. There was a lot of filler text at this point. I did not include the overlays in this screenshot but I was also prototyping those while I was doing this. I admittedly focused much more on the prototyping of the hi-fi wireframes than the design, especially during the first half of the time we were given to make the hi-fi wireframe.
This is my final wireframe for my hi-fi prototype (shown below), I included the overlay pages as well. I prototyped the bingo board manually, if you look I have 5 pages that have bingo boards on them but each one is meant to represent a step in the filling of the bingo board process. I refined the color and type choices and filled the pages with actual information instead of filler text. Like I mentioned before, I spent most of my time prototyping during the hi-fi stage and trying to get certain effects to work properly, especially with the bingo board. I kept going back and forth between having the interaction with the bingo board bring up an overlay or just take the user to a separate page, and it was much less confusing to just make a new page instead of the overlay effect.
Once the prototyping was done, I screen-recorded the step-by-step process of playing the bingo game.
Once all of that was completed, I made a poster to advertise the game.
