Open for work

6+ months6 people

Gamifying the Metro Commute to Make Greener Travel Rewarding

A live quiz that makes the metro ride the best part of the commute.

Role
Lead UI/UX Designer
Focus
Engagement Design, Gamification
LIVE NOWRound 01 of 10
Live now
Round 01 is starting
Win up to ₹1000
riders playing

01The problem

Empty seats on a train the city paid billions for

Cities spend billions on metro lines to cut emissions and traffic. Then commuters choose the more convenient ride. Each empty seat is lost fare, and one more commuter who stays in the habit of taking a cab.

What everyone else missed. Transit apps do schedules and routes. Ride-hailing apps do rewards and engagement. Nobody asked the obvious question: what if the ride itself was the reward?

Before

Plan the trip

Transit appsSchedules and routes

A few minutes

At the station

The stationDisplays and announcements

25 to 40 minutes

The ride

NothingThe longest part of the commute, and the part nothing is made for. A phone full of scrolling.

The last minute

Getting off

AnnouncementsIf you hear them

The commute today: a schedule, a route, and a phone full of scrolling.

Who did what. I led the design on a team of six.

What riders told us

My team spent 8 weeks riding the Metro at peak hours. We interviewed 60 riders, regular and occasional. We tried 3 competing apps. We timed every tap in real conditions: standing, seated, crowded, rush hour. The clearest pattern was that commuters wanted something to do.

Peak hours were the hardest time to ask. Riders did not want to stop for a survey, so Reddit threads and community forums brought in more of the answers.

Affinity map

Notes from 60 rider interviews and 8 weeks of ride-alongs, clustered into five themes

The boredom tax

25 to 40 minutes on the phone

Scrolling, mindlessly

Time feels wasted

72%scroll the whole ride

No incentive

Ride-share apps reward riders

The metro offers nothing back

Zero gamification

84%want rewards

Alone in a crowd

Peak hours are packed

…and silent

No sense of community among riders

67%feel disconnected

The carriage

Poor lighting

One free hand

Standing room only

Peak hoursmost apps pretend otherwise

No habit

No reason to come back

No engagement loop

The metro stays "just transport"

37%ride regularly

Four kinds of rider

  • The Daily Grinder

    5 to 6 rides a week

    Wants the routine to run smoother.

  • The Weekend Explorer

    Rides for the city

    Wants the trip to mean something.

  • The Eco-Conscious

    Already chose the metro

    Wants credit for it.

  • The Ride-Share Switcher

    Our target

    Needs a reason to change.

The journey map, and the empathy map

We mapped the trip for the Ride-Share Switcher, the rider we most needed to win over, phase by phase.

Journey map

The Ride-Share Switcher, on a peak-hour ride. Goal: get there, without the ride feeling like lost time.

Before the ride

At the station

On the train

Getting off

Doing

Weighs a cab against the metro

Waits on a crowded platform

Stands with one hand on the rail and scrolls for 25 to 40 minutes

Listens for the announcement, glances at the display

Thinking

"Is the metro worth it today?"

"How long till the next train?"

"This is dead time."

"Wait, was that my stop?"

Feeling

Undecided

Waiting

Bored, alone in the crowd

Anxious

Pain points

Cab apps reward the ride. The metro gives nothing back.

Bad light and no room to move

One free hand, no one to talk to, nothing to do

Heads down in the phone, the announcement and the display both slip past. Riders miss their stop.

Opportunities

A game at a set time, and a prize worth riding forHome card · mystery prizes

A countdown that ends as the ride beginsStarting soon · Get Ready

A live quiz the length of the ride, played with the carriageRounds · live rider count

A game on the phone adds to the problem, so the game has to carry the stop itselfStop bar · stop alert

Empathy map

The Ride-Share Switcher: drives some days, takes a cab on others, rides the metro when the traffic is bad, and needs a reason to pick it.

Says

"For me the metro is just a way to get from A to B."

"When I ride alone, it's my phone or the window. There's nothing else to do."

"At peak hours it's packed, and I usually travel alone, so there's no one to talk to."

Thinks

A cab costs more, but at least I get my own space.

If I get a seat, I try to grab a quick nap. What else is there to do?

I have my own vehicle. The metro skips the traffic, but it doesn't go everywhere I need. So what's in it for me?

Ride-Share
Switcher

