Ribbit.DealsApp UI — High Fidelity Spec →  ·  Architecture →  ·  Wireframes →
the app, in full color…

Ribbit.Deals App — High-Fidelity UI

Six screens in the finished design system, presented in phone frames with working navigation — the tab bars are real links, and the redemption flow is fully clickable through the live RIBBIT moment.

Consumer journey — Vegas register
1

Sign-Up

Four fields, SMS opt-in, the privacy promise, straight into Discover.

2

Discover

Stylized map with price-bubble pins, filters, distance-sorted deal cards.

3

Offer → Scan → RIBBIT

The showpiece: geofence-gated redeem, camera scan with animated scan line, and the live celebration screen.

4

Rewards

Points with a next-unlock bar, the real badge set, one-tap referrals, ledger-fed activity.

Business tools — professional register
5

Dashboard

Live tiles, a real bar chart, one-tap pause, void actions, month-to-date fees.

6

Create Offer

Guided form with ghost examples, caps, radius slider, and the worst-case cost preview.

Demo route: Sign-Up → Discover → tap the pizzeria → Redeem → Simulate scan → RIBBIT (hand the phone over — the clock is live) → See my rewards. Then flip to the Dashboard for the business side and point out the Void buttons and the cost preview in Create Offer. Wireframe versions remain at pwa.html for reference.