Gameboard-1: Designing the set-up flow for a digital tabletop gaming platform

The Gameboard-1 is an innovative, tabletop gaming platform and technology device that merges physical with digital gaming still in its kickstarter phase. The Gameboard-1 is created by The Last Gameboard, a company that places high value on the community and their users. In order to give their users a seamless experience, they came to us to  design the flow and interactions of the setup.

Gameboard-1: Designing the set-up flow for a digital tabletop gaming platform

The Gameboard-1 is an innovative, tabletop gaming platform  and technology device that merges physical with digital gaming still in its kickstarter phase. The Gameboard-1 is created by The Last Gameboard, a company that places high value on the community and their users. In order to give their users a seamless experience, they came to us to  design the flow and interactions of the setup.
Role
I collaborated on this project remotely with a team of two other UX researchers/ designers and took part in the research, ideation, wireframing, prototyping and usability testing
Goals
The main goal of this project was to determine the best approach based on user insight to create a seamless and intuitive user flow set upon starting the Gameboard-1
Challenges
The Gameboard-1 itself is an external hardware device in which our resources couldn’t properly imitate all of the functionality, gestures and display remotely for testing, we had to be creative with what was available to us

Discover

•Resource Audit
•Exploratory Market Research
•Competitive Analysis
•User Interviews

Define

•Affinity Diagram
•Problem Statement
•Design Principles
•User Scenarios

Develop

•User Scenarios
•Low Fidelity Wireframes
•Low Fidelity Prototype
•Concept Testing
•Priority Matrix
•Card Sorting Workshop

Deliver

•Gameboard IA Map
•Wireframe Kit
Mid Fidelity Wireframes
•Mid Fidelity Prototype
•Usability Test Results
•Annotated Wireframes
•Future Recommendations

Discover

Define

Develop

Deliver

Discover

The first step was to better understand the technicalities of the Gameboard-1 by auditing current resources as well compiling a list of questions for TLG at the kickoff meeting.

Because this was an unreleased platform in which we did not have access to, we needed to understand as much as possible. However, because it was still a work in progress, much was still to be determined. It was important for us to keep in the back of our minds that this was going to be made for hardware different than what we were designing on, and to figure out creative ways to explore possible solutions
This image shows the specs of the Gameboard-1,the hardware we were designing for

My team and I devised a research plan which involved conducting exploratory research on the gaming industry, as well as a competitive analysis to better understand similar platforms.

With my teammates and i for the most part being unacquainted to the gaming industry, we spent the next few days acquiring an immense amount of knowledge. This included studying the interfaces and gestures used in popular gaming systems and mobile phones, watching youtube videos of people playing games, and visiting and reading information on various websites geared towards gaming. Initially we wanted to focus mainly on digital tabletop gaming, but since it is a fairly new and growing field, with most direct competing products still in the developmental phase, there was not . We broadened the market to include both physical tabletop games and video games in order to get a more detailed account of the trends and insights into the gaming industry.
The home screens/library of popular video game platforms, Xbox One, Nintendo Switch as well as the Wizarama, another tabletop gaming platform, all are clean with easily readable and accessible content

I spoke with 3 out of a total of 9 future users in order to better understand their needs, frustrations, behaviors, preferences and experiences relating to tabletop gaming, video games and mobile games.

My teammates and conducted interviews remotely over Zoom, with some of TLG’s kickstarter funders and future users. The box on the right shows some of the topics we discussed.
•The gaming world and its evolution
•Personal accounts of gaming experiences
•Popular and preferred games and genres
•Avid gaming
•Social gaming habits
•Effects of Covid-19 on gaming
•Current digital versions of board games
•Mobile gaming
•Knowledge goals and expectations of The Last Gameboard
•Knowledge of similar products on the market

Define

In order to identify patterns and draw insights from our research findings, we held an affinity diagramming session. After synthesizing our data we identified the most impactful, key insights that further define the design problem.

