Wallio
A loyalty card's website, with a card builder
A new marketing site for Wallio, a loyalty card that lives in Apple and Google Wallet: one story about one gesture at the counter, a card builder for shop owners, and every product screen drawn in code, in four languages.
- Role
- Product marketing, design, development
- Status
- Built; the launch is on hold
- Built with
- TanStack Start, React Aria, Tailwind, Motion
4 languages, French first
14 sections on the home page
2 wallets: Apple and Google
I · The product
A loyalty card in the phone
Wallio gives independent shops a loyalty card that lives in their customers' Apple Wallet or Google Wallet: no paper card, no app to install. It's for cafés, barbers, hammams and bakeries, in Morocco first, then France, Spain and Romania.
Its founder asked for a new marketing site. I designed and built it. The product itself is a separate app; this site explains it and sells it.
II · What I made
The site, in four languages
Designed and built in full, in four languages:
- A home page that tells the product's story, from the counter to the price.
- A card builder, where a shop owner designs their card before signing up.
- Every phone, pass, notification and dashboard on the site, drawn in code.
- A press kit, the legal pages, and sign-up screens still to be connected to the product.
III · The story
One gesture at the counter
The home page follows one story: paper cards get lost and regulars drift away; the card now lives in their phone; one gesture at the counter; it brings them back; it costs about a coffee a day. It opens on that gesture: a phone taps, a stamp lands, a notification arrives.
Everything happens in one small gesture: a phone meets a card, a stamp lands, a customer comes back.
IV · The card builder
Design your card first
A shop owner picks a name, a reward, colours, a pattern, a banner and a stamp, and sees the card in Apple's layout or Google's. The design carries over to sign-up.
V · Mock-ups
Product screens, drawn in code
Every phone, wallet pass, lock screen and dashboard on the site is drawn in code to the measurements of iOS 26, so it stays sharp and changes with the language. The figures on the dashboard are demo data.
5a. Home. The home page hero: the promise and a phone with the shop's loyalty cards in its Wallet.
5b. How it works. How it works: tap NFC or scan the QR code at the counter, nothing to install.
5c. Card builder. The card builder: type the shop's name, pick a style and the pass previews live.
5d. Notifications. Notifications: the messages a customer gets on the lock screen, from stamps to reminders.
5e. Dashboard. The dashboard section: a demo of the shop's dashboard with active, at-risk and best customers (sample data).
5f. Pricing. Pricing: one plan, priced by duration, in dirhams or euros.
VI · On a phone
In a pocket
On a phone, the customer's journey becomes a series of screens you tap through.
6a. Home. The home page hero on a phone.
6b. Menu. The phone menu, with the language choice.
6c. Card builder. The card builder on a phone.
6d. Pricing. The pricing card on a phone.
VII · Honest by design
Bubbly, and honest
Friendly and colourful, but honest: no invented testimonials, ratings or figures. The previous site's “×3 new customers” had no source, so it went. One real customer is named.
- Grape #6D37FF
- Ink #1E1437
- Paper #FDFCF6
- Lime #D7FF4F ink text only
- Coral #FF7A59 ink text only
- Sky #8FD3FF ink text only
VIII · Where it stands
On hold
The site is built. Its launch is on hold.
Credits
- Mohamed Ali Mejbar Design and development