Back to all works

Scaling Revenue through Zero-Friction Web Ordering

How I increased session time by 70% for a B2B SaaS food-tech platform.

Overview

Solution

Back to all works

Scaling Revenue through Zero-Friction Web Ordering

How I increased session time by 70% for a B2B SaaS food-tech platform.

Overview

Solution

Back to all works

Scaling Revenue through Zero-Friction Web Ordering

How I increased session time by 70% for a B2B SaaS food-tech platform.

Overview

Solution

DURATION

3 Months

CLIENT

Crave

ROLE

Product Designer

YEAR

2020

About Company

Crave: QR Ordering Web App

Industry

Food-tech

Headquarters

Los Angeles, California, USA

Company size

11-50

Crave (formerly Orderspot Co.) is a food-tech startup that helps restaurants launch branded online storefronts in minutes. Their all-in-one platform manages orders, payments, marketing, and customer data – including QR code ordering, POS integrations, and loyalty tools.

Top Achievements

Scalable Web-Based Ordering

70 %

Increase in Session Time

I led the end-to-end design for a responsive web platform that allowed restaurants to launch QR-based ordering without the friction of a standalone app download. By removing technical barriers for diners, the platform achieved a 70% increase in session time and a 60% surge in vendor engagement compared to legacy systems.

Mitigating Payment Churn

65 %

Engagement Increase

For complex environments like food halls and hotels, I designed a cross-vendor sales experience that improve discoverability. This strategic layout boosted engagement by 65%, successfully driving cross-vendor sales and strengthening long-term customer retention through a unified ordering interface.

Background

Why did small restaurants need lightweight, customizable ordering solutions during COVID-19?

Contactless Growth: Empowering restaurants with QR-based ordering

Target: Small Business Vendor

Target: Food Hall and Hotel Business

Developed distinct web app designs for food halls and hotels (multi-restaurant venues) and individual restaurants, ensuring comprehensive customization capabilities for each restaurant's unique needs. Implemented an innovative QR ordering system that enables customers to seamlessly browse menus and place orders directly from their table by scanning a QR code, enhancing the dining experience and operational efficiency.

UX Research

Key User Problems Identified: Phase 1

Conducted user behaviour analysis with Hotjar heatmaps to identify friction points

Analyze from Hotjar heatmaps

Problem

Forced, disruptive onboarding flow preventing immediate menu exploration

User-Centered Research

Analyze Hotjar heatmaps and session recordings
Identify user's primary intent(menu exploration)
Eliminate barriers to immediate menu access

Analyze Hotjar heatmaps and session recordings
Identify user's primary intent(menu exploration)
Eliminate barriers to immediate menu access

UI Problem: Phase 2

Inconsistent UI without a design system

What problems did Crave's UI design have?

Main Page

Pick Up Time Setup

Problem

The early product was built without a unified design system, leading to inconsistent and unclear UI across key screens.
Pickup times, menu listings, and item customization each used different patterns, which confused users, slowed down ordering, and weakened the overall brand experience.

Comprehensive Design System Solutions

Create a modular, scalable design system with
ᐧ Clear visual hierarchy
ᐧ Consistent colour palettes
ᐧ Standardized typography
ᐧ Adaptive component states (default, hover, active, disabled)
ᐧ Accessibility-focused design

User Interview: Phase 3

Research: Merchant & Diner Insights

The strategy To transform Crave from a basic ordering tool into a mission-critical platform, I conducted in-depth interviews with two primary user groups: Head Chefs (focused on creative menu control) and Restaurant Managers (focused on operational efficiency). This research allowed me to identify the friction that prevent restaurants from adopting digital-only ordering.

The Insight-to-Action Matrix

Synthesizing stakeholder interviews into a concrete product roadmap for the MVP.

Legacy Manual Process

01.

Waiter takes order on paper pad

02.

Manual entry into POS Terminal

Risk: Transcribing error

03.

Order sent to kitchen printer

Crave Digital Flow

01.

Diner scans QR (Browser Open)

02.

Direct Checkout & Auto-Pay

Zero manual steps for staff

03.

Cloud-sync to Kitchen KDS

