Circlepay | Restaurant Payment Platform | Web & Mobile

CirclePay – Restaurant Payment Platform | Web & Mobile Design Client: CirclePay Agency: Capi Product Service: UX/UI Design · Web App · Mobile App Timeline: February – April 2024

CirclePay is a web and mobile payment platform designed to simplify dining experiences. It allows restaurant customers to pay their own bill, split payments with friends, or even pay for someone else — all from their smartphone.

Capi Product was responsible for designing the complete digital experience, from concept to final UI, ensuring that every step feels seamless, intuitive, and delightful for both users and restaurants.

Before the redesign, restaurants faced long wait times for bill payments, and customers lacked flexible payment options. The challenge was to design a system that integrates speed, clarity, and convenience — reducing friction for both diners and staff.

Our design focused on three key principles:

Ease of use: one-tap payment flow with minimal screens.

Clarity: intuitive bill overview and transparent cost splitting.

Trust: familiar UI patterns and visual consistency across web and mobile.

We built a dual-interface system:

Customer App: clean, modern interface for scanning the table QR, viewing orders, and paying instantly.

Restaurant Dashboard: analytics-driven design for managing orders, bills, and real-time transactions.

Visual direction uses warm neutrals + vibrant accents to balance hospitality with technology. Iconography and typography ensure clarity even under low-light restaurant environments.

✅ Reduced average payment time by 60% in pilot restaurants. ✅ 90% of test users reported “easier” or “faster” checkout. ✅ Improved user trust through transparent, receipt-style UX.

UX Flow & Wireframes

Web App & Mobile App UI

Design System (Figma)

Interactive Prototype

CirclePay is a payment support website application for restaurants that allows users to pay their own table, split the bill or pay the bill for someone else.