SimpleTouch POS terminal
CASE 03 · MARKETING & PROJECT COORDINATOR

Marketing & Project Coordinator at DigiComm Solutions.

EmployerDigiComm Solutions Inc.
YearOct 2023 – Aug 2024
RoleMarketing & Project Coordinator
SurfaceFigma · Usability testing · Sprint coordination

At DigiComm Solutions I delivered SimpleTouch POS, a retail point-of-sale application, on time and within budget by gathering user requirements, coordinating a UX/UI design team in Figma, and managing sprint timelines and stakeholder approvals. I conducted usability testing with end users and translated feedback into actionable UX improvements that reduced friction and improved task completion across core workflows. Produced user flows, wireframes, high-fidelity mockups, and interactive prototypes in Figma, and maintained UX and brand consistency through a reusable component library, color system, and typography standards. Below: the design process from wireframes through the working terminal demo.

01 · Sign-in screen

The cashier's first screen each shift. I designed it station-aware ("Sign in to your station," not "Sign in") because in retail the device is the persistent context, not the user — multiple cashiers share a single terminal across shifts. Single primary CTA, no competing buttons. Forgot-password is right-aligned because it's a secondary action.

SimpleTouch · sign-in screen wireframe
Figma · low-fi annotated
Wireframe of the SimpleTouch POS sign-in screen showing a centered logo, station-aware H1, sign-in form with user/password fields and remember/forgot row, primary CTA, and station status pill at bottom

02 · Dashboard

After sign-in, the cashier lands on a POS-first dashboard. The hero "Open Register" CTA banner sits above the metrics so a cashier starting a shift can begin ringing up orders in under a second. KPIs (revenue, transactions, average ticket, low stock) are scannable but secondary. Quick actions and recent transactions fill out the bottom of the page for managers and end-of-shift workflows.

SimpleTouch · dashboard wireframe
Figma · sidebar + main content
Wireframe of the SimpleTouch POS dashboard showing a left sidebar with main and configure nav sections, top breadcrumb and search bar, prominent Open Register CTA banner, four-up KPI grid, and quick actions plus recent transactions panels

03 · Register / cashier screen

The actual cashier interface. Two columns: the order side on the left (totals, line items, numpad, action button rows) and the catalog side on the right (search with barcode-scan support, customer banner, categories pinned left + items grid that scrolls). The Charge button sits in the bottom-right as the largest target on the screen, in green to signal "go." Action buttons follow a color system — red=destructive, yellow=hold/payment, blue=info — so risk level reads at a glance.

SimpleTouch · register screen wireframe
Figma · two-column cashier layout
Wireframe of the SimpleTouch POS register/terminal screen showing a persistent topbar with back button, invoice ID, clock, and user pill, plus a two-column body: left column with totals card, lines table, numpad and color-coded action buttons; right column with search bar, customer banner, categories list, items grid, and a large green Charge button

04 · POS terminal

A working recreation of the SimpleTouch terminal flow. PIN login (any 4 digits, or just hit Enter) → select items from the catalog → checkout. The sidebar tracks where you are in the flow.

SimpleTouch · Register #4 · live demo
idle
SimpleTouch · Register #4
9:42 AM
Beverages
Total
$0.00
Payment complete
$0.00 charged · authorization XXX-0000
Customer flow
1
Authenticate
PIN login · 4 digits
2
Build cart
Tap items · running total
3
Charge
Confirmation · receipt
The real terminal handled offline-first behaviour, receipt printing, drawer hardware, and 4 different payment surfaces. This demo is the front-end pattern only.

05 · Wireframe to finished design

Component libraries, color tokens, and typography rules lived in Figma so consecutive screens stayed consistent with one another. The slider below morphs between the wireframe stage (gray-on-white, structure only) and the finished design. Drag the slider to see the design come together.

SimpleTouch · design progression
interactive
SimpleTouch wireframe
SimpleTouch finished design
Drag the slider right to advance the design from wireframe to finished
Wireframe
Finished0%

What I'd do differently

The single biggest win would have been earlier moderated usability sessions with cashiers on real terminals, before we locked in flow patterns. Testing happened late enough that the feedback shaped polish rather than core decisions. On a future engagement, I would build the test cadence into the sprint structure from week one.

Back to first case
NetTracePro, marketing operations & design
← Back to index