Cafe-In — Member Card Application
A mobile member card application bringing cafe membership, balance top-up and QR payment together in one place.
- Mobile app
- Case study
- Loyalty
Project Overview
Cafe-In explores a digital membership experience for cafe customers, with a card-first home screen, account balance and transaction history.
Problem & Goal
Problem
Physical membership cards and separate payment steps can make everyday cafe visits less convenient.
Goal
Create a straightforward mobile experience for managing a member card, topping up a balance and paying by QR code.
User Research
Research Method
The case study includes user research to inform the membership and payment journey.
Target Audience
Cafe customers who want a convenient way to access their member card and manage payments on their phone.
User Flow
The user journey connects the main tasks into a clear, step-by-step experience.
Wireframe
Low-fidelity screens establish the information hierarchy and navigation before the final visual design.
Design Guidelines
Key Features
Digital member cards, card details, balance top-up, QR payment, payment confirmation and transaction history.
Color Palette
A coffee-inspired palette of dark neutrals, warm brown, cream and white.
Typography
A clean sans-serif type system with clear hierarchy for headings, instructions and interface labels.
Challenges & Solutions
Challenge
Keep membership information and payment actions easy to understand without crowding the home screen.
Solution
A consistent card-first layout, clear form steps and confirmation screens help connect each task.
Conclusion & What I Learned
The project connects research, user flows, wireframes and visual design into one mobile membership experience. It highlights the importance of clear navigation and feedback throughout payment tasks.
Mockups
High-fidelity mobile screens showing the main application journey.
Tools & Methods
- Figma
- User research
- User flows
- Wireframing
- Usability testing