The following are some of the main insights that were used in guiding our decisions
Experience over aesthetic
It is much more important to users that the gameboard provides a pleasing experience over superficial qualities
Quick, Intuitive setup
Users want to be able to quickly access gameplay, including continuing a previous game
Fully Immersive
Users want to feel fully engaged during gameplay and limit distractive content
Enhances Gameplay
The Gameboard-1 should enhance the player experience rather than take away from it. While users want to align on the experience, they do not want it to limit the imaginative aspects
Clean Console
Users do not want on screen interactions and interfaces to feel clunky

Develop

We then outlined a flow of the key tasks in thee user scenarios and brainstorming key questions, ideas and comments to help guide the design process

Each member of the team selected a scenario to guide in exploring divergent ideas. My scenario consisted of connecting to other play boards, choosing player position, home screen, adjusting board settings, adjusting profile information and sharing something to social.

Due to time constraints, we prioritized the most important aspects of our flows in a Priority Matrix client workshop.

Items in the two right quadrants were considered the most important and where we concentrated our focus

I created low fidelity wireframes and a prototype in Figma to explore a concept guided by our user research. The concept was tested with 3 users from the target audience and findings were presented to the client.

Home Page a

Image a displays the closed drawer while image b shows the open drawer

Home Page b

This design explores the usage of a bottom sheet in which the user can access primary options from anywhere in the game. Therefore, the user can remain immersed in gameplay rather than having to exit to another screen. The drawer remains off screen when unneeded so various controls and icons aren’t always on display and takeaway from the gaming experience
Feedback 

Users: liked having the drawer there for easy access, but did not want the line to appear on the screen at all times. Also, it was suggested the line should be more apparent and tactile, possibly a trapezoid
This design explores the usage of a bottom sheet in which the user can access primary options from anywhere in the game. Therefore, the user can remain immersed in gameplay rather than having to exit to another screen. The drawer remains off screen when unneeded so various controls and icons aren’t always on display and takeaway from the gaming experience
Feedback 

Users:
liked having the drawer there for easy access, but did not want the line to appear on the screen at all times. Also, it was suggested the line should be more apparent and tactile, possibly a trapezoid
Feedback

Users: 75%  liked being able to lock the screen. Users felt it would be even easier to just tap the button and rotate in 90° segments as done on the prototype, though this feedback may be different if gestures were to be incorporated

Client: Wanted this to be a more tactile experience, pictured screen rotation like a door knob. Couldn’t agree on whether or not they liked the idea of the lock

The primary options drawer

Tapping the rotate button would allow the user to rotate the screen by sliding their hands in a circular motion on the edges of the board. When not activated, the screen is locked so users don’t accidentally rotate the screen  

The intent of rotation was to select the player’s position in which the player would rotate the board to face them and then swipe down to lock it in. However, since the drawer already used the swipe up and down, I only included the rotation portion for this concept to avoid confusion.
Feedback

Users: 75%  liked being able to lock the screen. Users felt it would be even easier to just tap the button and rotate in 90° segments as done on the prototype, though this feedback may be different if gestures were to be incorporated

Client: Wanted this to be a more tactile experience, pictured screen rotation like a door knob. Couldn’t agree on whether or not they liked the idea of the lock
Tapping the rotate button would allow the user to rotate the screen by sliding their hands in a circular motion on the edges of the board. When not activated, the screen is locked so users don’t accidentally rotate the screen  

The intent of rotation was to select the player’s position in which the player would rotate the board to face them and then swipe down to lock it in. However, since the drawer already used the swipe up and down, I only included the rotation portion for this concept to avoid confusion.

The board connection menu  groups together different ways the user can get connected. The menu was meant to look similar to wifi connection on the iPhone and iMac for familiarity.

Connecting boards together was the main concept explored here as that was part of the task flow. It was meant to be quick and easy as it involved very few taps. The list would show boards next to the main board and once tapped the board would instantly connect or disconnect.

Feedback

Users: Though users liked the ease of access and that all types of connection were grouped together, they felt board connection would actually be a better fit under primary options since it was something they felt they would be using often and preferred instant access
Client: Wanted board connection to be more of a physical aspect, in which boards automatically connect when pushed together using NFC sensors for detection
Feedback

