Introduction 

The project has been done during 5 days with Google Design Sprint method. The main goal was to improve learnability of a board game – Lands of Ruin – that is supported by a mobile application.


Solution

Due to the time limitations we decided to focus on three aspects that are most critical for users and would be easy to implement into the service by the client.


Details

Project created at frog Munich and directed by Kevin Cannon and Kalle Buschmann. I worked in a team with Cezara Kiss.


The Design Question

How might we enable people to play the game the very first time without the assistance from another person?


We focused on learnability after discovering that complexity of the game is the biggest struggle for new users.


Our solution explained with wireframes
CLEAR STRUCTURE FOR TOP BAR NAVIGATION

The elements are placed in a hierarchy that follows an eye movement. Main instruction is positioned in the priority place and informs users about the most important action that should be taken to finish a phase of the round. Beneath it on the right, detailed instructions explain specific steps. Navigation elements (Next button and Phases) are clustered together in the right corner.


Top navigation
Linear setup of a new battle

Linear setup with clear instructions and a progress indicator guides user through the process of creating a new battle. Main actions are presented on separate screens. Additional details about options are placed on a back of a ?card? that can be turn by pressing ?i? button. The prototype was created with Sketch and InVision.





4 categories of help

We introduced 4 categories of help. The user can turn off remembered one or turn them off completely with switching off teaching mode. Graphics style at (4) helps to distinguish where the action take place: instructions about the app are presented on flat graphics, instructions about the actions on a board – presented in 3D with a hand icon.


Tips and Trick

Take a look at the design process that helped us to develop the solution.



Meeting the client

During the meeting, we played the game with client?s instructions. Then we had a discussion about their expectations and their biggest struggle – learnability for new users.


We agreed to deliver wireframes of our ideas and basic guidelines how screens should be designed.


Understanding the context

The Lands of Ruin?s rules are quite complex which can be overwhelming for a new user. It took us hours to understand them completely. This graphics gives a brief introduction without going into details. Beneath, small chart how the game is positioned comparing to its competitors.


Complexity across comptetitors
Items that are needed to play the game

Analysing the user’s flow

We analysed the interface from usability perspective with a strong focus on learnability. That helped us to create a journey map with blockers and pain points that impede learning of the game and slow down the process of setting it up.


Analysing
Who is the user

We presented three groups of people that could become users of Lands of Ruin. Our client suggest us to focus on non gamers and board gamers. We defined their overall character and emotional needs.


Users
Defined design principles
  • The main focus of the user should be on the board not on the tablet.
  • The tablet is an assistant and guides the user to learn the game.
  • Offer help with an option of skipping it.
  • Clearly communicate that there is only one path and increase choices with time.
  • Let the user be informed and assured about the stage and performed actions.
  • Complexity should be introduced progressively, over time, when users themselves discover the value for it.
  • Users should not be stuck in a massive wave of windows and tooltips.
  • Enhance the current experience of the game without removing the background story.
  • Clearly communicate achievements.
Finding MVPs

Deciding on features that will make the biggest impact with the least implementing effort.


Top navigation
Top navigation

Existing solution slows down the process of learnability. Undefine structure and inconsistency creates confusion for users that are playing the game for the first time. Changes in the structure can be implemented easily without changing the logic of the code.


Create a battle setup
Create a battle setup

Existing setup is complex with information and actions overload on each screen. Separating each actions to create linear flow will remove anxiety of a next steps. Implementing will take more time but research showed that this is the biggest pain point.


Tips and tricks
Tips and tricks

Lack of clear guidance with detailed instructions gives the user a feeling of being left alone. New structure and defined moments of usage will improve the overall experience and understanding of the game without implementing many changes.


Improving chosen MVPs

Based on the design principles we started brainstorming on how to improve chosen MVPs. Starting with a paper helped to prototype faster and share ideas before creating digital wireframes.


First ideas
Testing the prototype

Testing was mainly focused on the setup of a new battle. We discovered small mistakes but it proved that the linear direction is right and the structure of a top bar is now easier to understand.


Benefits of the solution
Hierarchy and gestures consistent throughout the app

In the solution the reading order is always from top left to bottom right. The most important part is on the top left leading to the less important part on the interface bottom right. This consistency helps user to learn about elements? positions and fasten the process of finding needed information. Swiping only horizontal take an advantage of tablet landscape and helps to navigate through options.


Hierarchy and gestures consistent throughout the app
Linear process to simplify setting up a battle

Linear approach with hidden details simplifies the setup for the new user. Instead nested actions, the user needs to perform only one action on one screen. Improving this biggest pain point gives opportunity to acquire new users that abandon the game because of onboarding complexity.


Linear process to simplify setting up a battle

Guidance through the game

With introduced tips and tricks user can easily access instant instructions with help. After pressing an inactive button user will get an information why the button is inactive. Those elements introduced during the game fasten the process of mastering the game.


Guidance through the game
See next project

The toolkit for afflicted by Alzheimer’s