UX Project

Group Play

The Brief

Design an online application where players can play together and win together

My assignment was to design an online application that enables group bingo experiences. A key feature will be the ability for players to pool their bingo cards, increasing their chances of winning. The application will also foster community by enabling users to chat and schedule games together, including coordinating ticket purchases.

Before I starting to design my prototype I had a look at different ways that other online gaming platforms designed their groups or online communities. I looked at what sort of information was presented and what seemed relevant for a bingo group.

Having a look at some of the largest online games like Call of Duty showed how they handled dealing with large numbers of playing groups. Its easy to understand how many numbers are in the groups and how many is the max. Some other pieces of information on each group included are the rankings and possible rewards. Some of the information here came useful in my prototype later in the process.

One of the most popular online multiplayer games Among Us, shows a limited amount of information on each group. This makes it easier for a new comer to understand what information they are shown.

Rather than a list to present members of a group the game Age of Empires chose to present them in different columns.

I thought about showing filled in circles to represent the amount of wins a player made in a week or a month.

Flow Diagram

I needed to know how the user would move through this application. I created a few different iterations and came up with this flow where the user can join a group within a few clicks.

The target was to find a way for the user to join a group the quickest way possible. At first I thought of just automatically putting the player into a group at random but I felt this took away control from the player. I also wanted to have an easy way for the player to create a group as well. To accommodate these two problems the first page splits into to different journeys.

The Join Path is pretty straight forward for the user while the Create Path is a bit more complicated. Once the user has joined a group they can chat and buy tickets while the creator of a group has a few more additional responsibilities.

The green arrows and circles represents the user going to next screen while the pink represents the user going back a step.

Wireframes

The home screen of the application will have a quick explanation of the game and a button to enter.
As the user enters they with be given the choices to either join an already existing group or to create a new one.
Since you can’t leave a group soon after you join, this is a confirmation screen for the joining the selected group.
Once the user has joined a group they can see the other group members and who has bought tickets.
A leaderboard for the group standings. It is ordered by the amount of wins.
A chat window inside the group can be used to communicate with other members in the same group.

ScreenShots

The home screen has a tag line and a quick explainer of the application.
The number of ticket icons shown in the box represents the amount of players already in the group.
A confirmation page before the player joins the group.
The group shows who has bought tickets and also has buttons in both the table and the calendar where the player can buy tickets as well.
The leaderboard shows the top groups with the most wins in the current season in play.
The player can see that they are still in the group while in the chat but the focus is on the chat box.

Prototype

Check out Prototype