Designing app from the ground up : Coles Pay

Overview

I helped establish the foundational UX and design system for Coles Pay, defining how complex payment and loyalty services should live inside the Coles app, how each feature should scale as a reusable module, and how partner-managed experiences could feel seamless to customers.

Key responsibilities

  • Design systems

  • Visual design

  • Interaction design

  • UI design

  • Prototyping

  • iOS & Android design

  • Accessibility

  • Usability testing

Why we built Coles Pay?

Coles customers often had to manage payments, rewards, gift cards, and loyalty programs across multiple cards and apps. Tracking balances, redeeming rewards, and earning points added unnecessary friction to the checkout experience.

Coles Pay was designed to bring these services together in one seamless experience, making checkout simpler, faster, and more convenient for customers.

Designing for complexity

Coles Pay was built using Beem's SDK and integrated with multiple payment, rewards, and wallet systems. Designing the experience required balancing technical dependencies, operational constraints, and input from multiple stakeholders.

Modal flow

Since Coles Pay was embedded within the Coles app, modal flows were used to launch payment and loyalty experiences while allowing customers to seamlessly return to where they started.

Modular layout system

I designed the checkout experience as a modular layout that simplified complex payment flows, reduced cognitive load through expandable sections, and created a scalable foundation for future features. The modular approach also enabled new features, such as gift cards, to be added and released over time using the same design pattern.

Information Hierarchy

The checkout flow was designed around the customer’s payment mental model: use gift cards first, redeem rewards next, and pay the remaining balance with a payment card. This hierarchy made it easier for customers to understand how the total was calculated, what savings had been applied, and what was left to pay.

Visual Foundation

I led the visual design for Coles Pay, defining the iconography, colour system, typography, spacing, and component styling. Accessibility was embedded throughout the design process. The resulting design system scaled across iOS, Android, and Coles Pay web checkout, creating a consistent and accessible foundation for future product growth.

Impact

The in-store pilot showed that customers were willing to change how they paid. Around 12% of transaction volume shifted to wallet-led payments, with 5% moving to Flybuys points and 7% to gift cards.

This validated the value of Coles Pay in-store and demonstrated its potential to drive meaningful customer adoption even before a full rollout.

Reflection

The biggest learning from this project was that behaviour change often comes from reducing uncertainty. By making points, gift cards, and payment options easier to understand at checkout, Coles Pay helped customers feel more confident using the value they already had.