This portfolio is under construction — be patient :)
← Back to work

Boop

boop.it
Mobile App UX / UI Design System Fintech

Palm-based payment & identity — wave your hand to pay and access

Role Lead Product Designer
Timeline 8 months · 2026
Platform iOS · Android
Tools Figma · Claude Code · Deepseek · Lookback
Boop palm scanner in use

Pay with a wave, belong with an identity

Boop is a palm-based payment and identity app that turns your hand into a universal key — for contactless payments, venue access, and membership programs — all without exposing personal data.

Designed from the ground up with privacy at its core, Boop integrates World ID verification so users stay anonymous even to the platform itself. The result is a product that feels frictionless and futuristic without sacrificing trust.

The design scope covered two distinct apps: a consumer-facing app for users to manage their palm identity, payments, and memberships — and a separate vendor app for businesses to configure Boop scanners, manage events, and track transactions.

The Challenge

Contactless payments are fast — but they still depend on a physical device. For venues, verifying age or membership means interrupting the flow with manual checks or hardware. While hand-scanning is standard in Asia and emerging via Amazon One in the US, it remains a fresh frontier in Europe. The question is: can we make the body a universal key for massive, everyday adoption?

How it works

01

Create your identity

Sign up with a World ID or Boop account. Your data stays encrypted and private — even Boop can't access it.

02

Register your palm

Scan at a Boop device or at home. Your hand becomes your payment credential and access key.

03

Pay & access

Wave your hand over any Boop scanner to pay at kiosks, verify age, or unlock exclusive memberships and events.

Design principles

01

Privacy by default

Zero data shared. World ID ensures identity without exposure.

02

Frictionless payments

A wave of the hand replaces cards, phones, and PINs.

03

Access control

Automatic age verification and membership gating without manual checks.

04

Unified experience

One app for payments, event access, and merchant management.

Research and benchmarking

The research phase analyzed the gap between technical capability and user trust by auditing market leaders and banking ecosystems. While Amazon One and Tencent proved the speed and high retention (70%+) of palm biometrics, they remain limited by centralized data privacy and regional silos. Specialized players like Redrock Biometrics and Arobix offer superior touchless accuracy but lack consumer-facing ecosystems, whereas World App (World ID) provided the blueprint for decentralized identity using zero-knowledge proofs. Integrating these insights with an analysis of Revolut and modern banking apps confirmed that while financial hardware is already biometric-ready, a massive opportunity remains for an anonymous, platform-agnostic key that prioritizes user sovereignty over data collection.

Amazon One palm scanner Amazon One
Humanity Protocol app Humanity Protocol
Revolut app Revolut
Palm verification Palm scanning UX
Redrock Biometrics Redrock Biometrics
World ID verification World ID

User journey

Before any frame was opened in Figma, every flow was mapped on paper — palm registration, payments, tickets, and the full app — to understand scope and sequence before committing to any visual direction.

  1. Entry — App download via NFC, QR, or Magic Link, followed by Login / Sign-up.
  2. Verification — User provides Date of Birth and grants Biometric Access permissions.
  3. Scanning Choice — User selects between Boop Device or Phone Scanning.
  4. Error Handling — A "Scan Fails / Retry" loop manages unsuccessful biometric captures.
  5. Registration — User completes the process by scanning both hands.
  6. Card Integration — User enters Cards Screen to add a card (scan or manual) and links palm(s) to it.
  7. Activity — User reviews All Transactions and specific Transaction Details.
  8. Management — User updates permissions, links different hands, changes account name, or adds new devices.
User downloads the app via NFC, QR code or magic link
Splash screen
Login / Sign screen
Create a new account
Onboarding
Sets DOB & enables biometric access
Scanning at home with phone
Scanning with a Boop device
Scan fails — retry
Registration — scan both hands
Add a card (cards screen)
All transactions
Change permissions / link a hand
Change name / add new device
Add card by scanning
Add card manually
Transaction detail page
Setting palm(s) to the card

Low fidelity

Low-fidelity sketches were used to stress-test the core flows — registration, payment, ticketing, and the main app surfaces — before committing to any visual direction. The goal was to surface structural issues early, when changes cost nothing.

01

Welcome screen and pairing device

Welcome flow + NFC device pairing — explaining what Boop does before asking users for anything.