Does

Checks cab fares before leaving

Stands, one hand on the rail, and scrolls for 25 to 40 minutes

Listens for the stop, and sometimes misses it

Feels

Bored

Alone in a crowd

Unrewarded for choosing the metro

Anxious near the stop

Pains

No reward for riding

Dead time

Bad light, one free hand

Gains

A reason to pick the metro

Time that counts for something

Company on the ride

02What was decided, and what it cost

Ride smart. Quiz smart. Win smart.

In one line, the idea was to turn dead commute time into a live competition.

From MVP to what shipped

Three builds, each tested on real rides. The obvious route was a classic game screen: a big play button with the menu around it. I took the home page the other way, towards an app you check between stops, with the next game on a card. From there the layout moved step by step into the reach of one thumb.

The MVPThe basic build

Home

Game

A play button in the middle of the screen, the menu in an arc around it. Nothing sat where a thumb rests.

The first testA game with a set time

Home

Game

What changed: a card with the next game time and a four-tile menu. Both sit in the top half, so the button and the answers are a stretch for one thumb.

What shippedBuilt for one thumb

Home

Game

What changed: the city moved to the top and the game card to the bottom. The button, the answers and the tabs sit where the thumb rests.

Natural reachStretchHard to reachThe main action

The layout in three stages, with the thumb zone for a right-handed, one-thumb grip (after Steven Hoober)

Trivia, because it fits the length of a ride.

  • Why trivia · 1Anyone can playUnlike fitness or location games, nobody is left out.
  • Why trivia · 2Short roundsGet on at any stop and play the next round.
  • Why trivia · 3Worth bragging aboutWinning is something you share.
  • Why trivia · 4You learn your cityEvery question is about the place outside the window.

Before the game

NEXT GAMEin 2 hr 15 min
6:30 PM
Ride the metro, play the quiz
Win up to ₹1000

  1. Off-white until a game is on. The time of the next one is the big line, with a practice game meanwhile.

Live

LIVE NOWRound 01 of 10
Live now
Round 01 is starting
Win up to ₹1000
+31 riders playing

  1. Lime the moment you can join, with the riders already playing shown on the card.

Next stop

Next stop Palarivattom 10 min
Round 02 of 10 34 playing
03s

Bekal Fort is in which district?

  1. The next station and the minutes to it, on every game screen.

Your stop is next

Your stop is next: Kaloor 2 min

Round 02 starts in

05SECONDS

34 riders playing

02030405··· 10
Rounds won01
Your rank04th
Fun FactKochi is home to India’s first Water Metro, with electric boats that link the city’s islands.

  1. Deep orange when your stop is next: finish the round, then get off.

The six directions we tried before trivia

Every idea had to pass four tests. Each of these stopped at one.

Concept screening
ConceptSafe to play on a trainBrings riders to the metroCheap to runBrings people backDecision

Puzzle mini-games

A platform of quick games, like Fruit Ninja or Tetris.

Kept heads down on the phone for too long. On a moving train, that is a hazard.

FailedNot what ruled it outNot what ruled it outNot what ruled it outDropped

Lane-switch game

Tap to switch metro lanes. The most fun of the lot.

Same problem as the puzzles: it kept riders on the phone too long. And only the top scorer could win.

FailedNot what ruled it outNot what ruled it outNot what ruled it outDropped

A quiz for everyone

Open to anyone, no ticket needed.

Nothing tied it to riding, so it would not bring anyone to the metro.

Not what ruled it outFailedNot what ruled it outNot what ruled it outKept for later

A QR code on the platform

Scan to play, the way riders already scan to get in.

The code would change every day. A physical product, costly to run.

Not what ruled it outNot what ruled it outFailedNot what ruled it outKept for later

Gamify the metro app

Rewards and milestones in the app as it is.

Few riders use the app, and most would have to download it first.

Not what ruled it outNot what ruled it outNot what ruled it outFailedDropped

Spin to win

A wheel, simpler still.

Too thin to bring anyone back.

Not what ruled it outNot what ruled it outNot what ruled it outFailedDropped

Live trivia

A quiz the length of the ride, played with the carriage.

PassedPassedPassedPassedChosen

✕Ruled it out·Not what ruled it out✓Passed

Six directions against four criteria, and what we did with each

Mystery prizes on a scratch card instead of a cash amount.

