7

Mufaddal Garhiwala · Assignment 01 · Design an AR micro-experience

FLIP 7 AR

Discover

The shopper finds an unfamiliar card game on a retail shelf.

Scan

They scan the box using a smartphone.

Explore

Virtual cards emerge from the packaging, introducing the game’s visual identity and objective.

Try

The shopper explores the rules, card types, and a short practice round.

Decide

They use what they have learned to decide whether to purchase the game.

DesignerMufaddal Garhiwala
Assignment 01AR micro-experience
PlatformWebAR, no app install
MomentAt the shelf, before buying

One-page proposal

Checkpoint: user, problem, setting, why AR, and the key AR interaction.

The problem

Problem

When customers visit retail stores such as Miniso or other game shops, they often encounter shelves filled with unfamiliar card games. Although the packaging may look attractive, customers may not understand what the game is about, how it is played, what different cards do, or whether it suits their interests.

The back of the packaging may not provide enough information to explain the complete gameplay experience. Customers may therefore need to search YouTube, Instagram, or other online platforms to understand a game before purchasing it. This adds friction to the shopping journey and may cause customers to skip games they might otherwise enjoy.

Who it’s for

User

The primary users are shoppers who are interested in card games but are unfamiliar with the specific games they encounter in stores.

Secondary users include casual gamers, families, groups of friends, and people looking for games to purchase as gifts.

Why not a website

Why AR

A conventional website or video requires shoppers to leave the physical product and navigate to another source of information. AR can bring the explanation directly to the product they are considering.

By connecting digital content to the physical packaging, AR can create a contextual and interactive preview of the game. Customers can explore the mechanics rather than relying only on packaging text or searching for external videos.

Key AR interaction

Discover → Scan → Explore → Try → Decide

1

Discover

The shopper finds an unfamiliar card game on a retail shelf.

2

Scan

They scan the box using a smartphone.

3

Explore

Virtual cards emerge from the packaging, introducing the game’s visual identity and objective.

4

Try

The shopper explores the rules, card types, and a short practice round.

5

Decide

They use what they have learned to decide whether to purchase the game.

Problem & target user

Who is the user, what are they trying to do, and where?

Problem statement

How might we help shoppers quickly understand an unfamiliar card game’s objective, rules, and gameplay before purchasing it, directly from the retail shelf?

New FLIP 7 players need a way to understand the deck, the action cards and the scoring order before their first round, because reading the rulebook aloud stalls the table, and the rules that matter most (bust risk, Flip Three, ×2) only make sense once you see cards laid out.

Persona

The reluctant teacher

“I bought it because it looked simple. Then I spent ten minutes explaining Flip Three and somebody still busted on the first turn.”

Hosts game nights 2 to 4 times a month. Owns the game and explains it every time. Plays with groups of 3 to 6, mixed ages. Phone is always on the table as there are always arguments regarding rules.

Setting

Where it is used

Seated at a table at home, in a café or a student common room. Indoor light, often dim or warm. Cards already dealt out. One phone shared by the group, held up by the teacher or passed around.

Trying to do

  • Get everyone playing within five minutes.
  • Explain the three action cards without a rulebook detour.
  • Settle “wait, does that bust me?” moments fairly.

What gets in the way

  • Rules text is linear, but questions come up mid-round.
  • Scoring order (×2, then plus cards, then 15) is easy to get wrong.
  • The deck distribution is counter-intuitive, so risk is invisible.

Success looks like

  • First round starts in under 5 minutes.
  • New players can say what Freeze, Flip Three and Second Chance do.
  • Fewer rulebook look-ups during play.

Research

Four research papers on why packaging, rulebooks and crowded shelves make card games hard to choose, and how AR helps.

Research paper 1

Buyers cannot fully evaluate a game from its packaging alone

The information gap at the point of purchase

Card-game packaging has limited space to communicate the gameplay, rules, player interaction, difficulty, and overall experience. A buyer may see an attractive box without understanding what actually happens when the game starts.

Research on AR-delivered product information explains how AR can provide additional information at the point of sale without being constrained by the physical packaging.

Imagine a customer standing in front of a wall of card games at Miniso. They see FLIP 7, UNO, Exploding Kittens, and several unfamiliar games. The box artwork catches their attention, but they still have questions:

  • What is the objective of this game?
  • How do I take a turn?
  • Is this a simple party game or a strategy-heavy game?
  • Can I play it with my family or friends?
  • How long will it take to learn?

If the packaging does not answer these questions clearly, the customer must find another source of information before making a confident decision.

Research implication: the physical package attracts attention, but interactive information can help convert that attention into understanding.

Source: Hoffmann, Joerß, Mai & Akbar (2022), Journal of the Academy of Marketing Science