The User Journey Comparison

Streamlining the order lifecycle by removing high-friction manual entry points.

User Experience Mapping: Phase 4

Design Iteration: From user insights into user flows

Single Vendor Flow
Simplified ordering for individual restaurants, covering dine-in, pickup, and curbside with clear time-setting logic.

Multi-Vendor Flow
Streamlined experience for food halls and markets, allowing users to coordinate multiple orders within one session.

Single Vendor Flow
Simplified ordering for individual restaurants, covering dine-in, pickup, and curbside with clear time-setting logic.

Multi-Vendor Flow
Streamlined experience for food halls and markets, allowing users to coordinate multiple orders within one session.

Solutions

Solution 1

The Zero-Friction diner Experience

The Strategy: Removing the "App Barrier" To solve the abandonment issue identified in research, I designed a Progressive Web App (PWA) experience. By utilizing a browser-based, "Guest-First" checkout, we eliminated the need for app downloads or account creation.

The Result: Diners can go from QR scan to payment in under 60 seconds, directly addressing the conversion friction that previously stunted sales.

To ensure a high adoption rate, I designed the full suite of physical touchpoints, including custom QR stickers and in-venue posters. By aligning the physical branding with the digital PWA interface, I created a cohesive 'Scan-to-Order' journey that feels trustworthy and intuitive for first-time diners.

Solution 2

Seamless Ordering: Simplifying pickup & dining experiences

In the post-COVID landscape, restaurants needed flexible digital tools to handle diverse customer needs without overloading staff. I designed the ordering flow to reduce friction and improve clarity.

Intuitive Pickup Scheduling

① Streamlined date and time selection with a simple dropdown

② Directly accessible from the main page for faster takeout setup

③ Clear, immediate options to reduce user effort

Intuitive Pickup Scheduling

① Streamlined date and time selection with a simple dropdown

② Directly accessible from the main page for faster takeout setup

③ Clear, immediate options to reduce user effort

Dynamic Dining Flexibility

① Quick table number selection for dine-in

② Real-time updates to reassign or edit tables instantly

③ Minimal friction with a clean, intuitive interface

Dynamic Dining Flexibility

① Quick table number selection for dine-in

② Real-time updates to reassign or edit tables instantly

③ Minimal friction with a clean, intuitive interface

Solution 3

Curbside & Vehicle Identification

The Strategy: Enhancing Post-Covid Operations I designed a specialized curbside flow that allows customers to input vehicle details during checkout. This simple data point allows staff to identify arriving cars instantly, removing the need for customers to call the restaurant upon arrival.

The Result: Faster fulfillment times and a safer, contactless handoff process.

① Streamlined process: Enabled precise vehicle recognition for staff

② Contactless & safe: Reduced the need for direct interaction

③ Faster & fulfillment: Simplified handoff and minimized customer wait times.

The Result: Faster fulfillment times and a safer, contactless handoff process.

① Streamlined process: Enabled precise vehicle recognition for staff

② Contactless & safe: Reduced the need for direct interaction

③ Faster & fulfillment: Simplified handoff and minimized customer wait times.

Solution 4

Responsive Multi-Vendor Architecture

The Strategy: Scaling for Complex Venues For food halls and hotels, I built a responsive framework that maintains a consistent structure across desktop and mobile. This system allows users to browse multiple vendors and manage their cart through a unified, high-visibility interface.

The Result: A 65% engagement boost for multi-vendor spaces and improved cross-vendor sales.

Takeaways

1. Cross-Cultural Design Matters

· Learned to adapt for diverse literacy levels, device habits, and ergonomics.

· Built inclusive, adaptable interfaces for broader accessibility.

2. Professional Growth

· Gained end-to-end ownership experience, bridging branding, marketing, and product design.

· Strengthened ability to align design with both business goals and user needs.

3. Challenges & Lessons

· Remote research across time zones revealed the importance of flexible methods.

· Limited in-person testing reinforced the value of scalable, repeatable design systems.

More Projects

B2B SaaS

AI & Data Platfrom

End-to-End AI Model Deployment

B2B SaaS

Subscription & Payment UX

