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 want to optimise its customer relationship 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.QSR franchises like Starbucks and McDonalds by offering customers the ability 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. We must create an ordering process with the mobile app that improves upon the existing ordering process.
The Process
Past research
Zarraffa's outsourced its market research project to an external agency to get a better idea how their loyalty program compares and preforms against 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.
What to learn
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.
[IMAGE]-Market trends
[IMAGE]- Proto personas
Stakeholder requirements
Lo-Fi Wireflows
[IMAGE]- Wireflows
Define the IA - Menu
[IMAGE]
Hi-Fi Visual design & Interactive Prototypes
Design System creation
The Solution
Create an intuitive order and pay mobile app which process easy to use for Zarraffa's customers
Features to include in the mobile app 2.0
Customise a product
Order and Pay
Redeem rewards
Account creation
Increase franchisee revenue
Based on key stakeholder feedback(Franchisee) we included QSR standard upsell and cross-sell