Research paper 2

Understanding written rules creates a learning barrier

Reading rules is different from experiencing gameplay

A written rulebook explains what players are supposed to do, but a new player must mentally translate those instructions into actions, turn sequences, decisions, and outcomes.

For a person unfamiliar with a game, this can involve interpreting terminology, remembering multiple rules, and understanding how different cards affect one another.

The retail AR study by Hoffmann and colleagues identifies the value of providing product information when and where a shopper needs it. It also warns that excessive detail can backfire, especially during busy shopping periods.

For my card-game concept, this supports presenting the rules in small, digestible steps rather than displaying the entire rulebook on a phone screen. For example, when a customer scans FLIP 7, the experience could show:

Objective: what are you trying to achieve?Your turn: what action do you take?Card effects: what happens when a card appears?Winning: how does a round end, and how do you win?

Source: Hoffmann, Joerß, Mai & Akbar (2022), Journal of the Academy of Marketing Science

Research paper 3

AR can improve information access and purchase decision-making

Evidence from physical retail

650 respondents15 retail outlets4 Indian metro cities

A 2024 study by Attri, Roy, and Choudhary examined in-store AR across 15 retail outlets in four Indian metropolitan cities, using survey data from 650 respondents. The study found that AR’s vividness, novelty, and interactivity significantly influenced customers’ perceived practical and experiential value. Practical value was associated with purchase intention.

Source: Attri, Roy & Choudhary (2024), Journal of Services Marketing

Research paper 4

A wall full of games can increase decision effort

The problem is not just the number of choices. It is the effort required to compare them.

99 observations7,202 participants

A 2015 meta-analysis by Chernev, Böckenholt, and Goodman identified four factors that influence choice overload: the complexity of the options, the difficulty of the decision, uncertainty about personal preferences, and the goal of minimizing effort. A separate study on retail assortment and filtering technology found that large assortments can increase decision difficulty and regret under certain conditions, while filtering can help consumers navigate choices.

For a customer looking at a wall of card games, these findings suggest a plausible problem:

  • They may not understand the differences between unfamiliar games.
  • They may not know which games are easy to learn.
  • They may have to search online or ask someone for explanations.
  • They may postpone the decision or choose a familiar game instead.

Source: Chernev, Böckenholt & Goodman (2015), Journal of Consumer Psychology

References

Sources

  1. Hoffmann, S., Joerß, T., Mai, R., & Akbar, P. (2022). Augmented reality-delivered product information at the point of sale: When information controllability backfires. Journal of the Academy of Marketing Science, 50(4), 743–776. doi.org/10.1007/s11747-022-00855-w · open-access full text
  2. Attri, R., Roy, S., & Choudhary, S. (2024). In-store augmented reality experiences and its effect on consumer perceptions and behaviour. Journal of Services Marketing. doi.org/10.1108/JSM-01-2024-0005
  3. Chernev, A., Böckenholt, U., & Goodman, J. (2015). Choice overload: A conceptual review and meta-analysis. Journal of Consumer Psychology, 25(2), 333–358. Kellogg School of Management

User journey

From a sealed box to the first real round, including what happens when AR fails.

StageOpen the boxScan a cardThe revealLearnPracticePlay for real
DoingShuffles; finds the rulebook dense.Opens the link, allows the camera, points at a card.Swipes up; the deck rises and fans out.Taps How to play or Card guide; the group watches.Plays a round against Robin, the bot.Puts the phone down and deals.
Thinking“How long is this going to take?”“Is it working? Why does it want the camera?”“Oh, that’s fun.”“So the 12s are the risky ones.”“38% risk… I’ll Stay.”“Can I check Flip Three again?”
AR doesNothing yet.Scan frame with a ghost of the target; explains why the camera is needed.Haptic tick and sound; “Card found. Swipe up to reveal.”Examples played out with 3D cards at table scale.Real rules engine; live bust risk; coach line at the end.Re-scan any card to jump back to the guide.
Feeling😐 Bored🤨 Unsure🤩 Delighted🙂 Engaged😎 Confident😄 Happy

Task flow: learn what Flip Three does

Main path on the left. Failure states on the right, each with a way back.

Open the FLIP 7 AR linkCamera opens straight into scanning
Camera blockedSay why it is needed and how to allow it; offer Try again
Point at a FLIP 7 cardGhost image shows what to aim at
Not found after 9 secondsTips: fill the frame, even light, or Change Image
Card found, swipe upOr tap the card, or say “Reveal card”
Too dark or lens covered“Too dark to scan. Try more light.”
Menu on the tableHow to play · Card guide · Practice round
Card guide, swipe to Flip ThreeExample plays out: three cards dealt one by one
Card leaves viewScene pauses; “Card lost. Point back at it to carry on.”
Understood: Home or PracticeOne tap back to the menu

