POSRocket - A cloud point of sale for restaurants and shops
“
An iPad till for the counter and live numbers for the owner.
POSRocket
POS app and back office, 2017
About the project
POSRocket is an Amman startup, founded in 2016, that sells a cloud point of sale to restaurants and shops. We designed its MVP: an iPad cash register and a back office for the web and phones. In early 2017 we built a persona, wireframed every area of the back office and took the final screens through three visual options. Foodics acquired POSRocket in 2022.
Project
POSRocket POS and Back Office
Industry
Restaurant and Retail Tech
Location
Amman, Jordan
Date
2017
“
Client Request
POSRocket wanted a point of sale that runs the counter on an iPad, takes stock out as items sell and lets owners follow every branch from the cloud.
POSRocket
Product goals, 2017
Design Pillars
Core UX Principles
Big color tiles for items, with the current sale and its total always on screen.
Items, variations and ingredients are linked, so every sale takes stock out and warns before something runs low.
Charts and plain tables for sales, refunds, taxes and cash, for one branch or all of them.
User Research
A Persona From the Counter
Orders From Every Side
The cashier takes walk-in, phone and delivery orders, and has to enter each one right the first time.
The Total in View
Our persona had to scroll down an order to see what it cost, so the sale panel keeps the total pinned at the bottom.
Shifts and Cash
Store managers needed a simple way to run cashier shifts, so opening and closing the drawer got its own flow.
The Challenge
Problem Statement
The Main Goal: Faster Sales and Clear Numbers
POSRocket runs on an iPad at the counter and in the cloud for the owner. The cashier side had to keep up in a busy store, and the back office had to cover items, modifiers, taxes, discounts, stock, staff and cash drawers for one branch or many.
“
Yes, it’s rocket science.
POSRocket Tagline
POSRocket, 2017
Our Approach
Solution
An iPad Till With a Cloud Back Office
A persona, wireframes for 13 areas of the back office, three visual options and the final UI for the iPad cash register, the web back office and phones. It is an example of our SaaS MVP Product Design work.
01 - The iPad Cash Register
Pages of item tiles, the current sale on the right, discounts, payment and the cash drawer.
02 - The Web Back Office
A dashboard and reports, plus items, modifiers, taxes, discounts, inventory and staff for every branch.
03 - The Office on a Phone
The dashboard, branch status and menu of the back office, sized for the owner’s phone.
Before & After
The Blueprint & Evolution
Wireframe to Final Dashboard
Each back office page was laid out as a gray wireframe before its final design.
Before: the March 2017 wireframe, with sales, transactions and top items in gray.
After: the final dashboard, with a donut chart for top items, bars for top categories and colored figures.
Design
Key Features
Pages of Item Tiles
Cashiers put their best sellers on pages such as Normal, Drinks and Dinner, and give each page its own color.
Closing the Cash Drawer
At the end of a shift the app lists the starting cash, cash sales, refunds and cash paid in or out, then asks for the amount actually in the drawer.
Design System
Visual Identity
Typography
Roboto on the web back office and Heebo on phones, with large light figures and bold labels.
Color Palette
Dark slate menus, a bright blue for actions and totals, and strong tile colors so cashiers can find items by color.
Empty States
Every empty page has an illustration and one next step, such as Create a new item or View all products.
Impact
From MVP to Acquisition
Results for POSRocket
The MVP we designed grew into a cloud point of sale for restaurants and shops in Jordan, Egypt and Kuwait. Foodics of Saudi Arabia acquired POSRocket in January 2022.
POSRocket
Result
By the Numbers
3 Platforms
An iPad app for the counter and a back office for the web and phones.
13 Back Office Areas
From the dashboard and items to taxes, staff and cash management.
97 Wireframes
Back office screens and edge cases, drawn before the final UI.
Wireframes
Mapping Every Case
Empty, Error and Edit States
Each area of the back office got its own wireframes, with the easy-to-forget cases too: a store with no items yet, a deleted category, a waste amount error. The agreed flows became the final screens. You can see some of the results below.
Final Showcase
The POSRocket Product
