Order & Pay mobile app 2.0
Zarraffa's coffee
14 July 2025
-
31 Mar 2026
Team
Head of Software
Business Analyst
UX Designer (Yours truly)
IOS Developer
Android Developer
Business Intelligence Developer
Role
Senior UX & UI Designer
Responsibilities
Define key userflows
Hi-fi visuals and showcase journeys using interactive prototypes
Stakeholder requirements and feedback management
Managing Marketing requirements & collaboration
Create the Zarraffas Design System
Create all the mobile app illustrations
Collaboration with Developers for quality insurance
Overview
Zarraffa's wants to optimise its customer relationships and satisfaction by offering the same ordering experience as leading QSR franchises such as Starbucks and McDonald's, allowing customers to customise a product, place an order and pay before arriving at the store.
The Challenge
Mobile app 1.0
The current mobile app is a digital loyalty card and a way for customers to view the Zarraffa's menu. Loyalty members can track their accrued Z$ points and view complimentary drink rewards.
Current order process
Zarraffa's customers are accustomed to placing an order in-store or at the drive-thru. Our challenge is to create a mobile ordering process that improves the existing ordering experience.
Consistent language and taxonomies
To ensure a consistent ordering experience for Zarraffa's customers, we created a consistent language across all customer-facing channels. Working closely with the Marketing team, we defined any new language specific to the mobile app and carried it throughout all channels.
Liquid glass consideration
Since starting this project, Liquid Glass iOS 26 was released, and with it drove the question, "Do we implement native components for faster development?" This project has a strict launch date, so it seemed to be worth a thought. After careful consideration, we decided to limit the native components to system alerts. The business wants to instil brand trust given the introduction of a vulnerable feature like in-app payments.
The Process
Past research
Zarraffa's outsourced a market research project to an external agency to get a better idea how their loyalty program compares and performs against the main QSR competitors. I was able to extract suggested key customer segments from this research as a starting point for my proto personas for the mobile app.
Market research
To ensure the designs aligned with customer expectations and current QSR apps, I did a thorough audit of the top 5 QSR apps (Starbucks, McDonald's, KFC, Hungry Jacks, Guzman & Gomez), focusing mainly on coffee and food drive-thru franchises.
Data analysis
To gain a better understanding of our existing customers' behaviour without being allocated time for user research, we examined key data points that help fill gaps in our knowledge of customers.
I worked with the data analyst developer to retrieve key behavioural statistics,
What percentage of customers are loyalty members vs non members? Result: 64% of our transactions are loyalty members
What is the average cost and quantity per transaction? Result: The average order transaction is $12.35, we discovered that 53% of sales consisted of 2 drink items in an order and 37% 1 drink item and 1 food item.
What time of day receives the most transactions? Result: The majority of trade is morning coffee and mid-morning coffee and brunch.
Stakeholder requirements
What do we want to learn?
Marketing - Who are our key customers? What do we know about our customers?
Marketing - What is our existing brand position, tone of voice, and how might we change for the mobile app?
Operations - What problem are we trying to solve?
Operations - How might the current ordering process change for the mobile app?
IT - Are there any technical limitations? What payment gateway will we use, and are there limitations?
Research & Development - How can the mobile app facilitate or improve the product research process?
Franchisee - How will the mobile affect your business? What are your main goals and concerns?
Proto personas
I put together a hypothesis about who our target personas might be and presented the concept to key stakeholders. After rapid feedback and iterations, we settled on the following:
Lo-Fi Wireflows
To clearly communicate the key user flows in the mobile app, I mapped out higher-level wireflows in Figma to represent the ordering process for the guest user, account holder and loyalty member. We iterated through these concepts with feedback loops with various SME's across various departments.
Define the IA - Menu
To create consistency in menu architecture across the website and mobile app, I defined a relationship and hierarchy for product groups and all the products in the menu. My goal was to determine the existing groups and create logical groupings based on industry menu patterns. These groups and levels are used to display the menu in the mobile app.
Hi-Fi Visual design & Interactive Prototypes
I developed a visual representation of the mobile app screens using Figma.
At the start of this phase, I created the first Zarraffa's design system to streamline the design process to keep it consistent and adaptable to stakeholder changes and needs.
Design System creation
I created a fully integrated design system and UI component library to help streamline the creation of design files and improve adaptability based on stakeholder feedback.
The Solution
What did we design and develop
An intuitive order and pay mobile app experience for anyone who want to place an order as a guest, account holder or loyalty member. We want to consider existing app users, regular customers and new customers, resulting in increased engagement and acquisition.
Features to include in the mobile app 2.0
Customise a product
Place an order as a Guest user
Order and Pay
Redeem member loyalty points and complimentary rewards
Create a Zarraffa's account
Favourite a product, order and store
Join the loyalty program
QSR upsell & cross sell strategies
Increase franchisee revenue
Based on feedback from key Franchisee stakeholders, we included a QSR standard upsell and cross-sell component embedded in the ordering process before the checkout screen. This feature will automatically suggest the appropriate modifier group or paired product based on the items in the order and time of day. Future automations include customer behaviour tracking and suggestive items based on the customers' most commonly ordered items.
Achievements
Illustrations
I was given the responsibility for defining the style and creating all the illustrations that appear in the mobile app.
In total, the mobile app has about 52 illustrations. This artwork appears on empty states, loyalty rewards, and bottom sheet overlays.
IOS Design 2026 - Liquid glass
Liquid Glass was released midway through product development, so we had to decide which native components to adopt to ensure a faster delivery. My main concern was the inconsistency of UI components and overall look and feel, which can lead to brand distrust and discomfort.