A scratch card makes you wonder what you won, and the wondering brings people back. A prize code lasts 30 days, then it expires.

A high-score game has one winner, so most riders stop trying. Quizt rewards at three levels: every round has a winner, the champion takes the grand prize, and every 10 rides earns a reward, win or not.

A high-score game

Top score

One rider

Everyone else: nothing to play for

Quizt

Grand prize

The champion, top of the board after the last round

Round prize

Each round's winner, a scratch card straight away

Milestone reward

Every rider, every 10 rides, win or not

Who can win. Each tier is as wide as the riders it reaches

Prizes came from partners, and partners wanted numbers first. The metro company’s backing opened the first doors: small vendors, close contacts, and mid-sized brands that wanted the promotion. Sales brought them in.

Scratch

Scratch here

Milestone card

15d left

Earned for completing 10 rides · 18/01/21

Drag your finger across the card to see what you won

  1. A mystery until you scratch: drag a finger across the card to see what you won.

Milestone progress

Prizes

06 cards waiting for you

MILESTONE REWARD PROGRESS03 more rides to your next reward 07/10
0506070809
03d left ₹200 offat Bata 73d left Wellness passat ZenFlow Wellness

  1. Every 10 rides unlocks a milestone reward, win or not.

Prize cards

Prizes

06 cards waiting for you

MILESTONE REWARD PROGRESS03 more rides to your next reward 07/10
0506070809
03d left ₹200 offat Bata 73d left Wellness passat ZenFlow Wellness

  1. Gold for the grand prize, teal for cards still to scratch, and neutral once revealed.

Design for the carriage: high contrast, one thumb, one screen at a time.

  • Rule 1Contrast firstDark cards with 2px ink frames on a teal field stay readable in harsh window light. One pink button per screen, so the next step cannot be missed.
  • Rule 2One thumbEvery main action sits in the lower third of the screen. Every target is at least 48px, for when the train lurches.
  • Rule 3One thing at a timeA 10-second countdown. The question. Four answers, A to D. The result, straight away. No tutorial, no menu.
Next stop Palarivattom 10 min
Round 02 of 10 34 playing
03s

Bekal Fort is in which district?

  1. Round, riders playing, then the question in big type, readable on a moving train.

  2. Ten seconds, the same for everyone.

  3. Four answers, each 60px tall. Your pick turns ink when tapped.

Every colour has one job, so a glance tells you what a thing is.

Ink #0D1617 · cards, outlines, hard shadows
  • LIVE NOW

    Live #D4FF2A

    The game on now, the countdown, the current round.

  • Join the Game →

    Action #FF6B9D

    The one main button on each screen, and count badges.

  • Grand prize

    Prizes #FFD966

    Scratch cards, trophies, the champion.

  • Your rank 01

    You #64C8FF

    Your ring, your tiles, your numbers.

  • 03d left

    Hurry #FFB156

    The last 3 seconds, expiring prizes, your stop.

  • Correct

    Won #5AE67A

    Right answers and rounds won.

  • Your pick

    Missed #FF7878

    Wrong picks and missed rounds.

  • Fun fact

    Fun #C89FFF

    The fact on the Get Ready screen.

  • Pending

    Selected #7EECD4

    Selection, links, switches on, and the game screens' background.

A contrast check

How the colours hold up on the ink card.

WCAG contrast checkEach colour on the ink card #0D1617

  1. Aa

    Body textWhite on the ink card · #FFFFFF

    18.4:1

    AAA

  2. Aa

    LiveLIVE NOW, the countdown · #D4FF2A

    15.9:1

    AAA

  3. Aa

    PrizesGrand prize, trophies · #FFD966

    13.4:1

    AAA

  4. Aa

    SelectedSelection, switches, the game field · #7EECD4

    13.0:1

    AAA

  5. Aa

    WonRight answers · #5AE67A

    11.4:1

    AAA

  6. Aa

    HurryThe last 3 seconds, your stop · #FFB156

    10.2:1

    AAA

  7. Aa

    YouYour rank, your tiles · #64C8FF

    9.8:1

    AAA

  8. Aa

    FunThe fun fact · #C89FFF

    8.6:1

    AAA

  9. Aa

    MissedWrong picks · #FF7878

    7.2:1

    AAA

  10. Aa

    ActionThe one main button · #FF6B9D

    6.9:1

    AA

