Game interface tutorial

See the live game

The Goal

Create an in depth introduction sequence informing the user of the tools and controls of Geodesign, a complex urban planning game that teaches university students the nuances of planning city infrastructure and communicating decisions with
stakeholders.

In addition this intro sequence needed to be somewhat universal so that it could be be used at scale with future experiences developed by the team.

User Research

Based on user research it was determined that the previous introduction to the game did not sufficiently cover the functionality of the games controls and also lacked the ability to bypass the intro for returning users.

To make sure users were effectively onboarded, the stakeholder wanted an intro sequence that would allow users to interact with the elements it called out while also giving the users the option to skip it if they had already been through the onboarding.

Competitive Analysis & Iteration

I started the process of this redesign by looking to other tutorial flows for inspiration. I saw that most tutorials showed each functional element one at a time but took a variety of approaches from a static text box, to a tooltip, or even a moving modal that migrated around the page.

I then began mocking up rapid low fidelity prototypes of these various tutorial options to bring to the stakeholder for input. After hearing that the stakeholder was looking for a simple option with a low development lift, I opted to pursue the moving modal approach.

Still elements from the other prototypes helped me to explore the execution of the games brand appearance and iterate interface design elements (some of which can be found in the final design).

Adding Motion &
Implying Functionality

Based on user research it was determined that the previous introduction to the game did not sufficiently cover the functionality of the games controls and also lacked the ability to bypass the intro for returning users.
To make sure users were effectively onboarded, the stakeholder wanted an intro sequence that would allow users to interact with the elements it called out while also giving the users the option to skip it if they had already been through the onboarding.

The Final Redesign