All work

Product Leadership · Leeroy

Leading a mobile ordering and loyalty app for restaurant brands

At Leeroy, I led the product development of the native white-label ordering and loyalty app for restaurant brands. I led product discovery with customers and users, defined how the product should work end to end and mapped out the user journey. I owned the roadmap and priorities, and built the roadmap from five themes written from the diner’s point of view, from “I can order and pay without waiting in line” to “I get offers that make me come back”. Each theme was linked to the KPIs it should move, across ordering, experience, loyalty and growth. Together with the cross-functional product development team, I turned the themes into sprint goals, and followed the KPIs to see what worked and what could be improved.

My role
Product Lead for the ordering and loyalty app, alongside my role as UX design manager
Year
2017–2021
Team
1 cross-functional product development team
Industry
Restaurant tech, SaaS and fintech
Company
Leeroy Group
Business model
Subscriptions and payment transactions
01

Product discovery

As product lead, I treated research as product discovery: deciding what we needed to learn, and using customer and user insight to choose what to build, and what not to build yet.

  1. Trend researchWhat was happening in ordering, payments and loyalty, in Sweden and abroad, to see where the market was heading.
  2. Customer and user insightFrom the research with three leading restaurant chains, their staff and their diners.

How the research insights were placed on the service blueprint is described in the UX design manager case.

02

Design principles for the app

From the research, we set design principles for the ordering and loyalty app. They gave the designers and the team a shared way to decide, in every flow of the app, without having to ask every time.

The app shared interaction patterns and a common UI component library with the other products on the platform, and each product had its own principles. How we came up with them is described in the UX design manager case.

1

The brand comes first: the app is the restaurant’s, not ours

2

Order in a few taps

3

Always know the status of the order

4

One membership in the app and at the till

The design principles for the ordering and loyalty app, used by diners.

Here are some of the screens from the app. It was one white-label app, released for each restaurant brand with its own logo, colours, images and menu.

1The menu

The restaurant’s categories as tabs, and each product with image, price and its price in points. The chosen restaurant is at the top, and the basket is always at hand.

2A brand’s start screen

The brand’s own image and order button, with shortcuts to ordering, offers, my orders and the nearest restaurant.

3The side menu

Everything else in one place: ordering, scanning the membership card, offers, orders and receipts, settings, restaurants and support.

4Another brand, the same app

A campaign at the top, ordering for delivery or the dine-in menu, and the member’s offers below.

5Loyalty points and levels

The member’s points and level, and how the loyalty programme works, in a sheet over the start screen.

Screens from the app for five different restaurant brands. One white-label app, with each brand’s own look.
03

The mobile ordering journey

In my own product team, I designed the user journey through one product, the ordering app: from opening the app to picking up the order and getting the points. It showed where diners got stuck, which opportunities would help them most, and became the base for the backlog and the flows the designers worked from.

Scroll sideways to see the whole journey.

Open the appFind the restaurantChooseOrder and payWaitPick up and earn Experience
GoalGet food quickly from a favourite placePick the right venueFind what I feel likePay without hassleKnow when it is readyGet my food, and my points DoingOpens the brand’s appPicks a venue from the list or by locationBrowses the menu and adds extrasChecks the cart and pays by cardWaits near the counterShows the order number and collects Pain pointsHas to sign up before seeing anythingUnsure which venue is openAllergens and extras hard to findUnclear pickup timeDoes not know if the order is readyPoints missing when paying at the till OpportunitiesBrowse first, sign up laterSort by my position, with opening hoursClear item details with allergensPickup time in the cartPush notification: your order is readyOne membership in the app and at the till
A simplified version of the mobile ordering journey, redrawn for this case.

From the journey to an opportunity map

The opportunities came from the customer and user insights, the service blueprint and the journey. Each pain point became an opportunity, and each opportunity was linked to what we built and to the outcome we wanted: diners who order more often and come back. The map kept the team’s backlog tied to real needs, and to the business.

OutcomeDiners order more often, and come backBusiness direction: more orders through the app, and brands that stay on the platform
Opportunities from customer and user insights, the service blueprint and the mobile ordering journey
  1. OpportunityBrowse first, sign up laterWhat we builtAn open start page, with membership when it pays off
  2. OpportunityFind the nearest open restaurantWhat we builtStore list sorted by position, with opening hours
  3. OpportunitySee what is in the foodWhat we builtItem details with extras and allergens
  4. OpportunityKnow when to pick upWhat we builtPickup time chosen in the cart
  5. OpportunityKnow when it is readyWhat we builtOrder status: accepted, preparing, ready
  6. OpportunityOne membership everywhereWhat we builtMembership card scanned at the till
The opportunity map for the ordering app, simplified and redrawn for this case.
04

How the product works end to end

Together with the designers, I defined how the ordering and loyalty app should work end to end: from the diner’s first tap, through the till and the kitchen, to the points on the membership. Almost every flow in the app depended on another product, so I agreed each step with the product owners of the POS and the kitchen display.

