Old version of the start screen: single Basic package with price and payment prompt
before
Product redesign
UX/UI · Kiosk
New start screen: three packages Quick, Smart and Ultimate with contents and prices
after
Product

The touchscreen interface visitors use on their own in Lilo photo studios inside US shopping malls: choose a package, pay, shoot, edit, print.

1. My role
Lead designer. I owned the product structure and flow logic, designed key screens myself, and directed two designers.
2. Team
Me, two designers, one developer. I worked directly with the business owner.

Self-service photo studio interface for a chain of 26 studios across the US

Lead Designer
Timeline
Apr–Aug 2025, Feb–Jun 2026
Status
Design complete, in development
Launch
Early 2027, all 26 studios
Tools
Figma, Figma Make for prototypes
Product structure | Flow logic | UI
02 — The user and the jobp. 02

Theuser

A walk-in visitor of any age who has never seen this screen before and may not read English. They came to get printed photos. Nobody is standing next to them to explain what to press.

03 — Where it hurtsp. 03

Where ithurts

Testing of the previous version showed where sessions broke. People dropped off at the very first steps.

40–70%
of visitors leave before paying in the current version
Source: Google, “user drop-off rate”
Old payment screen: Coupon and Scan QR and Pay buttons look the same
Problem

No clear value

Payment came right after the first screen. Visitors could not see what they would get for their money, so there was no reason to buy.

01
Old screen with a free Basic session and Cancel and Start session buttons, no sign of what comes next
Problem

No sense of sequence

The order of the session was not readable from the screen, and people stopped, unsure what would happen next.

02
Old goodbye screen with a waving hand and Come again text
Problem

Missing screens

Parts of the journey had no screen of their own, and the interface gave no feedback on where the visitor was.

03
04 — The flowp. 04

Theflow

I rebuilt the structure from scratch and added the screens that were missing. The new flow is longer than the old one on purpose: the business needed packages, digital delivery and extra copies.

My job was to make ten steps feel like one obvious path.

  1. 01
    Start
    Choose a package, see what is inside it, apply a promo code, switch language
  2. 02
    Payment
    Package contents on the left, price on the right, card terminal or QR code
  3. 03
    Instruction
    Five seconds, pictures only
  4. 04
    Shooting
    Live camera view with a countdown, time left and a strip of photos already taken
  5. 05
    Email
    Where to send the digital copies
  6. 06
    Editing
    Collage, frames, background, presets
  7. 07
    Printing
  8. 08
    Consent
    To use the photos in social media
  9. 09
    Offer
    Extra copies at a discount
  10. 10
    Goodbye
    Screen with a QR code
BeforeOld flow
Old flow diagram: start, main page, optional coupon, payment, shooting, printing, email, offer, consent, goodbye
AfterNew flow · 10 steps
New flow diagram: coupon, booking and printer checks, plan selection, payment, instruction, shooting, email, digital-only branch, editing, printing, offer, consent, goodbye
05 — Decisions and what I rejectedp. 05

What Irejected

Decision 01

Filling a collage

RejectedDrag and drop photos into cells
ChosenTap to number
WhyPart of the audience would not discover dragging on a touchscreen. I replaced it with tap to number: tap a photo, it gets a number and appears in the matching cell. One gesture, visible result.
Rejected Rejected collage screen: photos are dragged into empty cells of the layout
drag & drop
Final Final collage screen: tapped photos get a number and fill the matching cell
tap to number
Rejected Rejected checkout screen: a short item line and a summary focused on the total
amount only
Final Final cart screen: package contents on the left, total price with promo code on the right
contents + price
Decision 02

Payment screen

RejectedA screen showing only the amount
ChosenPackage contents next to the price
WhyThe visitor should see clearly what they are paying for. The final screen lists what the package includes next to the price.
06 — When things go wrongp. 06

When thingsgo wrong

Payment error pop-up: Your payment could not be completed, with a Try again button
SituationNo. 01

Payment fails

Visitor sees

A message that the payment did not go through and a prompt to pay again.

Timeout pop-up: Are you still there? with a countdown bar and New session or Continue buttons
SituationNo. 02

Time runs out with no photos taken

Visitor sees

The session returns to the instruction so the visitor can start again.

Printing error pop-up with QR codes for email and help form and an Exit button
SituationNo. 03

Printer is not working

Visitor sees

A message explaining the problem, and the photos are delivered digitally by email instead.

07 — What changed after testingp. 07

Seconditeration

Testing results came back after the first design round, and I did a second iteration on the points where people slowed down.

01

Shooting screen

Added a countdown, time remaining and a hint on where to tap. Photos already taken collapse into a small strip so the camera view stays the main thing on screen.

Shooting screen, first round: live camera preview with a Start button
before
Shooting screen, second round: timer, tap-to-focus hint and Start button over the camera preview
after
02

Start screen

Packages moved to the very beginning with their contents spelled out.

First-round start screen: one $9.99 package with what is included, plus My booking, Promocode and Start buttons
before
New start screen: Quick, Smart and Ultimate packages with contents and prices
after
03

Instruction

Rebuilt around pictures, so the steps are clear without reading or knowing the language.

First-round instruction: pop-up with four illustrated steps and a Continue button
before
Second-round instruction: four photo cards showing each shooting step, with step navigation and timer
after
04

Feedback

Added pop-ups that confirm each action and show the visitor where they are in the session.

First-round confirmation: pop-up saying the photos have been sent to the email address
before
Second-round confirmation: same message with step navigation at the top showing the current stage
after
05

Editing panel

Reworked the panel for collage size and shape, frames, colours, background replacement and presets.

First-round editing screen: background swatches and a collage preview
before
Second-round Stylize screen: photo list, preview and panels for frames, background, presets and AI styles
after
08 — Resultp. 08

Theresult

The redesign is in development and will replace the current interface in all 26 studios. Until launch, there is no live data to compare. The numbers below come from public industry statistics found on Google: typical results for interfaces like the old version, and the forecast for the same metrics with the redesigned flow.

Metric Old version Forecast
Drop-off before payment
2× lower
40–70%20–35%
Direct payment conversion0.5–2%3–6%
Staff help requests25–35%5–8%
Source: industry statistics, Google · Launch planned for early 2027
09 — What I would do differentlyp. 09

What I would dodifferently

A second delivery route

The email address is already checked: a pop-up asks the visitor to confirm it before the photos are sent. Still, when the printer fails, email is the only way to get the photos. I would add a QR code as a second delivery route, so visitors can save their photos straight to their phone.