My Framer Site

KOTORI — Festival Mobile Order

● My Role

Product Designer

Sole end-to-end product designer for live festival operations.

Period: 2025 July- Present

Phase: 0-2

Discovery

Feature Scoping

Mobile App Designs

UI Solutions

On-site Observation

Iterative Validation

● About

A web-based app mobile ordering system that helps festival visitors order and pay in advance and skip long queues at booths.

● Background

As our company grew as a major multicultural festival sponsor in Japan, we worked more closely with organizers and discovered a key problem: long food queues were hurting the visitor experience and limiting vendor sales. This led us to create KOTORI.

● The Problem

Where the festival experience breaks down

01 — PROBLEM

Long Food Queues

With festival crowds, especially at Yoyogi Park Tokyo, where visitors can reach 200,000 visitors over two days and queue times can reach 30 minutes to 1 hour.

02 — PROBLEM

Less Time to Enjoy

Time spent waiting means less time exploring other booths, reducing opportunities for vendors to attract customers and generate more sales.

03 — PROBLEM

Vendor Pressure

Introducing mobile ordering can be challenging for vendor staff, as they already work in fast-paced environments while managing multiple operations at once.

● Main Objective

A festival companion and sales channel

KOTORI connects festival discovery and mobile ordering into one experience by helping visitors enjoy more of the festival while creating more sales opportunities for vendors.

● Main Objective

A festival companion and sales channel

KOTORI connects festival discovery and mobile ordering into one seamless experience, helping visitors enjoy more of the festival while creating more sales opportunities for vendors through clear, efficient operations.

Design Approach

Our Design Principles

Accessible & Resilient

Accessible for everyone with no installation required. Built to keep essential functions reliable even with poor festival connectivity.

Friendly & Fun

Designed to feel like part of the festival experience.

Friendly visuals make ordering feel welcoming and enjoyable.

UX-First & Trustworthy

Simple, concise flows help users complete tasks faster.
Clear and consistent UI builds confidence from ordering to pickup.

● Design Process

Design Process

Discovery

User Interview, Feature Mapping, and Competitor Research

Design Exploration

Design Preparation

Hi Fi & A/B Test

Team Communication

● User Journey

User Journey with KOTORI

Before - Traditional Ordering

Go to booth → See long queue → Wait 30–60 minutes → Order & pay → Receive food

After - with KOTORI

Scan QR → Order & pay instantly → Receive order number → Pick up at booth → Faster queuing

Our First Solutions

UX Design Result

Browser-based (no app download)

Customer & Store (Tenant) interfaces

Access via QR codes at booths or event websites

Supports real-time ordering

Anonymous ordering (email + mobile verification only)

Cashless payment

Usability Testing - Phase 1 & 2

Phase 1

Vietnam Festival Osaka 2026

Goals:

Ensure KOTORI works smoothly in a real festival environment by checking system stability, user flow and experience, connectivity, order accuracy, payment flow, notifications, and vendor operations before full-scale use.

● PHASE 1 — Usability Testing Result

Live validation at Vietnam Festival Osaka 2026

320

users in 2 days
131 → 189 growth

¥70,750

total sales
73 transactions for 2 booths

~¥951

average order value

77%

iOS usage
Safari-first priority

User Origin

Majority: Japan
Minor: USA (1), Vietnam (1)

Browser Usage

Safari: 209 users (~65%)
Chrome: 109 users (~34%)
Firefox: 2 · Unknown: 2

Insight: Safari is the primary environment—critical for UX stability.

Phase 2

Vietnam Festival Tokyo 2026

Goals:

During large-scale testing, we ensured KOTORI worked smoothly in a real festival environment by evaluating system stability across multiple stores, user feedback, user flow and experience, connectivity, order accuracy, payment flow, notifications, and vendor operations.

● PHASE 2 — Usability Testing Result

Live validation at Vietnam Festival TOKYO 2026

KEY RESULTS

¥1.61M+

total sales

1,118

transactions

1,867

items sold

active booths

~¥1,446

average order value

2 → 23

booths from Phase 1

User Origin

Majority: Japan
Minor:

Browser Usage

Safari:
Chrome:

Insight:

● Usability Testing Result

What we need to Improve

Low Customer Adoption — Only 2.44% of ~200K visitors used KOTORI.

Vendor Coverage — 23 of ~30 booths joined the platform.
Growth Opportunity — 1,118 transactions and ¥1.61M+ sales showed potential to increase orders, adoption, and revenue.
Payment Barrier — International users had limited cashless options, despite many already using Smiles Remittance.
Booth Navigation — Customers had difficulty finding the correct booth for pickup.
Vendor Adaptation — Vendors were still adjusting to the new mobile order operations and workflow.

1. Discovery & Wayfinding

Only 6 flags across the festival.
Not enough QR code placements.
Mobile ordering needed to be more eye-catching and immediately understandable.

2. Fast & Accessible UX

Users felt more overwhelmed than expected.
Users needed to understand information at a glance.
A shorter and simpler ordering flow was needed.

3. Order & Pickup Clarity