The user flow for online ordering in the app ran front stage and backstage: what the diner does in the app, what the staff at the counter and the kitchen do, and what the systems behind them must do, from deciding where to eat to coming back.

Scroll sideways to see the whole flow.

BeforeThe visitAfter
DiscoverOrderPayPreparePick upReturn
DinerDecides where to eat and opens the restaurant’s appChooses dishes and orders, ahead or at the restaurantPays in the app and earns pointsFollows the order statusGets a notification, picks up and eatsGets rewards and offers, and comes back
Staff at the counterScans the member card at the tillHands over the orderRedeems rewards at the till
KitchenThe order appears on the kitchen displayMarks the order ready
Owners, back office and systemsMenu, offers and opening hours, set by the restaurantMenu and prices synced with the POSPayment provider and loyalty engineOrder routed to the POS and the kitchenPush notification to the dinerCampaigns and loyalty rules, set by the owner
The user flow for online ordering in the app, front stage and backstage. Simplified and redrawn for this case.

One order passes five parts of the system and three product teams. Because the app was integrated with the POS and the kitchen display, the order went straight to the kitchen, and the diner got a notification in the app as soon as it was ready.

  1. 1Chooses dishes and orders in the appDiner and app
  2. 2Pays in the appDiner and app
  3. 3Confirms the order and the paymentOrdering platform
  4. 4The order lands in the restaurant’s POSPOS at the till
  5. 5The order appears on the kitchen displayKitchen display
  6. 6The kitchen marks the order readyKitchen display
  7. 7Sends a notification: your order is readyOrdering platform
  8. 8Picks up the order at the counterDiner and app
  9. 9Points are added to the membershipLoyalty
The order flow, redrawn for this case. Each column is a part of the system, and the steps are numbered in order.
05

Business model and priorities

The ordering app was built on two revenue streams: subscriptions, where restaurant brands pay for their own app, and transactions on the orders paid in it. That set the business side of every priority. A theme that brought in more brands, or more orders through the app, had a direct effect on revenue.

SaaSSubscriptionsRestaurant brands pay for their own white-label ordering and loyalty app.Grows with more brands and venues on the platform, and brands that stay.
FintechPayment transactionsOrders paid in the app.Grows with more orders, and members who come back more often.

What each roadmap theme did for revenue

The business model behind the priorities, simplified for this case.

Every theme was then weighed on user value, business potential and complexity, with the pain points from the journey in front of us. An impact matrix made the trade-offs easy to discuss in the team and with the other product owners.

Impact: business potential and user value →
Quick winsHigh impact, low effort
Big betsHigh impact, high effort
Fill-insLower impact, low effort
Think twiceLower impact, high effort
1“I can order and pay without waiting in line”2“I know when my food is ready”3“I get rewarded wherever I pay”4“I get offers that make me come back”5“I can make changes to my order”
Complexity and effort →
  1. 1“I can order and pay without waiting in line”
  2. 2“I know when my food is ready”
  3. 3“I get rewarded wherever I pay”
  4. 4“I get offers that make me come back”
  5. 5“I can make changes to my order”
The impact matrix we used to prioritise, with the roadmap themes placed on it. Redrawn for this case.
06

The roadmap, as themes

The roadmap was built from themes, not features. Each theme was written from the diner’s point of view, as an outcome they would notice. Then we broke it down into what it includes, and linked it to the KPIs it should move.

The order of the themes followed the business model and the impact matrix. Now came the core of the product: ordering and paying in the app, and knowing when the food is ready. Without orders in the app there are no transactions, and nothing to reward. Next came loyalty in the app and at the till, so that members come back and brands have a reason to stay. Later came offers that each brand sets up itself, and changes to orders, which touch the POS, the kitchen and the payment.

Themes kept the team focused on why something mattered, and left room to find the best way to get there. When priorities changed, it was easier to move a whole theme than to reshuffle single features.

NowWhat we build now

Theme 1Diners

“I can order and pay without waiting in line”

Order ahead or at the table, pay in the app, and the order goes straight to the kitchen.

What it includes

  • Menu and prices from the POS
  • Basket with extras
  • Pay in the app
  • Order straight to the POS and the kitchen

KPIs it should move

  • Orders through the app
  • Conversion from menu to paid order

Theme 2Diners

“I know when my food is ready”

No need to ask the staff, or to stand and wait at the counter.

What it includes

  • Order status in the app
  • A notification when the kitchen marks the order ready
  • Pick-up at the counter

KPIs it should move

  • Orders ready on time
  • Support contacts per order
NextWhat we build next

Theme 3Members

“I get rewarded wherever I pay”

Points and rewards follow the diner, in the app and at the till.

What it includes

  • Become a member in the app
  • Earn points in the app
  • Recognised at the till
  • Use rewards in both

