aq

project

2025

SmilesMarket

grocery, delivery & rewards · uae

role

product & interface design

the brief

01the problem

Smiles was a rewards wallet people opened at checkout and closed — points piling up with nowhere to go.

02the solution

Market turns it into a full grocery storefront, where points, tiers and vouchers spend like money in the basket.

03my role

Product DesignInterface DesignUX FlowsInteraction DesignDesign System
introduction

a loyalty programmethat learned to shop

Smiles began as a rewards wallet. Market turns it into a full grocery storefront — stores, baskets, delivery and checkout — without losing the points, tiers and vouchers people already came for.

client

smiles · etisalat

scope

shopping & rewards

platform

ios & android

year

2025

Smiles Market storefront: search, category grid and a featured offers carousel
01 — storefront

browsing a supermarketon a five-inch shelf

one search, every store

products and merchants resolve in the same field, so people never pick a store first.

category-first browse

a visual grid replaces a text menu — faster to scan on a phone, and merchandisable.

offers in the flow

promotions sit inside the shelf rather than in a separate deals tab nobody opens.

02 — rewards

progress you canactually see

tiers

Four levels

Beginner through VIP, each with its threshold stated up front instead of hidden in terms.

wallet

Two currencies

Smiles points and eIWallet balance live side by side, switchable from one control.

proof

Running total

Savings to date sit at the top of the screen — the number that makes the tier worth chasing.

Smiles rewards screen: total savings, tier ladder and unlockable vouchers
03 — checkout

every costbefore the tap

Delivery notes, card, promo codes and both point balances are stacked as one legible list, with the full price breakdown — VAT, service, small-order fee — resolved above the button rather than after it.

Points are offered as an alternative amount on the button itself, so paying with rewards never costs an extra screen.

Smiles Market checkout: delivery, payment, promo codes and a full price breakdown
the surface
Smiles Market wordmark

A rounded, low-contrast wordmark sets the tone: friendly rather than transactional. The interface keeps purple for identity and action, and leaves the shelves white — groceries are colourful enough.

Brand

#75438D

Deep

#35034D

Mint

#E2F2F2

Voucher

#F8F1D4

Paper

#FFFFFF

Smiles store sheet
Smiles storefront
Smiles checkout
in writing

case studycoming soon

The full write-up — research, information architecture and the rewards model — is being written up now.