All projects

Kiosk Design · App Design · UX Research

Scoops of Joy

A self-ordering kiosk and companion app for Urban Scoops — an Indian ice cream brand — designed to make the ordering experience as delightful as the product itself.

Role

UI/UX Designer (Solo)

Tools

Figma · Adobe Photoshop

Platform

Kiosk + Mobile App

Year

2024

Urban Scoops self-ordering kiosk — a slim white touchscreen kiosk displaying the Creamy & Fresh ordering interface with ice cream imagery

01 — Problem & context

The ordering gap


Small and mid-size ice cream parlours in India often rely on counter staff to take orders — a process that slows down during peak hours, creates language barriers (especially in multilingual cities), and puts pressure on a typically thin workforce.

Urban Scoops wanted a self-ordering solution that would let customers browse, build their order, and pay — without waiting in line or struggling to communicate preferences. The challenge was making this feel joyful, not clinical.

02 — My specific contribution

What I designed


Working solo across research, information architecture, and visual design, I delivered:

  • End-to-end kiosk ordering flow (attract → language → browse → cart → payment → confirmation)
  • Companion mobile app UI for the same catalogue and ordering system
  • Multilingual onboarding — Hindi, Marathi, English, and Gujarati
  • Microinteraction design for cart feedback and upsell moments
  • Physical kiosk mockup for presentation

03 — Research

Understanding kiosk users


I observed ordering behaviour at a few quick-service ice cream counters in Mumbai. Three patterns stood out:

  • Decision paralysis — large menus with no visual hierarchy made choosing hard
  • Language friction — customers defaulted to pointing rather than reading English-only menus
  • Cart anxiety — customers were unsure if their selections were registered, leading to repeated taps or asking staff

These findings shaped three design principles: visual-first browsing, mother-tongue comfort, and instant feedback at every tap.

04 — Process

The ordering flow


I mapped a linear, low-friction path: attract screen → language select → browse catalogue → add to cart → upsell → payment method → UPI/cash → order confirmation. Every step was designed to require minimal reading.

Kiosk language selection screen: 'Choose your language to uncover the flavours of our ice cream' with options for Hindi, Marathi, English and Gujarati
Kiosk attract screen showing an Urban Scoop ice cream cup with the tagline 'Order & Pay Here. Treat Yourself!' and 'Touch To Order'

The language screen is the first human touchpoint — leading with regional scripts immediately signals inclusivity. The attract screen leads with appetite: bold food photography rather than text or icons.

05 — Design decisions

Key choices


Logo

The Urban Scoops logomark combines fruit scoops and a spoon — instantly communicating both indulgence and choice. The B&W version confirms it works across single-colour print contexts like receipts and packaging.

Scoops of Joy colour logo — fruit scoops and a spoon in warm colours
Scoops of Joy black and white logo — monochrome version

Colour palette

The palette leads with a warm neutral background, a deep navy for primary CTAs, a coral-red for interactive buttons, and white for content blocks — keeping the interface warm and appetite-forward.

Scoops of Joy colour palette: Background (warm grey), CTA Button #053062 (navy), Buttons (coral-red), Content Block white

Catalogue — visual-first grid

App product listing showing a grid of ice cream flavours — Varanasi Paan, Taj Mahal Pistachio, Kashmir Saffron Dream and more, each with a photo, rating, and price

Photo-led cards, not text lists

Each flavour card leads with a large photograph of the scoop, followed by the name, a star rating, and price. The + button is orange — the only coloured element — making the add action unmissable.

The breadcrumb (Today's Mood · Store · Ice Cream Packs) and the search bar give power users shortcuts without cluttering the first-time experience.

Cart — inline review before pay

Cart screen showing selected items (Varanasi Paan, Udaipuri Ghevar, Chennai Chocolate), subtotal ₹1,238.92, tax ₹44.93, total ₹1,432.92, and a Pay button

One-screen checkout

The cart shows item thumbnails, names, and quantities — plus a live running total. The Pay button is full-width orange, anchored at the bottom so it's always reachable on a kiosk touchscreen.

Tax is surfaced before payment — a deliberate transparency choice that reduces surprise at the terminal.

Product card — the item design system

Individual product card showing Chandigarh Chocolate Brownie ice cream with a photo of the scoop, price ₹179.99, and an orange + button

Consistent card anatomy

Every product card follows the same structure: photo at top, flavour name, rating (★), price in grey, add button in accent orange. The rounded corners and subtle drop-shadow differentiate the card from the pink-striped background without heavy borders.

Cup icon — a custom animation system

The brand mascot — a minimal paper cup — needed to communicate different states: empty, adding a scoop (in various flavour colours), and a celebratory "filled" state. I designed a complete sprite system covering all permutations.

Sprite sheet showing all states of the ice cream cup icon: empty, with pink scoop, yellow scoop, and green scoop in various tilt and fill positions, ending in a celebratory state

06 — The kiosk flow

From tap to receipt


The full payment and confirmation flow was designed to handle both digital (UPI) and cash payments while keeping the experience consistent and reassuring at each step.

Order confirmation screen: 'We're preparing your order, please take your receipt. Your Order No. 13'
Front view of the Urban Scoops kiosk showing the attract screen with ice cream photography and Touch To Order prompt

07 — Outcome

Result


4

Languages supported

6

Key flow screens

32

Catalogue items

The kiosk design was validated through informal testing with 5 users across different language backgrounds. All participants completed an order without staff assistance. The upsell screen ("Give in to temptation") converted 3 out of 5 testers into adding an additional item — confirming that a playful, low-pressure prompt outperforms a utility-style “Add more?” dialogue.

08 — Reflection

What I'd do differently


Kiosk design forced me to think about touch target sizes and arm fatigue in a way mobile design doesn't. If I revisited this, I'd push the minimum tap target from 44px to 60px+ given that kiosks are often used at an awkward angle and distance from the body.

I'd also invest more in the offline/error state design — what happens when the payment terminal times out or a UPI transaction fails. These edge cases were sketched but not fully resolved in this version.