KPIs it should move

  • Active members
  • Repeat purchase rate
LaterWhat comes after

Theme 4Members and brands

“I get offers that make me come back”

Stamp cards and offers, set up by each restaurant brand itself.

What it includes

  • Stamp cards
  • Offers in the app
  • Campaigns set up by the owner

KPIs it should move

  • Visits per member
  • Reward redemption rate

Theme 5Diners

“I can make changes to my order”

Change or add to the order after it is placed, as long as the kitchen has not started on it.

What it includes

  • Change or cancel before the kitchen starts
  • Add to an order
  • Refund or extra payment in the app

KPIs it should move

  • Support contacts per order
  • App store rating
The roadmap as themes, written from the diner’s point of view, each broken down into what it includes and the KPIs it should move. Redrawn for this case.
07

From roadmap to sprints

Each theme on the roadmap came with the KPIs it should move. Together with the cross-functional team, I turned the themes into sprint goals: what we wanted to be true at the end of the sprint, and why it mattered for the diners and the restaurants. The team then planned how to get there.

  1. 1Roadmap themeWith the KPIs it should move, and a reason for its place in the order.
  2. 2RefinementThe team and I broke the theme into user stories, with the designers’ flows as the base.
  3. 3Sprint goalWhat should be true at the end of the sprint, and why it matters.
  4. 4Sprint planningThe team planned how to reach the goal.
  5. 5Demo and retroWe showed the result to stakeholders, and improved how we worked.
How a roadmap theme became work for the cross-functional team. Simplified for this case.
08

Measuring success

I measured the app by outcomes, not by what we shipped. The outcome we aimed for was diners who order more often and come back, and restaurant brands that stay. It was broken down into KPIs in four groups, and every theme on the roadmap pointed at the KPIs it should move.

Ordering, experience and loyalty show whether the app works for diners. Growth shows what that adds up to for the business: more orders paid in the app, more members, and brands that stay on the platform and keep their subscription.

That made every priority discussion concrete: which KPI will this move? And once a theme was live, the same KPIs showed whether it had worked, and what to improve next.

OutcomeDiners order more often and come back, and restaurant brands stay
Ordering
  • Orders through the app
  • Conversion from menu to paid order
  • Average order value
  • Payment success rate

Moved by

  • 1“I can order and pay without waiting in line”
Experience
  • Orders ready on time
  • Support contacts per order
  • App store rating

Moved by

  • 2“I know when my food is ready”
  • 5“I can make changes to my order”
Loyalty
  • Active members
  • Repeat purchase rate
  • Visits per member
  • Reward redemption rate

Moved by

  • 3“I get rewarded wherever I pay”
  • 4“I get offers that make me come back”
What it adds up to for the businessGrowth
  • New members
  • Share of a brand’s sales through the app
  • Brands live on the platform
  • Brands that stay

SubscriptionsPayment transactions

The KPIs, from the outcome to the roadmap themes that should move them. Shown without figures.
09

Loyalty in the app and at the till

Loyalty had to work wherever the diner paid. Members earned rewards for purchases in the app and at the till, and could use them in both. That is what turns a diner into a regular.

  1. 1BuyOrder in the app, or pay at the till as a member.
  2. 2EarnPoints for the purchase are added to the membership.
  3. 3Get rewardedRewards and offers show up in the app.
  4. 4Come backUse the reward in the app or at the till, and the loop starts again.
10

Learnings

Looking back, five things stay with me from leading the ordering and loyalty app at Leeroy.

1

Write the roadmap in the user’s words from day one

Writing the themes as something the diner would say, like “I know when my food is ready”, changed the conversations. Instead of debating features, we talked about what the diner should notice and why it mattered. When priorities shifted, we moved whole themes instead of reshuffling single features. Next time, I would start with themes from day one, not move to them along the way.

2

Agree on the KPIs before the work starts

Linking each theme to the KPIs it should move made priorities concrete. The bigger learning is about timing. If we agree on the KPIs, and know where they stand today, before a theme starts, we can say afterwards whether it worked. Measuring only after launch shows what happened, but not why.

3

The app is only as good as the service behind it

The best ordering flow in the app still fails if the order doesn’t reach the kitchen, or if nobody marks it ready. Almost every flow depended on the POS, the kitchen display or the loyalty engine. Leading the app meant leading across product teams: aligning early with the other product owners and owning the experience end to end, not just the screens.

4

White-label means two customers

Every decision had to work both for the restaurant brand paying for the app and for the diner using it. “The brand comes first” gave each brand its own look, while shared components and patterns kept one product we could build and maintain. That balance between brand freedom and one scalable product was a big part of the job.

5

Loyalty has to follow the diner, not the channel

Diners don’t think in channels. If points went missing when they paid at the till, they lost trust in the whole programme. Designing loyalty for wherever the diner pays, in the app and at the till, was harder and depended on more teams, but it was what turned diners into regulars.