Stephan Ye

Senior Product Designer

2020 — 2022
The rebuilt Point-of-Sale on a tablet and a phone, product grid on the left, open cart on the right
Tablet and phone, both mid-sale with three items and a loyalty customer attached

Lightspeed sells Point-of-Sale and eCommerce software to small and mid-sized retailers. I worked across five product teams on iOS, Android, and web. The biggest piece of it was a design overhaul of the native Point-of-Sale, a product people knew about and didn't use.

Years of acquisitions had left the portfolio fragmented. A retailer could run into three different Lightspeed interfaces doing the same job: a POS in the browser, a tablet app, and a phone app. Each had its own layout and its own idea of how a sale works. The browser one was what people used, despite limited functionality, slow transactions, and the cost of running a till on a full computer.

The three older Lightspeed interfaces side by side: the browser POS, the tablet app, and the mobile app
The three interfaces this replaced. The browser one on the left had most of the users.

The brief was to consolidate those workflows, build a foundation solid enough to bring new retail verticals onto Lightspeed, and lift adoption of the native apps. So the question was what was holding adoption back.

Answering it took user interviews, collaborative workshops, workflow analysis, and a pass through the usage data. The usage data changed the shape of the problem more than the interviews did. Ringing up sales accounted for 93% of everything staff did in the app, average Time to Transaction sat at about 125 seconds, and most sales were two items or fewer.

Usage analytics for Lightspeed Retail POS with three figures called out: sales 93%, average Time to Transaction 125 seconds, two items or fewer per sale
Event counts per install, and the three figures we pulled out of them

Nearly every real sale was two items, while the interface was built for the rare large basket. Staff were spending over an hour and a half a day inside the POS, so seconds of Time to Transaction compounded into something they felt. The interviews added two things the data couldn't show. Staff had to answer a customer's question and show a sales breakdown on the spot, and value add-ons were worth real money to a small retailer, but nobody remembered to offer them.

A sale broken into five steps from adding items to order confirmation, with each step's attributes and actions listed alongside
The five steps of a sale, and what sits inside each one

Breaking a sale into those five steps and cross-checking each against what staff were trying to do produced four design principles. They did most of the deciding from there on.

  • Follow the walk. Be guided by the user's workflow instead of imposing one that doesn't match it.
  • Freedom to choose. Don't jump to conclusions. Leave flexibility where the workflow needs it.
  • Transparency. Match what staff and their customers expect to be able to see.
  • Hidden values. Surface the add-ons people forget, because the delighters did matter.

The layout followed from the principles. The old screen led with the cart and pushed products into a narrow column. The new one hands the primary area to the product grid and quick actions. The cart and checkout stay put on the right, and navigation gets its own row at the bottom instead of competing for space.

Colour-blocked wireframes of the old and new tablet layouts, with the corresponding screens below them
Old layout left, new one right, with the screens they turned into underneath
Tapping a product tile adds it to the cart, and the item detail view opens with stock, SKUs, a quantity stepper, and an add-to-cart button
Tapping a tile adds the item. The detail view is one tap further in, for stock counts and SKUs.
A cart line item opened onto its own screen with discount, employee, tax class, an internal note, and a remove button
A line item opens onto its own screen. Discount, employee, tax class, a note, remove.
Adding a customer to the sale, choosing from bronze, silver, gold and diamond loyalty rewards, and the discount appearing on the checkout summary
Attaching a customer, then a loyalty reward, then the discount showing up at checkout
Three phone screens showing barcode scanning, product search, and variant selection, above three tablet views of a sale
Barcode scanning, search, and variants on the phone, with the tablet versions below

The revamped POS went into a private beta with more than 30 stores and saw significant adoption there. Time to Transaction came down, which was the win retailers cared about. Add-ons went up too, since putting one into a sale no longer cost anyone time.

A tilted array of redesigned mobile screens including cart, checkout, account actions, and item creation
Part of the wider set. Cart, checkout, account actions, creating a new item.