UX Case Study · Food Delivery

Redesigning Keeta's ordering flow — from visual clutter to a checkout users complete without hesitation

Modern redesign of the Keeta application, focusing on improved user experience, intuitive navigation, and contemporary visual design.

Usability test participants

Home → Restaurant → Checkout

Jan 21 — Feb 25, 2026

Decrease Time on Task

RoleUX Designer

PlatformMobile · Figma, Miro, Mobbin

Duration5 Weeks · 2026

LinkVisit →

Food Delivery · Udacity Capstone

What is the Keeta Redesign?

A modern redesign of the Keeta food delivery application, focusing on improved user experience, intuitive navigation, and contemporary visual design — carried end to end through research, prototyping, testing, and iteration.

The flow

The full Homepage → Restaurant → Checkout journey.

Tools

Figma for design and prototyping, Miro for concepting, Mobbin for pattern research.

Timeline

January 21 — February 25, 2026.

The KPI

Decrease Time on Task.

Why

The Challenge

The original food delivery app interface contained significant visual clutter and multiple competing promotional elements.

Competing promotions

Discounts, vouchers, and delivery offers were presented in different formats, creating confusion around what was actually applied during checkout.

Cognitive load

This lack of clarity increased cognitive load and slowed down user decision-making.

Checkout hesitation

Target users — primarily frequent food delivery customers — experienced hesitation during browsing and checkout, particularly when reviewing discounts and total pricing.

The opportunity

The dense layout and unclear hierarchy made it difficult to quickly scan content and confidently complete an order. This created an opportunity to redesign the flow with a focus on clarity, hierarchy, and reduced time on task.

The original Keeta homepage

// preview

Research

Discovery: Research & Analysis

I created a structured Research Plan that clearly defined the problem, research objectives, target users, interview questions, and success metrics.

Interviews & usability testing

I conducted user interviews and remote usability testing to better understand user behavior, pain points, and decision-making patterns within the Homepage → Restaurant → Checkout flow.

Research report

After collecting the data, I synthesized the findings into a detailed Research Report.

Key usability issues

Visual overload, unclear discount application, weak visual hierarchy, and checkout hesitation.

Clear recommendations

The research phase concluded with clear design recommendations that directly informed the next stage of the project.

Participant voices

What Testing Revealed

Five participants browsed the homepage, added an item to cart, reviewed discounts, and completed checkout. A 50% drop-off was observed at the checkout stage; the KPI signal: complete the full ordering flow within 3 minutes.

“There’s too much happening on the screen.”

The homepage felt visually crowded with competing banners and promotional sections — users hesitated before choosing where to start.

“I’m not sure if I’m actually getting the best deal.”

Confusion between discount types, and whether they were applied automatically. The “No vouchers applicable” message eroded confidence.

“Some text is difficult to read.”

Smaller, low-contrast grey text reduced readability, and small arrow icons weren’t clearly perceived as interactive.

“I want a cleaner and faster experience.”

Too much vertical scrolling before real menu items — and users wanted a clearer price breakdown before pressing Apple Pay.

Iterations

Design: Concepts to Prototype

I focused on transforming research insights into practical design solutions, refining ideas quickly before committing to high fidelity.

Brainstorming in Miro

I used Miro to brainstorm feature ideas, organize concepts, and collaborate visually — generating multiple potential features based on user needs.

Impact vs. effort

I prioritized the feature ideas using impact vs. effort analysis to select the most valuable ones.

Low-fidelity sketches

Sketching wireframes let me experiment with navigation patterns, content hierarchy, and interaction logic before moving into digital design.

High-fidelity prototype

In Figma I built structured wireframes, then a high-fidelity prototype simulating real interactions — carefully designing spacing, visual hierarchy, typography, and interaction states across the whole journey.

What changed

Design: Iteration

Based on usability testing feedback, I refined the redesigned flow to further reduce friction points — some users still hesitated when reviewing discounts and final pricing.

Pricing contrast

Strengthened the contrast of pricing information so totals read instantly.

Clear separation

Increased separation between delivery details and totals within the Checkout screen.

Primary action

Further highlighted the primary payment action, reinforcing confidence before completing payment.

Simplified discounts

Improved button prominence, adjusted spacing and contrast, and simplified discount presentation across the flow.

Redesigned homepage

// preview

Redesigned restaurant page

// preview

Redesigned checkout

// preview

Before → after

Accessibility Audit

Each screen was audited before and after the redesign for contrast, touch targets, hierarchy, and assistive-technology support.

Contrast

Low-contrast grey text and yellow-on-white banner text were adjusted to accessible ratios, with a subtle background overlay behind banner text to improve readability.

Touch targets

Category icons and interactive elements under 44px were enlarged, with improved spacing between interactive sections.

Typography

Font hierarchy standardized (H1, Body, Caption) to improve scannability and readability for visually impaired users.

Assistive technology

Semantic labeling added for screen readers, plus clear focus states for interactive sections like the voucher area.

Annotated audit of the original screens

// preview

Annotated improvements in the redesign

// preview

// drag to compare

Results

Test: Validation & Feedback

To validate the redesigned flow, I conducted remote usability testing with five participants using the updated high-fidelity prototype — the same tasks as the initial research phase.

Confident navigation

Participants were able to navigate more confidently and understand applied discounts more easily.

Fewer pauses

Users completed checkout with fewer pauses — the cleaner structure and stronger emphasis on primary actions created a smoother, more intuitive experience.

KPI supported

The improved structure lowered cognitive load and directly supported the selected KPI: Decrease Time on Task.

Closing

Solution & Impact

The final solution simplified the ordering experience by reducing visual clutter, improving content hierarchy, and clarifying discount presentation.

Hierarchy carries the flow

The redesigned Homepage, Restaurant page, and Checkout emphasize primary actions, improve spacing, and create clearer separation between promotional content and transactional information.

User needs and business intent

A major tradeoff was balancing promotional visibility with usability clarity — reducing banners improved speed and focus but required careful hierarchy adjustments to maintain business goals.

Want to go deeper?

Get in touch for the full walkthrough, or browse the rest of the work.

Let's Talk All case studies