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 time. This project has a strict launch date so it seemed to be worth a thought. After careful considiration we decided to limit the native components to system alerts.
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
In order to ensure my designs were align with customer expectations with current QSR apps, I did a thorough audit of the top 5 QSR apps (Starbucks, McDonalds, KFC, Hungry Jacks, Guzman & Gomez), focusing mainly on coffee and food drive-thru franchises.
Data analysis
To gain a better understanding of our existing customer behaviour without being allocated time for user research, we looked at key data points that help fill the 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?
What is the average cost and quantity per transaction?
What time of day receives the most transactions?
Stakeholder requirements
What do we want to learn?
Marketing - Who are our key customers?
Marketing - What is our existing brand position, and how might it 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?
Research & Development - Is there anything the mobile app can facilitate to improve on product research?
Franchisee - How will the mobile affect your business, what are your main goals and concerns?
Proto Personas
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 so I could streamline the design process to keep it consistent and adaptable to stakeholder changes and needs.
Design System creation
The Solution
Create an intuitive order and pay mobile app experience for existing app users, Zarraffa's regular customers and new customers, resulting in increased engagement and acquisition.
Features to include in the mobile app 2.0
Customise a product
Order and Pay
Redeem rewards
Account creation
Favourite a product, order and store
Join 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.