Build series · Game design

Game design.

Most people think gamifying an app means adding streaks, badges and a leaderboard. That is the salt and pepper. Here is the rest of the recipe, and how far RepGarden has got with it.

By Ahmed Gadir3 min read

One theme or story

The research found three of fourteen trainer apps with anything you could call a game layer, and every one of them is a scoreboard: streaks, badges, leaderboards. Those mechanics are fine. On their own they do not make an app memorable or make anyone want to open it when nobody is making them. So RepGarden's game design starts somewhere else.

The first thing that lifts any app is one theme, or one story, that ties the whole thing together: the name, the characters, the look, the sounds, the feel and the mechanics all pulling the same way.

One theme ties everything togetherA hub labelled one theme, joined to six nodes around it: name, mechanics, characters, look, sound and feel.namemechanicscharacterslooksoundfeelonetheme
One theme, and the six things it has to agree with: the name, the mechanics, the characters, the look, the sound and the feel.

Think about Space Invaders, the 1978 arcade game. Underneath, it is blocky shapes shooting at other blocky shapes. The story of an alien invasion is what made it stick, and even the shapes on screen were given a part in it: the invaders are drawn as sea creatures, the player is a laser cannon, the blocks are bunkers.

Space Invaders without its story, and with itTwo panels. On the left, rows of plain grey blocks above three grey shapes and a grey block. On the right, the same rows drawn as pixel-art aliens above three bunkers and a laser cannon, with a score line.SCORE 0000SCORE 0000 · THE INVASION
The same rows, the same rules. On the left, shapes shooting shapes. On the right, an alien invasion, and that is the one people remember.

Chess is another good example. Pieces on a board, moved by rules, and the whole thing leans on a medieval battle: a king, a queen, knights and castles.

A carrot, and a name

For RepGarden, the image of a carrot getting more muscular at the gym made me laugh, so that is the theme. The name came with it: RepGarden, which has a nice ring to it. Gardening and fitness are both about growth, consistency and patience, and the whole experience will lean on that. Things grow when you turn up; they do not grow when you don't.

Two cartoon carrots: a thin, drooping one, then the same carrot with big flexed arms and a grin
A carrot before and after the gym. It made me laugh, which is a good sign for a theme.

Benji gave a lot of freedom on this. A theme costs nothing to change at this stage, and it shapes every screen that follows.

The two places it gets used

The next question is where RepGarden actually gets used, because the place decides what the interface can be.

Clients will use the app at the gym, most likely between sets, or maybe on the commute there and back. So nothing busy: no menus inside menus, no complicated mechanics. It has to work with one hand, and it has to be minimal enough that it does not pull anyone away from their workout.

Trainers will use the web dashboard, and honestly, they probably do not want a gamified experience at all. It is a business tool for managing clients and workouts. The job there is to give them as little as possible to think about on top of what they already have to do.

The two places RepGarden gets usedOn the left, a phone labelled clients, at the gym, showing one plant and one Log set button, with the chips between sets, on the commute, one hand and minimal. On the right, a monitor labelled trainers, the web dashboard, showing a clients list and a weekly plan, with the chips a business tool, clients and workouts.Clients · at the gymLog setbetween setson the commuteone handminimalTrainers · the web dashboardCLIENTSTHIS WEEKa business toolclientsworkouts
Clients get one plant and one button, usable with one hand between sets. Trainers get a plain business tool, with the game kept off it.

The mechanics are still open

Next come the core mechanics: the goals, the rewards and the punishments. I am still working those out, and they will get their own entry once they are decided rather than guessed at here.

Three things that lift any app

Whatever the mechanics turn out to be, three things will apply to them, and they apply to anything you are building.

Rewards have to be spendable in the app, otherwise they are meaningless. Remember the Sonic the Hedgehog games? You race along a track collecting rings, and every 100 rings earns you an extra life, which you need when you come up against Dr Eggman. The rings are worth collecting because they buy something. Or take ArabyBuddy, the language-learning app I released: you earn ink as you complete lessons, and you spend that ink on minutes of real-time chat with an AI character to practise your Arabic. Rewards need to have meaning.

The ArabyBuddy app on a phone, with its ink counter and the chat it can be spent on
In ArabyBuddy, ink earned from lessons buys minutes of real-time chat. A reward you can spend is a reward worth earning.

Personalisation goes a long way. People love being able to make something their own, and letting them does more for an app than most features.

Let users take a risk to win a bigger reward. Back to Space Invaders. Every so often a saucer flies across the top of the screen. The player can aim for it and score far more points than an alien is worth, but the cannon can only have one shot on screen at a time, so while that shot is on its way up, the aliens closer to them can take them out. The choice is the fun.

The saucer in Space InvadersAn arcade scene: rows of pixel aliens, a saucer crossing the top with +300 beside it, three bunkers, and the laser cannon at the bottom with one shot on its way up.SCORE 0240+300
Aim at the saucer and the shot is committed: only one can be on screen at a time, and the aliens keep coming down while it travels.

Where things stand

Decided: the theme and the name, and the two venues with what each one's interface has to be. Open: the goals, rewards and punishments, which the next game-design entry will settle. Nothing of the game has been built; these decisions are what the first screens will be drawn from. The thinking is in the RepGarden repository on GitHub.