PROJECT OVERVIEW
CLIENT
POSRocket
MY ROLE
Design Lead, via Plexable
SCOPE
Persona, wireframes for 13 back office areas, three visual options, final UI for iPad, web and phone
VALIDATION
Three visual options narrowed to one final UI, and the wireframe flows that were agreed are what the finished screens follow.
TIMELINE
2017, from gray wireframes through to the final UI
TEAM
Delivered through Plexable with the POSRocket team
The context
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.
The back office had to cover items, modifiers, taxes, discounts, stock, staff and cash drawers for one branch or many. Its tagline, Yes, it's rocket science, set the bar for what the MVP was expected to hold.
My responsibility
Plexable's deliverables were 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 the studio's SaaS MVP product design work.
Within that, the design calls were mine. I decided what stays on screen while a sale is open, how 13 areas of a back office are grouped, and what an owner gets on a phone.
A back office with 13 areas needs an order of work more than it needs a hero screen. Gray wireframes came first for every area, and the final UI followed them.
That sequence kept visual work from running ahead of structure. It also meant the easy-to-forget cases were settled while the screens were still gray.
CONSTRAINTS & TRADE-OFFS
Two very different users share one product here. A cashier needs speed in a loud room, and an owner needs numbers that read clearly on a laptop or a phone.
One visual language had to serve both. Strong tile colors do the work at the counter, while the same system goes quiet in the back office so the figures carry the page.
● RESEARCH & CONTEXT
A persona from the counter
Research centered on one persona drawn from the counter. The cashier takes walk-in, phone and delivery orders, and has to enter each one right the first time.
The persona had to scroll down an order to see what it cost. Store managers, separately, needed a simple way to run cashier shifts.
● PRODUCT DECISIONS
What the research changed
What the research found went straight into layout. The sale panel keeps the total pinned at the bottom, so an order's cost is readable at any length.
Opening and closing the drawer got its own flow rather than a corner of settings. Stock was tied to the item record itself, so a count moves without anyone being asked to update it.
● PRODUCT ARCHITECTURE
Three surfaces, one system
The product splits along who is holding the device. Whoever is serving a customer gets one screen that finishes a sale; whoever is running the business gets the place where that screen is set up.
Each surface was sized to its job rather than made to match the others. The till takes everything a sale touches, the browser takes setup and reporting, and the phone carries a short version of the back office.
● PROCESS & EVIDENCE
Every area of the back office exists twice, once in gray and once finished. The gray version includes the cases that are easy to forget, such as a store with no items yet, a deleted category or a waste amount error.
The dashboard shows the distance best. Its March 2017 wireframe lists sales, transactions and top items in gray, and the finished page turns the same data into a donut chart, category bars and colored figures.
OUTCOMES
From MVP to acquisition
The MVP 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.
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.
WHAT I’D IMPROVE
What I would do differently
Design the phone back office alongside the web one instead of after it, so the three things it keeps are chosen rather than inherited.
Write the empty-state copy at wireframe stage. Every empty page needs one clear next step, and that is a content decision before it is a visual one.
WHAT I LEARNED
What I took from it
Color can be a retrieval tool rather than decoration. Tile color is how a cashier finds an item under pressure, which makes it a functional choice.
Counting out a drawer is a design problem, not an accounting one. Show the numbers that are already known before asking a person for the one that is not.
More work
HIRING A HEAD OF PRODUCT DESIGN?