Welcome screen 1/3 Welcome screen 2/3 Welcome screen 3/3 Terms & Conditions Tap phone on Boop device Pairing in progress Pairing — scanning prompt All set and ready to go
02

Scanning and registration process

First-time account creation via palm scan. Both hands are scanned sequentially — waiting, reading, and confirmation states for each.

First hand — waiting First hand — reading First hand — done Second hand — waiting Second hand — reading Both palms scanned
03

Home page and core features

The idea was to unify everything in one screen — transactions, membership details, and data-sharing settings.

At this point the idea was to test this in an event.

Home — unified screen Transaction history Home — token balance & VIP Kiosk payment detail
04

Other screens related to the event — not used

Additional event-context screens that were explored but cut — including ticket upgrades and VIP package flows.

Entrance upgrade modal Nethermind event — general view Nethermind event — VIP + party Entrance upgrade — VIP details Your tickets Payment setup Event calendar Personal information & profile

Usability tests were run with the app only — the device wasn't ready for testing yet. Users found the app simple and easy to use, but consistently asked for separate screens. Having transactions, settings, and a profile entry point all in one place felt narrow and created high cognitive load. The unified screen didn't leave room to scale. The core takeaway: the product needed dedicated sections, not a single surface trying to do everything. Despite this, users clearly understood what Boop was about — the concept landed, the structure didn't.

High fidelity V2

Festival Pass
VISA •••• •••• •••• 2345 JAMES MARTINEZ
•••• •••• •••• 8821 SARAH CHEN
•••• •••• •••• 4417 RYO NAKAMURA
VISA •••• •••• •••• 9903 ALEX PATEL
Active Pass
Permissions Screen

Over 5+ months of iterations, the product was continuously refined to reach this point. Despite being satisfied with where it landed, the team recognised Boop as a living product — one that would require ongoing iteration informed by real user behaviour post-launch.

or sign in with
Boop account
World account

Accept the terms and conditions and consent to processing of my biometric data at the event

Date of birth

You must be 18 or older to use Boop.

Account Created!

Welcome to Boop. Your account is ready to use.

HANDS
SUCCESSFULLY
SCANNED
Welcome to Boop. Your account is ready to use
01Splash
02Sign in with Boop account
03Scanning
04Adding card
05Terms
06Date of birth
07Account
01 Auth, splash & onboarding registration

The app now ships as a native binary on iOS and Android, unlocking platform-level haptic feedback throughout the entire flow — from onboarding slides to account confirmation. Users are guided from a clear splash with three entry points, through privacy-first onboarding, terms acceptance, date-of-birth verification, and straight to a confirmed account ready to use.

Splash — three sign-in options Onboarding — Your identity is safe Onboarding — Your hand is your key Terms & conditions — empty Terms & conditions — accepted Date of birth picker Account created confirmation Push notification permission
02 Recovering an account

Switching devices doesn't mean losing access. Users are first asked whether they still have their old device — if they do, a simple QR code flow transfers the account securely. Device management lives inside the Account tab, keeping control always one tap away.

Account access check Add new device from old device Scan QR from old device
03 Registration process

Palm registration can happen at a Boop scanner or later at home. Once near a device, the app guides the user through a step-by-step hand-positioning flow — real-time feedback directs them to move closer, further, or re-centre until both palms are captured. A haptic pulse confirms each successful scan, and a final confirmation screen closes the loop.

Choose registration method Tap phone on scanner Move hand up and down Move hand closer Move hand further away Align to centre First scan complete Hands successfully scanned — loading Hands successfully scanned — confirmed
04 Adding a card

Cards are linked directly to a palm, not just to the account. Users can scan the card with the camera or enter details manually, then assign it to both hands, left only, or right only — giving them precise control over which palm triggers which payment method. The Card tab shows the full wallet state at a glance once setup is complete.

Cards tab — empty state, add card prompt Scan card with camera Enter card details manually Assign palm to card Name the card Cards tab — active cards per hand
05 Core screens

The four main tabs cover everything a user needs day-to-day. Payments lists every transaction with status and rejection reasons. Cards shows the active wallet with per-hand assignments. Permissions lets users toggle palm detection independently for each hand and review linked cards. Account handles profile, device management, and data controls — all in one place.