Seamless Payment Flow Integration

B2B SaaS

AI & Data Platfrom

End-to-End AI Model Deployment

B2B SaaS

Subscription & Payment UX

Seamless Payment Flow Integration

B2B SaaS

AI & Data Platfrom

End-to-End AI Model Deployment

B2B SaaS

Subscription & Payment UX

Seamless Payment Flow Integration

Scaling Revenue through Zero-Friction Web Ordering

How I increased session time by 70% for a B2B SaaS food-tech platform.

Overview

Solution

Scaling Revenue through Zero-Friction Web Ordering

How I increased session time by 70% for a B2B SaaS food-tech platform.

Overview

Solution

Scaling Revenue through Zero-Friction Web Ordering

How I increased session time by 70% for a B2B SaaS food-tech platform.

Overview

Solution

DURATION

3 Months

3 Months

CLIENT

Crave

Crave

ROLE

Product Designer

Product Designer

YEAR

2020

2020

Industry

Food-tech

Headquarters

Los Angeles, California, USA

Company size

11-50

Top Achievements

Top Achievements

Scalable Web-Based Ordering

Scalable Web-Based Ordering

70

70

%

%

Increase in Session Time

Increase in Session Time

Mitigating Payment Churn

Mitigating Payment Churn

65

65

%

%

Engagement Increase

Engagement Increase

Background

Background

Contactless Growth: Empowering restaurants with QR-based ordering

Contactless Growth: Empowering restaurants with QR-based ordering

UX Research

UX Research

Conducted user behaviour analysis with Hotjar heatmaps to identify friction points

Conducted user behaviour analysis with Hotjar heatmaps to identify friction points

Inconsistent UI without a design system

Inconsistent UI without a design system

The early product was built without a unified design system, leading to inconsistent and unclear UI across key screens.Pickup times, menu listings, and item customization each used different patterns, which confused users, slowed down ordering, and weakened the overall brand experience.

Create a modular, scalable design system withᐧ Clear visual hierarchyᐧ Consistent colour palettesᐧ Standardized typographyᐧ Adaptive component states (default, hover, active, disabled)ᐧ Accessibility-focused design

Research: Merchant & Diner Insights

Research: Merchant & Diner Insights

Design Iteration: From user insights into user flows

Design Iteration: From user insights into user flows

Single Vendor FlowSimplified ordering for individual restaurants, covering dine-in, pickup, and curbside with clear time-setting logic.

Multi-Vendor FlowStreamlined experience for food halls and markets, allowing users to coordinate multiple orders within one session.

Single Vendor FlowSimplified ordering for individual restaurants, covering dine-in, pickup, and curbside with clear time-setting logic.

Multi-Vendor FlowStreamlined experience for food halls and markets, allowing users to coordinate multiple orders within one session.

Solutions

Solutions

The Zero-Friction diner Experience

The Zero-Friction diner Experience

Seamless Ordering: Simplifying pickup & dining experiences

Seamless Ordering: Simplifying pickup & dining experiences

Curbside & Vehicle Identification

Curbside & Vehicle Identification

Responsive Multi-Vendor Architecture

Responsive Multi-Vendor Architecture

Takeaways

Takeaways

The early product was built without a unified design system, leading to inconsistent and unclear UI across key screens.
Pickup times, menu listings, and item customization each used different patterns, which confused users, slowed down ordering, and weakened the overall brand experience.

Create a modular, scalable design system with
ᐧ Clear visual hierarchy
ᐧ Consistent colour palettes
ᐧ Standardized typography
ᐧ Adaptive component states (default, hover, active, disabled)
ᐧ Accessibility-focused design

Single Vendor Flow
Simplified ordering for individual restaurants, covering dine-in, pickup, and curbside with clear time-setting logic.

Multi-Vendor Flow
Streamlined experience for food halls and markets, allowing users to coordinate multiple orders within one session.

Single Vendor Flow
Simplified ordering for individual restaurants, covering dine-in, pickup, and curbside with clear time-setting logic.

Multi-Vendor Flow
Streamlined experience for food halls and markets, allowing users to coordinate multiple orders within one session.