FIGMA - Mobile UX/UI Design Offline Ordering App
Budget: €250 – €750 EUR
I am looking for a UX/UI Designer to create a fully interactive, clickable mobile prototype in Figma, designed as the foundation for an offline-first Progressive Web App.
The goal is to design a complete user experience, with realistic flows, clear states, and meaningful interactions, as if the application were already functional.
The prototype must be completely neutral.
Objective
The final Figma file should allow anyone to:
click through the entire experience
move forward and backward naturally
simulate real user actions
always understand what is happening and why
A developer should be able to build the app directly from the prototype, without additional explanations.
General Experience Description
The app represents a user who:
browses a menu
selects products
manages a cart
submits an order
completes a simulated payment
finds saved orders later
uses a temporary QR code to collect items
handles full or partial collection
The experience must be designed with an offline-first mindset.
The user should always feel that their data is stored safely on the device and never unexpectedly disappears.
UX Flows to Design
Menu Browsing
The user lands on a screen showing a list of products.
They can search, filter by category, and scroll through a grid of product cards.
Each product card shows:
image
name
short description
price
controls to add or remove quantity
As soon as the user adds products, a bottom cart bar becomes visible, showing:
number of items
total amount
primary action to continue
Cart and Order Submission
The user reviews selected items, adjusts quantities, and confirms the order.
Once confirmed, the order enters a clear, persistent state.
Even if the user closes the app or loses connectivity, the order must feel stable and recoverable.
Simulated Payment
The prototype must include a realistic payment flow:
data entry
processing state
completion state
interrupted or aborted flow with return
The focus is not on the payment itself, but on state management clarity and user confidence.
Orders Wallet
The user has a section where all orders are stored locally.
Two views are available:
orders to be collected
orders already collected
Each order clearly displays its status and available actions.
Collection Mode Selection
When an order is ready, the user chooses between:
collecting everything at once
collecting only part of the order
In partial collection, the user:
selects specific items
adjusts quantities
sees a live summary of what will be collected
Temporary QR Code
The prototype must include a QR screen where:
the QR is hidden by default
the user explicitly reveals it
the QR is visible for a limited time (for example 15 seconds)
a countdown is clearly shown
the QR can expire and be renewed
The QR should feel intentional, controlled, and sensitive, not permanently visible.
States and Variants
The design must clearly communicate:
online vs offline
unpaid vs paid orders
partially collected orders
QR hidden, active, expired
enabled, disabled, and loading actions
These states should be implemented through component variants, not duplicated screens.
Figma Requirements
Well-structured file
Reusable components
Variants for all major states
Fully connected prototype (tap, back, overlays)
Subtle auto-animations where appropriate
Clear naming of frames and components
The goal is to design a complete user experience, with realistic flows, clear states, and meaningful interactions, as if the application were already functional.
The prototype must be completely neutral.
Objective
The final Figma file should allow anyone to:
click through the entire experience
move forward and backward naturally
simulate real user actions
always understand what is happening and why
A developer should be able to build the app directly from the prototype, without additional explanations.
General Experience Description
The app represents a user who:
browses a menu
selects products
manages a cart
submits an order
completes a simulated payment
finds saved orders later
uses a temporary QR code to collect items
handles full or partial collection
The experience must be designed with an offline-first mindset.
The user should always feel that their data is stored safely on the device and never unexpectedly disappears.
UX Flows to Design
Menu Browsing
The user lands on a screen showing a list of products.
They can search, filter by category, and scroll through a grid of product cards.
Each product card shows:
image
name
short description
price
controls to add or remove quantity
As soon as the user adds products, a bottom cart bar becomes visible, showing:
number of items
total amount
primary action to continue
Cart and Order Submission
The user reviews selected items, adjusts quantities, and confirms the order.
Once confirmed, the order enters a clear, persistent state.
Even if the user closes the app or loses connectivity, the order must feel stable and recoverable.
Simulated Payment
The prototype must include a realistic payment flow:
data entry
processing state
completion state
interrupted or aborted flow with return
The focus is not on the payment itself, but on state management clarity and user confidence.
Orders Wallet
The user has a section where all orders are stored locally.
Two views are available:
orders to be collected
orders already collected
Each order clearly displays its status and available actions.
Collection Mode Selection
When an order is ready, the user chooses between:
collecting everything at once
collecting only part of the order
In partial collection, the user:
selects specific items
adjusts quantities
sees a live summary of what will be collected
Temporary QR Code
The prototype must include a QR screen where:
the QR is hidden by default
the user explicitly reveals it
the QR is visible for a limited time (for example 15 seconds)
a countdown is clearly shown
the QR can expire and be renewed
The QR should feel intentional, controlled, and sensitive, not permanently visible.
States and Variants
The design must clearly communicate:
online vs offline
unpaid vs paid orders
partially collected orders
QR hidden, active, expired
enabled, disabled, and loading actions
These states should be implemented through component variants, not duplicated screens.
Figma Requirements
Well-structured file
Reusable components
Variants for all major states
Fully connected prototype (tap, back, overlays)
Subtle auto-animations where appropriate
Clear naming of frames and components