# 3.6% more orders from a menu customers kept leaving

Session recordings showed customers leaving the menu mid-order, most likely to go back for a promo code. I redesigned the restaurant page so the code and the loyalty rewards sat inside the ordering flow.

Status: Shipped · Disciplines: Interaction design, UX research, Information architecture · Built with: Figma, Amplitude, Smartlook · Year: 2021

Source: https://www.ahmedamr.com/work/koinz-ordering

Koinz began as a loyalty product. Customers visited a restaurant, earned
points, and later exchanged those points for a gift from the same brand. When
delivery and pickup were added in 2020, ordering was placed on top of that
model.

By 2021, one restaurant page was carrying both products. It needed to help a
customer choose food, configure an item, apply a promotion, and reach the
basket. At the same time, it needed to explain points, make available gifts
visible, and preserve the restaurant relationship Koinz promised its merchant
partners.

The existing page could not balance those jobs. It had become one of the biggest
drop-off points in the ordering funnel, and lifting that funnel was the goal of
the work: more customers going from the menu to a completed order.

<ProjectSummary>
  I redesigned the restaurant menu around a clearer path to purchase without
  reducing loyalty to a secondary badge. The work combined task analysis,
  Smartlook session recordings, Amplitude funnel data, competitive analysis,
  information architecture, prototyping, stakeholder reviews, and a second
  Arabic-language iteration after launch.
</ProjectSummary>

<RoleScope
  role="Product Designer"
  duration="2021"
  scope={[
    "Task and funnel analysis",
    "Behaviour synthesis",
    "Information architecture",
    "Interface and interaction design",
    "Interactive prototypes",
    "Design handoff and iteration",
  ]}
  team="Worked with the Head of Product, Product Manager, and UX Designer"
/>

{/* The 2021 menu and gift map belong at the split they explain, further down,
    not here as a teaser of it. This slot is only where the work ended up. */}

<ArtifactGallery columns={1}>
  <Figure
    id="koinz-new-restaurant-overview"
    title="The redesigned restaurant page"
    description="Show the single page that carries order context, the promotion, points, and gifts together."
    bleed={false}
    device
  />
</ArtifactGallery>

## The menu inherited a loyalty product's structure

Koinz had three routes into a restaurant. The Order page helped customers find
nearby restaurants for delivery or pickup. For You showed brands they had
already visited and where they held points. Explore was a wider restaurant
directory inherited from the earlier product.

Those entry points led to different places. Entering from Order
opened the food menu. Entering from For You or Explore opened the points
section. Two customers could tap the same restaurant and arrive at different
interfaces because of where they started.

<ArtifactGallery columns={3}>
  <Figure
    id="koinz-old-order-delivery"
    title="Order"
    description="Show the marketplace route that opened a restaurant on its food menu."
    bleed={false}
    device
  />
  <Figure
    id="koinz-old-for-you"
    title="For You"
    description="Show the loyalty route that opened the same restaurant on its points section."
    bleed={false}
    device
  />
  <Figure
    id="koinz-old-explore"
    title="Explore"
    description="Show the inherited directory that formed the third route into a restaurant."
    bleed={false}
    device
  />
</ArtifactGallery>

The restaurant page itself was also split between two distinct sections:

- a conventional food menu; and
- a visual gift map showing the customer's points and what they could redeem.

<ArtifactGallery columns={2}>
  <Figure
    id="koinz-old-brand-menu"
    title="The 2021 food menu"
    description="Show the restaurant page as a menu, reached only from the Order entry point."
    bleed={false}
    device
  />
  <Figure
    id="koinz-old-brand-journey"
    title="The 2021 gift map"
    description="Show the same restaurant page as a road of gifts priced in points, reached from For You or Explore."
    bleed={false}
    device
  />
</ArtifactGallery>

The split reflected the company's history, but it made the current product
harder to understand. Customers could lose track of whether they were ordering
for delivery or pickup. Some did not realise that gifts could be redeemed at
all. Search could fail when they were trying to find an item. The interface was
asking them to understand how Koinz had evolved before they could complete a
familiar ordering task.

<KoinzRoutes
  beforeLabel="Product structure"
  afterLabel="Customer intention"
  routes={["Order", "For You", "Explore"]}
  notes={{
    before: "Order opened the food menu. For\u00a0You and Explore opened the gift map.",
    after: "Every route arrives at the same page. Menu and My points stay distinct views of it.",
  }}
  lettered="the seams"
  before={
    <p>
      The entry point decided whether a restaurant opened as a menu or a
      points journey, and the seams between the loyalty and ordering products
      showed.
    </p>
  }
  after={
    <p>
      The restaurant became one coherent destination where customers could
      understand the order context, browse food, use a promotion, redeem a
      gift, and continue to the basket.
    </p>
  }
  caption="Both models stayed, behind one door instead of two."
/>

## The business constraint was part of the design problem

A conventional delivery-app redesign could have pushed rewards out of the way
and concentrated only on food. That would have simplified the screen, but it
would have weakened the reason Koinz existed.

Loyalty was one of the product's promises to restaurants. Merchants joined
because Koinz could help customers return to their brand. If the
new menu erased the restaurant's identity or made gift redemption invisible,
it might improve one funnel step while damaging the merchant proposition.

So the redesign had to pass two tests: more customers had to complete an order,
and the loyalty relationship had to stay clear to both customers and merchants.

## The recordings showed why customers left

I started by mapping the task from restaurant entry to checkout, then examined
the Amplitude events around the critical section of the journey:

1. viewed the restaurant menu;
2. viewed a menu item;
3. added a menu item or gift;
4. viewed the basket; and
5. continued through checkout.