AA, 4.5:1, the minimum for body textAAA, 7:1, the enhanced level

Every colour passes AA. The pink button, at 6.9:1, stops just short of AAA

Tell players how fast they were, and where that put them.

A round ends with “Lightning Fast! You won in 1.8s” or “Close Call”. You see your time (2.4s), your rank (32) and the winner’s time (1.3s). “Lightning Fast!” beats “Correct!” because it respects skill and gives you something to chase.

Early versions said it in plain text, “You won”, and a few cheesier lines. Sticker lettering made the moment stand out.

Won

Next stop Palarivattom 10 min
ROUND 02 RESULT

Lightning Fast!

You won this round in 1.8s

Round 02

You won a prize card. It's waiting in Prizes

Your time1.8s
Your rank01st
030405··· 10

Round 03 starts in 10s
Joining you automatically

  1. A round won is a prize card, waiting in Prizes straight away.

Missed

Next stop Palarivattom 10 min
ROUND 02 RESULT

Close Call!

ROUND WINNERSreelakshmi Unnikrishnan Pillai1.3s
Correct answerD · Kasaragod
Your pickB · Kannur
Your time2.4s
Your rank32nd
030405··· 10

Round 03 starts in 10s
Joining you automatically

  1. The right answer beside your pick, in green and red, so there is no guessing what went wrong.

The game, moment by moment

Next stop Palarivattom 10 min

Get Ready!

SECONDS

34 riders playing

0102030405··· 10
Win up to ₹1000
Fun FactKochi is home to India’s first Water Metro, with electric boats that link the city’s islands.
Next stop Palarivattom 10 min
Round 02 of 10 34 playing

Bekal Fort is in which district?

Get Ready, then the question From the countdown to the last second of a round.
Next stop Palarivattom 10 min
ROUND 02 RESULT

Lightning Fast!

You won this round in 1.8s

Round 02

You won a prize card. It's waiting in Prizes

Your time1.8s
Your rank01st
030405··· 10

Round 03 starts in 10s
Joining you automatically

A round won The moment itself, with confetti.

Your avatar

Your avatar

Your avatar

Your avatar

Your avatar

The avatar maker Skin tone, hair, facial hair, accessories and clothing, one tab at a time.

03What happened

More rides, and friends brought along

Quizt ran for three months, until COVID lockdowns stopped the rides. It was a small beta, with a steady 40 to 60 players in the launch month, so read these numbers as an early signal from a small group.

  • 64%More usage over the three months it ran
  • 3.2Quizzes per journey, on average
  • 40%Of players referred a friend

I used to dread my commute. Now I actually look forward to the metro ride. Yesterday I beat 47 people and won ₹150 cashback.

A beta testerBeta programme

After a win

Next stop Palarivattom 10 min
CHAMPION

WinnerWinner!

Top of the board after 10 rounds

YOUR GAME

See all
Rounds won04/10
Correct09/10
Accuracy90%

LEADERBOARD

See all
  1. Arun Das 03 wins 02
  2. You 04 wins 01
  3. Simran Kaur 02 wins 03
You topped the board01st
Back to home

  1. Share your win, one tap from the game summary.

Results tab

Results

See how you did and who won

LATEST GAMEToday · 6:30 PM34 riders · 10 roundsLeaderboard
  1. Arun 03 wins
  2. Priya 04 wins
  3. You 02 wins
You finished 03rd02 rounds won · avg 2.3s
YOUR STATS
Games played24
Rounds won11
Times champion02
Best rank01st
Average lock-in time2.1s
PAST GAMESShow older games

  1. Stats to beat next time: games played, rounds won, times champion, best rank.

04What I learned

Some assumptions had edge cases

  • LearnedEveryone wins, but not the same prizeA short rider can still win a round, and the scratch card that comes with it. The grand prize goes to the champion after the last round, and only a long ride lasts that long.
  • Next timeA live QR code on the platformThe code on the ticket was easy: every ticket is printed, so each code is used once. A code on the platform would have to keep changing, so we set it aside. It is still the only idea that ties the game to being at the station.
  • Next timeA lighter game for everyone elsePeople off the metro could play for smaller rewards. It brings new players in without taking prizes away from riders.

Got an Idea Worth Obsessing Over?

Have a Product in Mind?

Let's get started