Users ordered from several stores.
Tracking different orders became confusing.
Each store and order status needed clearer separation.

4. Menu Info Accuracy

Menu availability mismatch

Physical vs digital menu

discrepancies

5. Technical Reliability

Slow connectivity

Blank or slow-loading web-app

Risk of abandonment due to poor network conditions

6. Checkout Accessibility

Payment accessibility

Credit-card-only friction

SmilesPay integration needs

Vendor Page Details

Our Second Solutions

UX Design Result

On-site Experience

Our team provided web guidelines, posters, and pre-event google meeting to help vendors clearly understand the new operations and workflow.

Fast & Accessible User Experience

Designed for Outdoor Festival Use

Since the event environment is crowded and the outdoor lighting can be very bright, users are less likely to read long text. Instead, they rely more on visuals, clear icons, and images to quickly understand information at a glance. Customers need a fast, clear, and trustworthy web app for this new app.

Select Store

Select Menu Items

Search by Map

[Select Store] Prioritize images and visual cues so users can quickly understand information with minimal reading in a crowded outdoor environment. [Select Menu Items] Allow users to add items directly from the menu, reducing steps and making ordering faster. [Search by Map] Let users explore and order from stores through the map, while clearly showing where to pick up their orders.

Previously, users had to enter a nickname, phone number, and email, making the flow feel too long. Based on user feedback, we simplified it to email-only login, reducing friction while still allowing users to save and access their order information.

UI Design

Order & Pick Up Clarity

Distinguishing Orders at a Glance

Customers often order from multiple stores, so they need a clear way to distinguish each store, order status, and menu item.

Ready to Pick Up

Preparing the Order

Order Cancelled

Orders are separated into individual cards for each store, with the store name, booth number, menu items, and order number clearly displayed. Color-coded order statuses—blue for Preparing, green for Ready, and red for Cancelled—help users quickly identify the status of each order, even when ordering from multiple stores.

Order Details

Waiting Time Clarity

History

Users can access complete order details, real-time preparation status, waiting-time alerts, and order history in one place. Detailed menu information and food images help customers quickly recognize what they ordered, especially when ordering many items they may not remember. Clear timestamps, pickup information, and payment details further reduce confusion and make the journey from order to pickup easier to follow.

Check out & payment

Adapting to Different Payment Behaviors

Single-store ordering; Users can only order from one store at a time. Different payment behaviors; International users may prefer cash, while Japanese users are more familiar with cashless payments like PayPay.

Manage order

Select One Store to Order

Users can add items from multiple stores to one cart, with orders clearly grouped by store for easier management. Before checkout, users select one store to pay for at a time, preventing confusion while allowing them to continue ordering from other stores afterward. The checkout flow can also support both cash and cashless payment options, accommodating different payment preferences among international and Japanese users.

Payment Page

The checkout supports Apple Pay, credit cards, PayPay [future], and SmilesPay [future]. PayPay targets Japanese users, while SmilesPay supports international users, making payment more accessible for both groups.

Customer received

Confirmation

Payment Error Clarity

Add confirmation before marking an order as received to prevent accidental actions and ensure customers only complete the order after pickup. For payment failures, clearly explain what went wrong, whether the customer was charged, and what they should do next, reducing uncertainty and making recovery easier.

Technical Realibity

Reducing Drop-Off on Slow Networks

During peak hours, some mobile networks can be slow or unstable. Clear connection feedback helps reassure users and keeps them from abandoning the ordering process.

Driving Engagement & Revenue

Creating More Reasons to Buy

Encourage users to engage and make payments within the app, creating more opportunities to increase sales and revenue for both KOTORI and event organizers.

VIP Seats

Campaign

Introduce VIP seat bookings, advertisements, and promotional campaigns directly within KOTORI to create more reasons for users to engage beyond food ordering. These features encourage additional in-app purchases and discovery, while creating new revenue opportunities for both KOTORI and event organizers.

BANNER ADVERTISING PERFORMANCE — PARTICIPATING STORES

4,218

banner ad impressions

1,731

active users via ads

¥186,150

sales from advertising stores

DIRECT PURCHASE IMPACT

Participating stores ranked 3rd overall, demonstrating a direct purchase impact from banner ad exposure.

● Reflection

What I would improve next

01 — MEASURE FUNNEL CONVERSION

Track Store View → Menu → Cart → Verification → Payment → Order to identify exactly where customers abandon.

02 — MEASURE OPERATIONS

Add metrics for average preparation time, Ready → Pickup time, order completion rate, and missed-order rate.

03 — DESIGN FOR NETWORK FAILURE

Explore lightweight loading states, clearer connectivity feedback, and recovery behavior for unstable festival networks.

04 — STANDARDIZE THE PHYSICAL EXPERIENCE

Create a consistent system for QR placement, KOTORI branding, booth numbers, dedicated pickup lanes, and vendor instructions.

05 — TEST EARLIER WITH VENDORS

Involve booth staff earlier in prototype testing instead of relying primarily on issues discovered during live operations.

● Product Roadmap

A roadmap for the next stage of KOTORI

Initiative