This made the loss of progression visible, but an event sequence could not
explain the customer's hesitation. For that, I used the product team's
bi-weekly Smartlook reviews and session recordings.

One repeated behaviour stood out. Customers would open a restaurant, add
items, and then return to the previous page, often the Order page, before
continuing. The likeliest reason was the promotional code. It appeared on the
restaurant card outside the menu, so customers were going back to retrieve
information they still needed inside the menu.

The promo code had become a memory test. A customer had to notice it, remember
it, enter the restaurant, choose items, and recall the code later. The product
had put a detour inside its own funnel.

<KoinzDetour
  steps={["Notice it", "Remember it", "Enter the restaurant", "Choose items", "Recall the code"]}
  places={{ orderPage: "Order page" }}
  lettered="a detour"
  summary="The Order page, drawn as a street of restaurant cards, one of them carrying the promotion. A path runs from that card into its restaurant, past the menu to the basket, in five numbered steps: notice it, remember it, enter the restaurant, choose items, recall the code. From the basket a loop runs back out over the roof to the card and in again, lettered a detour."
  caption="A promotion the customer had to carry in their head from one page to the next."
/>

<ArtifactGallery columns={2}>
  <Figure
    id="koinz-old-order-pickup"
    title="Where the cards lived"
    description="Show the marketplace page a customer had to return to in order to recover a code."
    bleed={false}
    device
  />
  <Figure
    id="koinz-old-promo-card"
    title="Where the promo code lived"
    description="Show the promotional code printed on the restaurant card, outside the menu that needed it."
    bleed={false}
  />
</ArtifactGallery>

## Market patterns established the expected floor

I compared the restaurant menus in Uber Eats, Deliveroo, Talabat, and Elmenus.
Food ordering is a familiar pattern, and the comparison helped separate the
conventions customers already expected from what only Koinz offered.

Across the products, promotions were visible inside the ordering journey.
Restaurant ratings, pickup context, featured items, and ways to reach menu
items without excessive scrolling were common enough to be treated as a
baseline. Koinz had to meet it, then add its rewards in a way a generic
delivery app could not.

<KoinzFloor
  baseline={[
    "Promotions inside the ordering journey",
    "Restaurant ratings",
    "Pickup context",
    "Featured items",
    "Ways to reach menu items without excessive scrolling",
  ]}
  rewards="Integrating rewards"
  lettered="the floor"
  summary="A floor across the drawing with five things standing on it, what the menus compared had in common: promotions inside the ordering journey, restaurant ratings, pickup context, featured items, and ways to reach menu items without excessive scrolling. Above them, on columns of its own, stands a storey holding a road of gifts and a jar of points, labelled integrating rewards. The floor is lettered the floor."
  caption="The menus compared set the floor to meet. Rewards were Koinz's storey above it."
/>

Everything so far pointed to three principles:

- reduce the time and effort required to decide what to order;
- keep order method, timing, fees, and restaurant information visible; and
- surface promotions and gifts at the moment they can influence a decision.

## I reorganised the page around progression

In the new information architecture, the two products joined at the top became
one destination.

The page opened with the restaurant identity and the practical context of the
order: delivery or pickup, expected time, fees, and access to more information.
The available promotion moved into the page itself. Menu and points remained distinct views, but they now belonged to
the same structure and no longer depended on a hidden entry-point rule.

Inside the menu, highlighted categories such as Most Selling shortened the
path for customers who did not arrive with a specific dish in mind. Category
navigation and restaurant-level search supported customers who did. Available
gifts appeared beside the food, where first-time customers would see them.

The basket action stayed visible as items were added, giving the customer a
continuous sense of progress and a direct next step.

<KoinzLayers
  lettered="one destination"
  layers={[
    {
      name: "Restaurant context",
      note: "Where and how the order will happen",
      items: ["Brand details", "Delivery or pickup", "Time and fees", "Restaurant information"],
    },
    {
      name: "Immediate value",
      note: "What the customer can use now",
      items: ["Available promo code", "Points balance", "Available gifts"],
    },
    {
      name: "Browse",
      note: "How the customer reaches a decision",
      items: ["Most selling", "Categories", "Search", "Menu items"],
    },
    {
      name: "Configure",
      note: "What belongs to one item",
      items: ["Photo and description", "Required modifiers", "Optional extras", "Quantity", "Note"],
    },
    {
      name: "Progress",
      note: "How the customer completes the task",
      items: ["Add to basket", "Persistent order summary", "Basket", "Checkout"],
    },
  ]}
  caption="The architecture keeps the order context and the loyalty value in view from restaurant entry to checkout."
/>

**Arabic category navigation**

Chose: Use one restaurant page with clear Menu and My points views, then surface the most relevant promotion and available gifts inside the ordering context.

Trade-off: A completely merged feed might have appeared simpler, but it would mix food, gifts, and point progression into one long list. Separate views preserved clarity while the shared page removed the old entry-point inconsistency.
</ArtifactGallery>

{/* These are the second iteration only. The equivalent first-release Arabic
    screens are not in hand, so nothing here is presented as one half of a
    before-and-after pair; add that pairing if those screens turn up. */}

## What I would strengthen in a new measurement cycle

The project connected observable behaviour to interface changes, but I would
make the attribution more rigorous today.

I would document the exact baseline and post-release windows, segment the
funnel by language and order method, and separate first-time customers from
people who already understood the loyalty model. I would also test the three
entry points together, since the redesign left their overlap for later. It made
the restaurant page coherent, and a later phase should do the same for the
routes into it.

The menu was where a marketplace ordering pattern, a restaurant's identity, and
Koinz's loyalty model met. The redesign worked because it put all three on one
page and made them work together.