Case Study

Contango

The Game of Financial Mastery

Contango is a board game that allows you to grow your investment empire alongside other players. The goal is to hand pick investments that will reap rewards long into the future and help pave the way to financial freedom.

  • App Design & Development
  • UX & Prototyping
  • Information Architecture

Case Summary

Product Vision

The Contango board game required an app to support gameplay. The objective was to create an app that would be a digital record of each player’s assets. All player’s would need to download the Contango app and join a game initiated by the banker. The app needs to keeps track of each player’s turn, allows player’s to send money, buy assets, sell assets, track market cycles, and enroll in education. The app also was required to allow player’s to play a timed game or set a winning net worth to end the game.

Outcomes

Contango was not available for sale at the time the app project was started so user testing was conducted internally with the design and development team. Gameplay was conducted remotely via zoom with the game components in a Miro Whiteboard. The data collected during gameplay was used to create task flows. Wireframes provided intuitive feedback and iteration from players. The app was designed in Adobe XD and coded in React Native to be launched in the Apple App store and Google Play store.

Colour Palette

Font Style

Project Tools

Understanding The Users

Playing the game on zoom using Miro to host the board. This step allowed us to understand the flow of the game and design with the user in mind.

Sign In / Sign Up Flow

Signintaskflow

Balance Sheet

The Balance Sheet is the home screen of the app. We discovered when playing the game some of the most important information we needed to access when playing the game include. Assets, loan information, total assets, and value. Assets are shown on the players balance sheet screen after they are purchased. They are categorized into three categories real estate, business, and stock market. Selecting an asset will allow the player to view the details of the asset and sell the asset if they wish. The grey box at the bottom of the screen is called the market box we determined by playing the game the information on this box was useful on many of the screen so this slider is available on all the screen in the navigation menu to aid the user during game play.

Income Statement

The income statement screen in a more in dept view of the players game standings. This screen also displays the market box for quick reference. This screen allows the player to see all the information that would allow them to make a decision weather to buy an asset or sell it.

Education

The education screen allows players to enroll in courses that will give them a return on investment. Players are only able to enroll in education when it is their turn. The player logo in the upper right is orange when the player is up. Enrolling in a education course will prompt the player to end their turn.

Game Overview

The game overview screen shows all the players active in the game. Players are listed in order of highest net worth so players can easily identify the wining order. A orange icon dispalys to the left of the players name indicating that it is their turn.