Users: Though users liked the ease of access and that all types of connection were grouped together, they felt board connection would actually be a better fit under primary options since it was something they felt they would be using often and preferred instant access
Client: Wanted board connection to be more of a physical aspect, in which boards automatically connect when pushed together using NFC sensors for detection
The board connection menu  groups together different ways the user can get connected. The menu was meant to look similar to wifi connection on the iPhone and iMac for familiarity.
Connecting boards together was the main concept explored here as that was part of the task flow. It was meant to be quick and easy as it involved very few taps. The list would show boards next to the main board and once tapped the board would instantly connect or disconnect.

In order to more clearly align with TLG’s vision based on updated insights regarding the hierarchy of information, the technical capabilities and restraints based on their feedback we held a card sorting workshop

We held a closed card sorting workshop in which various features were written on notes and the client was asked to categorize as well further elaborate on the functionality. It was important to establish a clearer picture of the features and functionality as envisioned by the client before moving forward. It was also just as important to still actively advocate for the users and incorporate their feedback.
At this time, after learning that some of our tasks were more hardware focused ,we made the decision to prioritize tasks that relied the least on hardware in order to focus on the aspects that would give us the most reliable results.

Deliver

My teammates and I analyzed and synthesized our findings from testing our concepts and collaborated in creating a converged prototype.

Outcomes

I conducted remote usability tests with 3 out of a total of 8 users in which users were asked to talk through their thought process while completing three tasks.

The usability tests were again conducted online in which users were asked to imagine clicks were hand gestures while indicating which hand gestures they expected them to be. Think aloud as well as concurrent probing methods were used while completing each task. Participants were asked follow up questions after the test.
Users were asked to complete the following tasks
  • Log In
  • Adjust brightness of the board
  • Select player position relative to the board
  • Register a game piece

Based on the results from the usability tests, we determined the future recommendations to move forward and further iterate on this design

Overall
  • Instruct with ghost animations and/or tutorial mode 
  • Utilize more imagery and icons to reduce text load
  • Explore ways to reduce the amount of taps and gestures
  • Utilize accessibility guidelines throughout future designs
  • Explore options for incorporating voice commands
  • Explore ways to incorporate game pieces that imitate hand gestures
Login
  • Explore a better way to distinguish instructions
  • Research and test different layouts of user profiles
  • Explore ways to better distinguish selected card
  • Switch select player position at this stage for faster set up
  • Clearly indicate where users choose to sit
  • Explore opportunities for simultaneous log-in
  • Explore different login methods
Settings
  • Further test icon for Connect page
  • Test gear icon for Settings tab
  • Test the position of Settings tab in the corner of the board
  • Explore different gestures that users might use in order to expose Settings tab
  • Incorporate accessibility settings 
    • Colorblind settings and filters
    • Text size 
Register Gamepiece
  • Explore ways for user to register many pieces on the board in game mode
  • Implement system for user to categorize and access pieces in set up
  • Implement a way for users to view their registered pieces and number needed for a game
  • Better define the difference between ‘new’ and ‘existing’ pieces

Project Takeaways

Prioritize and concentrate on what’s most important for an MVP
We only had four weeks to complete this project with a pretty lengthy brief. Rather than attempting to tackle the entire scope, we decided to shift our focus away from what the client considered least important as well hardware focused tasks that would lead to faulty results and spend more time focusing on what was important for the MVP

It’s super important to involve users early in the process
It is much easier, cheaper, and less time consuming to identify problems and iterate on the design before it has been coded onto hardware. Paper prototyping would have probably of been the best method to test but because we were working remotely as well as COVID restrictions, we were able to make it work

Many more rounds of testing need to be done before product release
Though our MVP focuses on initial user research and problems, there is still much data we were not able to collect. This MVP will most likely be iterated on several more times before launch. Once transferred to hardware, things such as incorporation of gestures and processing time may give users a different experience.