A brand and order-ahead app for a chain of coffee shops: order from your phone, skip the line, and fill a loop of ten cups for a free drink.
- SectorFood and drink
- PlatformsiOS app, Android app
- What we didBrand identity, UX research, UI design, Mobile app build
- Year2020
Overview
Café Loop is the app for a growing chain of coffee shops in Cairo. Customers order from their phone, pick up at the counter without waiting, and every cup fills their loop. We created the brand, from the name and the loop symbol to the illustrated cups, and designed and built the app.
The challenge
Morning queues were long, regulars had to repeat the same order every day, and the paper loyalty cards were easy to lose, so customers never reached their free coffee.
What we built
A mobile app to order ahead from the nearest shop, save a usual drink, pay, and follow the order until it is ready, with a digital loyalty loop that also works for customers who pay cash at the counter.
Brand identity
The loop is the whole idea: a ring of ten caramel segments, one for every cup, that fills as you order. Cobalt blue cups with a caramel heart give the brand a warm, friendly look that works on a shop sign and on a phone screen.
App iconColour
- Cobalt#2340A8Brand, cups and main buttons
- Cobalt deep#1A2F80Pressed states and dark blue
- Caramel#E39B2DThe loyalty loop and highlights
- Caramel soft#FBF0DDSeasonal offers and tips
- Roast#24170FText and dark cards
- Porcelain#F4F5F9App background
- Cobalt soft#E7EBFASelected options
- Green#2E7D5BOpen now and ready
Typography
Bricolage Grotesque gives headings a warm, characterful feel; Figtree keeps menus, prices and order details easy to read.
Order ahead. Skip the line.
Spanish latte · Medium, oat milk · EGP 125
Order ahead
From opening the app to a drink made exactly the way you like it, in a few taps.
Welcome
The promise in one line: order ahead, skip the line, and every cup fills your loop.
Home
Your pickup shop, how close you are to a free drink, your usual order again in one tap, and the new seasonal drink.
Menu
Hot, iced, tea and bakery, with clear prices and a running order total at the bottom.
Drink options
Choose the size, milk and extras, with the price updating as you go.
Pay, pick up and earn
No queue at the counter: pay in the app, follow the order, and collect your cup.
Your order
Pick the shop and a pickup time, check the items and add a note for the barista.
Order status
A big order number to show at the counter, with live updates from received to ready.
Your loop
Cups so far and how many are left, plus a member code for customers who pay cash at the counter.
Shops
Nearby shops on a map with opening hours and how long an order will take at each one.
In use
Try the prototype
The clickable prototype. Try it: Home, Menu, pick a drink, add it to your order, then place the order and watch the status update.