Payments — transaction history Account — profile and device management Cards — active cards per hand Assign card to left palm Permissions — payment settings

The engine behind the product

A design system isn't about colours — it's about efficiency and trust at scale. Every component was built to be unambiguous, consistent, and extensible.

Boop Transactions screen

Component logic — four-tab navigation

The bottom nav maps directly to the four core concerns of the product. Each tab is a decision about cognitive load — keeping every area focused and immediately accessible without nested menus.

  • Transactions grouped chronologically by date
  • Age verification rejections surfaced inline with context
  • Card onboarding prompt with loyalty points incentive
  • Cryptographic signature trail for full auditability

Typography

Inter throughout — bold display headings for moments of delight, regular weight for transactional clarity. A tight scale that never competes with content.

Colour

Light blue-grey surface (#ECF0F6) with pure black CTAs. Teal for identity, coral-orange for palm — each colour carries a specific semantic meaning.

Components

Button panel, selector, scanner prompt, transaction row, card assignment — a tight component set covering every core interaction pattern in the product.

Scalability

Every token and component was built to extend — merchant dashboards, wearable screens, and partner integrations all share the same base system without forking.

Primitives & semantic tokens

Seven primitive palettes — each with 11 steps — power a complete set of semantic tokens covering text, surfaces, borders, interactive states, status feedback, and the rewards system.

Slate
50 · #F7F8FA
100 · #ECF0F6
200 · #D5DEEC
300 · #B3C3DB
400 · #889EBF
500 · #5C78A3
600 · #425F8A
700 · #2C466D
800 · #1A2E4D
900 · #0D1D35
950 · #061023
Neutral
50 · #FAFAFA
100 · #F5F5F5
200 · #E5E5E5
300 · #D9D9D9
400 · #A3A3A3
500 · #737373
600 · #525252
700 · #404040
800 · #262626
900 · #171717
950 · #070707
Blue
50 · #EFF6FF
100 · #DBEAFE
200 · #BFDBFE
300 · #93C5FD
400 · #60A5FA
500 · #3B82F6
600 · #2563EB
700 · #1D4ED8
800 · #1E40AF
900 · #1E3A8A
950 · #172554
Green
50 · #F0FDF4
100 · #DCFCE7
200 · #BBF7D0
300 · #86EFAC
400 · #4ADE80
500 · #22C55E
600 · #16A34A
700 · #099250
800 · #087443
900 · #065F46
950 · #022C22
Red
50 · #FEF2F2
100 · #FEE2E2
200 · #FECACA
300 · #FCA5A5
400 · #F87171
500 · #EF4444
600 · #DC2626
700 · #B91C1C
800 · #991B1B
900 · #7F1D1D
950 · #450A0A
Orange
50 · #FFF7ED
100 · #FFEDD5
200 · #FED7AA
300 · #FDBA74
400 · #FB923C
500 · #F97316
600 · #E67F00
700 · #C2410C
800 · #9A3412
900 · #7C2D12
950 · #431407
Purple
50 · #F5F3FF
100 · #EDE9FE
200 · #DDD6FE
300 · #C4B5FD
400 · #A78BFA
500 · #8B5CF6
600 · #7C3AED
700 · #6D28D9
800 · #5B21B6
900 · #4C1D95
950 · #2E1065

Text

Aa
text-primary
Maps to: neutral-950
Aa
text-secondary
Maps to: neutral-500
Aa
text-muted
Maps to: neutral-400
Aa
text-disabled
Maps to: neutral-300
Aa
text-inverse
Maps to: white
Aa
text-link
Maps to: blue-600
Aa
text-error
Maps to: red-600
Aa
text-success
Maps to: green-800
Aa
text-warning
Maps to: orange-600

Background

Aa
bg-page
Maps to: slate-100
Aa
bg-default
Maps to: white
Aa
bg-subtle
Maps to: neutral-100
Aa
bg-muted
Maps to: neutral-200
Aa
bg-app
Maps to: neutral-950
Aa
bg-keyboard
Maps to: neutral-200

Surface

Aa
surface-default
Maps to: white
Aa
surface-raised
Maps to: neutral-50
Aa
surface-glass
Maps to: white / 40%
Aa
surface-overlay
Maps to: black

Border

Aa
border-subtle
Maps to: neutral-100
Aa
border-default
Maps to: neutral-200
Aa
border-strong
Maps to: neutral-300
Aa
border-focus
Maps to: blue-500

Interactive

Aa
interactive-primary
Maps to: neutral-950
Aa
interactive-primary-hover
Maps to: neutral-800
Aa
interactive-disabled
Maps to: neutral-400

Status

Aa
status-success
Maps to: green-800
Aa
status-error
Maps to: red-700
Aa
status-warning
Maps to: orange-500
Aa
status-info
Maps to: blue-500
Aa
rewards-primary
Maps to: purple-500

Scale & shape

A single spacing scale from 4px to 128px keeps rhythm consistent across every layout. Nine radius steps — from sharp to pill — define the shape language of every component.

Spacing

space-1
4px0.25rem
space-2
8px0.5rem
space-3
12px0.75rem
space-4
16px1rem
space-5
20px1.25rem
space-6
24px1.5rem
space-8
32px2rem
space-10
40px2.5rem
space-12
48px3rem
space-16
64px4rem
space-20
80px5rem
space-24
96px6rem
space-32
128px8rem

Border Radius

none0px
sm4px
md8px
lg12px
xl16px
2xl20px
3xl24px
4xl32px
fullpill

Typography

Inter is the primary typeface across all surfaces. Styles are defined as tokens combining size, weight, and line-height.

display/bold Boop 64px · Bold · 1.05
h1/bold The quick brown fox 36px · Bold · 44
h1/medium The quick brown fox 36px · Medium · 44
h2/bold The quick brown fox 32px · Bold · 40
h2/medium The quick brown fox 32px · Medium · 40
h3/bold The quick brown fox jumps 24px · Bold · 32
h3/medium The quick brown fox jumps 24px · Medium · 32
h4/bold The quick brown fox jumps over 20px · Bold · 28
h4/medium The quick brown fox jumps over 20px · Medium · 28
h4/regular The quick brown fox jumps over 20px · Regular · 28
body/bold The quick brown fox jumps over the lazy dog 16px · Bold · 24
body/medium The quick brown fox jumps over the lazy dog 16px · Medium · 24
body/regular The quick brown fox jumps over the lazy dog 16px · Regular · 24
small/medium The quick brown fox jumps over the lazy dog 14px · Medium · 20
small/regular The quick brown fox jumps over the lazy dog 14px · Regular · 20
x-small/regular The quick brown fox jumps over the lazy dog 12px · Regular · 16
x-small/light The quick brown fox jumps over the lazy dog 12px · Light · 16

Button

Core interactive element with three variants, two sizes, three states, and optional icon support. Full-pill shape, min-width 260px.

Primary · Large (55px)
Primary · Small (48px)
Secondary · Large (55px)
Secondary · Small (48px)
Tertiary · Large
Height (lg)55px
Height (sm/default)48px
Min width260px
Padding16px · 4px
Border radiusfull (pill)
Primary bg#070707
Secondary border#475569
Disabled#A4A7AE

Input

Floating-label text field for collecting user information. 62px height, 12px radius, 16px horizontal padding. Supports placeholder, helper text, and six interaction states.

Empty
Card Number •••• •••• •••• ••••
Focused
Cardholder Name Enter name
Filled
Card Number 4452 2320 1900 9031
Your card information is secure
Error
Expiry Date MM / YY
Please enter a valid expiry date
Success
Cardholder Name Carlos Mera
Name verified successfully
Disabled
Account ID ACC-00482
This field cannot be edited
Height62px
Border radius12px
Padding16px · 12px
Label12px Medium #A3A3A3
Value16px Regular
Default border1px #A4A7AE
Focus border2px #3B82F6
Error border2px #EF4444

Selector

Segmented control for switching between views or modes. Full-pill container at 68px with an 8px inset, active pill at 52px.

First active
Second active
Three options
Container height68px
Active pill height52px
Inset padding8px
Border radiusfull (pill)
Text16px Medium
Active text#070707
Inactive text#717680
Container bg#F2F4F7

Option Card

Glass-effect radio button card for selecting a single option. 80px height, 8px radius, backdrop blur. Used in recovery and onboarding flows.

Unselected
Recover with an Orb
Selected
Recover with an Orb
Multiple options
Recover with an Orb
Use backup email
Contact support
Height80px
Border radius8px
Padding16px
Gap8px
Backgroundrgba(255,255,255,0.4)
Backdrop blur20px
Border#CBD5E1 (slate-300)
Radio size16 × 16px

Toggle

Boolean switch with ON/OFF text labels. 62px wide pill, two sizes. ON uses black (#070707), OFF uses gray (#A3A3A3). Optional bottom label below the track.

S · ON
ON
Scanning
S · OFF
OFF
Scanning
M · ON
ON
Scanning
M · OFF
OFF
Scanning
Disabled
ON
Scanning
No label
OFF
Width62px
Height S28px
Height M32px
Knob S24px
Knob M28px
ON bg#070707
OFF bg#A3A3A3
Label text14px Regular white

Transaction Item

List row for displaying transaction details. Two right-side variants — price or status. Optional colored badge. Full-width with 16px vertical padding and a bottom divider.

Kiosk payment 14:21
£-2,45 Age verification
Entrance 14:21
Rejected Age verification
Entrance 14:21
Approved
Coffee & Croissant 09:15
£-4,20
Transaction sent 18:32
£-45,67 Pending
Row padding16px vertical
Divider#E2E8F0
Title16px Medium #334155
Time12px Regular #64748B
Badge padding8px · 2px
Badge radius12px
Badge error#991B1B @ 70%
Badge warning#F59E0B @ 70%

Stepper

Step-based progress indicator for multi-step flows. Full-width pill segments, 8px gap, two heights: small (4px) and large (8px).

Small · 4px
1 / 4
2 / 4
3 / 4
4 / 4
Large · 8px
1 / 4
2 / 4
3 / 4
4 / 4
Height (small)4px
Height (large)8px
Segment gap8px
Border radiusfull (pill)
Active#070707
Inactive#E5E5E5
Steps4 or 5
Width100% (flexible)

Closing the loop

Did we hit the goals set in section 2? Here's where the numbers and the human feedback meet.

Research & Usability Insights

During the initial testing phase, we discovered that 90% of users successfully navigated the base payment flow without assistance. However, several critical friction points during the biometric enrollment and card management phases led to key design iterations.

1

Bridging the "Hardware-Mobile" Gap

Discovery

We originally assumed users would focus entirely on the physical Boop device during palm enrollment. Instead, testers remained fixated on their mobile screens, leading to a "disconnection" from the hardware process.

Pivot

To reunite the two experiences, we implemented contextual haptic feedback and "Happy Path" system notifications. Now, if a user needs to adjust their hand position or switch hands, the phone "taps" them with a specific haptic pattern — an immediate physical cue that doesn't require constant screen monitoring.

2

Enhancing Transaction Transparency

Discovery

Users felt the transaction history was too abstract. They struggled to recognize payments without a visual anchor for the physical establishment.

Pivot

We introduced establishment-specific iconography. Every transaction now features a brand or category icon (e.g. a "Kiosk" or "Cafe" badge), allowing users to categorize their spending at a glance.

3

Gesture-Based Card Management

Discovery

While the app was intuitive, users expressed a preference for more tactile interactions when linking their physical cards to their Boop Identity.

Pivot — Future Iteration

We are moving away from standard taps toward a drag-and-drop / pull-to-link system. This allows users to "drop" their digital cards onto the Boop ID, making the link feel more permanent and secure.

4

Managing Data Limitations with Design

Discovery

Users wanted their digital card visuals in the app to be 100% identical to their physical cards. However, API limitations on retrieving specific card skins created a visual mismatch.

Pivot

We shifted toward a "Universal Boop Card" aesthetic that focuses on branding and utility rather than mimicking physical plastic — setting a clearer expectation of the digital-first nature of the service.

What I'd do with more time
01

Merchant dashboard

The B2B side of the product — venue operators need real-time access controls, membership management, and transaction analytics. This is a complete design problem in itself.

02

Accessibility audit

Biometric-first flows have inherent exclusion risk. A full a11y pass — including alternative authentication paths for users who can't use palm scanning — would be the next priority.

03

Wearable extension

The payment gesture maps naturally to a watch interaction. Designing the companion watchOS app — keeping the same DS — is the clearest expansion path.