Give Get

Financial literacy board game
Game UX/UI and BrandBuilt for Finance411
Give Get store feature graphic: the game logo and three game screens

Overview

Brand, game and program

Give Get is a financial literacy board game by Finance411, created by a teacher and a financial planner. Players drive around a board and decide when to give money to get money, and learn budgeting, saving, investing, owning, borrowing and speculating along the way. I designed the brand, the game, its board in print and in 3D, and the program it is sold with.

6Lessons, one for
each type of space
4Months from kickoff
to the stores
1,000Students in one
school challenge
7,000+Games played
that month

My Responsibilities

Lead designer

From the first sketch of the board to the screenshots in the App Store.

Brand

A logo, colors and type that read as a game, not a bank.

Game UX/UI

Every screen of the game, from loading to the net worth sheet.

Board

The printed board and its corner cards, and the 3D board the app is played on.

Lessons

A lesson for each kind of space, with the real-life idea behind it.

Competition

School, regional and national rounds with brackets and rankings.

Launch and sales

Store graphics, the pitch deck and the program deck.

Brand identity

Logo, color and type

A heart built from game pieces and coins, with the name in a fat, friendly display face. Green and yellow carry the game, charcoal carries the text, and every space on the board has its own color so a player knows where they landed at a glance.

Give Get game icon

Game icon

Give Get web logo, the wordmark alone

Web logo, the wordmark alone

Give Get game icon on the game’s green background

Game icon on the game’s green

Color palette

Sunny Yellow#FFC537 · Coins, highlights and the main buttons
Game Green#86D144 · The board, play actions and wins
Charcoal#474850 · Text, numbers and panels
White#FFFFFF · Cards, wallet and outlines

Typography

Your turn!Titan One · 64 / 72 · Screen titles and round messages
The PiggyTitan One · 40 / 48 · Space cards and numbers
Sell your assets firstNunito ExtraBold · 28 / 36 · Headings and buttons
Give $2 for each stacker. Get $1 for each stacker every time you pass this space.Nunito Regular · 18 / 28 · Rules and lesson text
Give-Get is an effective financial literacy program developed for high school students.Nunito Light · 15 / 22 · Captions and notes

Gradients

A color for every space

Chart
Pillars
House
Piggy
Ticket

UI components

Buttons

Get StartedCompetitionQuick PlayHow to Play
Give $4Skip

Loading, sliders and steppers

Loading..

-2+

Spin and move

The game spinner
Spin buttonTicket dice

Stackers, owned and not yet owned

Chart stacker, ownedHouse stacker, ownedPiggy stacker, ownedPillars stacker, owned
Chart stacker, not ownedHouse stacker, not ownedPiggy stacker, not ownedPillars stacker, not owned
Pillars card, ownedPillars card, not owned

Wallet and balance

$$20$25-$20$25
$20

$25Net Worth

Corner cards and rewards

Green corner card, get $5Red corner card, give $1Money and coinsTrophy

The board

Printed and 3D

The board started on paper, with corner cards that pay or charge you for passing, and became a small 3D city with a road around it. The same board sits under every screen of the game.

The printed Give Get board

Printed board

The board center with the Give Get logo

Board center with the logo

Green corner card: pass to get $20, get $5

Green corner, get $5

Red corner card: give $5 to pass, give $3

Red corner, give $3

Green corner card, second style

Green corner, second style

Red corner card: give $5 to pass, give $1

Red corner, give $1

The 3D Give Get board: a small city with a road around it

The 3D board

Trophy for the national final

Trophy for the national final

The game

Phone and iPad

Each turn is short: spin, move, decide. The board stays on screen, the card for the space you land on slides up over it, and your net worth is always one tap away.

Game screen: loading

Loading

Game screen: main menu

Main menu

Game screen: quick play

Quick play

Game screen: your turn

Your turn

Game screen: the spinner

Spinner

Game screen: the Piggy space card

Space card, The Piggy

Game screen: net worth

Net worth

Game screen: the board up close

The board up close

Lessons

What each space teaches

Every space is a lesson. The card explains the idea in real life first, then how it works in the game, so a student learns why a savings account and a lottery ticket are not the same bet.

Lesson screen: The Chart, investing

The Chart, investing

Lesson screen: The Piggy, saving

The Piggy, saving

Lesson screen: The House, owning

The House, owning

Lesson screen: The Pillars, borrowing

The Pillars, borrowing

Lesson screen: The Ticket, speculating

The Ticket, speculating

National competition

School to national rounds

Schools play against each other in brackets, from local rounds to a national final, with rankings that show every student where they stand.

Competition screen: national competition

National competition

Competition screen: local bracket

Local bracket

Competition screen: finals

Finals

Competition screen: national rankings

National rankings

In the stores

App Store and Google Play

The store screenshots tell the program in four lines: a financial literacy program, learn how money works, practice by playing with friends, compete for scholarship prizes.

Store screenshot: financial literacy program

Financial literacy program

Store screenshot: learn how money works

Learn how money works

Store screenshot: practice with friends

Practice with friends

Store screenshot: compete for prizes

Compete for prizes

Website

Landing page

The landing page went live with the app and sold the game to students and parents in one scroll: learn how money works, practice with friends, compete for scholarships, then download. It is built from the same board renders, phones and colors as the app, with each section on its own tilted color band.

Give Get landing page, desktop, full length

Landing page, desktop

Give Get landing page, phone, full length

Landing page, phone

The program deck

Sold to schools and sponsors

The game is sold as a program to schools, nonprofits and financial firms, so it needed a deck as clear as the game: what the program is, how the game plays, what students learn and how the competition runs.

Program deck: financial literacy program

Financial literacy program

Program deck: financial literacy game

Financial literacy game

Program deck: content platform

Content platform

Program deck: national competition

National competition

Program deck: control your assets

Control your assets

Program deck: move and invest

Move and invest

Program deck: learn

Learn

Program deck: how it works

How it works

What Finance411 gained

Outcomes of the work

A game that is still in classrooms years after launch.

A product in the stores in months

From kickoff in May 2020 to the App Store and Google Play by the end of the year, with play against the computer, multiplayer and a championship mode.

A game teachers bring to class

In one month of 2023, about 1,000 students in Tampa Bay played over 7,000 games in a challenge run by the University of South Florida and Raymond James.

One look on every surface

The logo, board, app, store pages and decks share the same pieces, colors and type.

Built to keep going

The app is still updated and rated 4.6 in the App Store.

Designed at Coreware Labs, Belgrade

Finance411

Thank you!

Have a project in mind?

Let's
talk