AR storyboard

Nine frames from a stalled game night to playing for real.

Prototype

A working WebAR prototype: image tracking in the phone browser, no app install.

Overview

A single web page that opens straight into the camera, tracks a printed FLIP 7 card with MindAR, and draws the scene with three.js so it stands up out of the card and leans toward the phone. Scene time only advances while the card is in view, so nothing plays out unseen.

How to try it

  1. Open the link on a phone over HTTPS and allow the camera.
  2. Point at a FLIP 7 card (or the image set with Change Image).
  3. Swipe up when it says “Card found”.
  4. Pick How to play, Card guide or Practice round.
  5. Pinch to resize; tap Home to start over.

Tech stack

MindAR 1.2.5 image trackingthree.jsWeb Audio (synthesised sound)Web Speech API (optional voice)IndexedDB (custom target stays on the device)

Hosting: GitHub Pages and Cloudflare. The camera will not start inside embedded previews.

Live prototype

Scan it!

ar-5gt.pages.dev

Open on a phone and point it at a FLIP 7 card.

The reveal

A card back peeks out of a 3D FLIP 7 box. Swipe up and the cards fan out, the big 7 rises, then the menu appears.

How to play

Seven steps on a sign on the table, from “Race to 200” to “Add it up”, each with cards played out in front.

Card guide

A carousel of 7 card types with counts, rules and a worked example: “19 doubled is 38, then +10 makes 48.”

Practice round

A real rules engine against Robin: dealing, Hit or Stay, choosing who Freeze and Flip Three hit, live bust risk, and a coach line at the end.

Many ways in

Touch the 3D cards directly, use on-screen buttons, or turn on voice: “Reveal card”, “Make it bigger”, “Practice”.

Failure states

Camera blocked, too dark, lens covered, card lost, target not found: each says what happened and the way back.

Walkthrough video

A 2 to 3 minute walkthrough of the experience.

FLIP 7 AR walkthrough

Video coming soon

Rationale

AR value, accessibility, safety, privacy, and what to test next.

AR value

The cards are already on the table, so that is where the explanation belongs. Examples appear at card scale on the real deck, everyone sees the same thing, and the teacher points at the scene instead of reading text. Risk becomes a number you can see before you choose.

A video cannot react to your choices. A website pulls eyes off the table.

Accessibility

  • Every 3D control also exists as a labelled button for screen readers; status changes are announced.
  • Three input routes: touch on the cards, on-screen buttons, optional voice.
  • Pinch to enlarge for low vision; tap targets 44 px or larger.
  • Respects reduced motion; sound and haptics can be turned off.
  • Cards never rely on colour alone.

Safety

  • Seated, table top use only; nobody walks while looking at the screen.
  • Short sessions: each section is under a minute, then the phone goes down.
  • No flashing; celebration effects are brief and soft.
  • Errors such as “too dark” say what to do instead of failing silently.

Privacy

  • The camera feed is processed on the phone and never uploaded or recorded.
  • A custom target image is stored on the device only.
  • Voice is off by default; before the microphone is requested, the app says the browser’s speech service may process audio (Chrome uses Google’s servers).
  • No accounts, analytics or ads.

Test next

  1. AR vs rulebook A/B: time to first round and quiz score.
  2. Group viewing: can three people follow one phone?
  3. Bust-risk number: does it help, or make play too cautious?
  4. Tracking in real rooms: dim cafés, glossy cards, cards in hand.
  5. Screen readers: VoiceOver and TalkBack run-through.

AI use log

Tools, key prompts, what I changed myself, and limitations.

Tools

  • Claude (Anthropic) for prototype code, rules-engine logic, troubleshooting and the case study page.
  • MindAR and three.js (open-source libraries, not AI).
  • ChatGPT for image and prompt generation.

What I changed myself

  • Add interactions like pinch out with two fingers to make the experience larger.
  • Pinch in with both fingers to make the experience smaller.
  • The fonts must be readable and to the point.
  • Add more finger and voice interactions.
  • There should be voice or audio to make it more personalised.
  • Add audio when the cards are revealed and add micro-interactions. It shouldn’t feel static or boring; it should feel like part of the game, with the same branding and feel.

Limitations

  • Tracking needs a sharp, glare-free target image; glossy cards in dim light lose lock.
  • The camera will not start inside embedded previews; open the page on its own HTTPS address.
  • Voice recognition depends on the browser and may use a cloud service.
  • AI-written code needed manual checking against the official rules.
  • Doesn’t use the official card images, to avoid copyright infringement issues.