Improving the booking experience for a multi-location photo studio
FotoLab is a self-portrait photo studio in New York and Houston, with Los Angeles coming soon. Through the Adobe Mentorship Program, our team of four redesigned its website so customers can book on their own instead of messaging the studio. I mapped the user flow and site architecture, wrote the PRD behind our AI prototype, ran usability testing, and did the final hi-fi pass against the design system.
Problem
Each location offers similar but slightly different services and prices, and the site mixed them all together, so customers messaged the studio with questions instead of booking.
Outcome & Impact
100%
7 testers completed every booking task without help across 2 rounds of testing
4 → 0
Friction points found in round 1 testing; none came up in the final round
Role
Product Designer · Adobe Mentorship Program
Timeline
February – April 2026
(8 weeks)
Team
1 producer, 3 designers (incl. me)
Tools
Figma, Claude Code, usability testing
New visitors: explore by studio
Returning visitors: straight to Book Now
Understanding the friction points in online booking
A growing business with an unfamiliar format
FotoLab is scaling its NYC studio and opening in LA, and wants to reach people who’ve never used a self-portrait studio. The site has to explain how it works (a private room, pro equipment, a remote clicker) and get them to book without needing to ask.
Current site overloads new customers with information
The menu mixed location info with services, booking details had no clear hierarchy, and dense text pushed the “Book Now” buttons apart. Customers had to ask the studio to piece it together.
Competitors lead with clear service options and intuitive user flow
We studied The Selfie Studio, Portrait Space, and 45ID. The best ones separate core services from add-ons, show pricing up front, and keep one clear booking CTA.
Testing our first pass with real customers
I mapped our first user flow, splitting booking by location from the menu.
Initial user flow
We each wireframed the key pages in Figma and compared them, then I built an early interactive prototype of the home page and booking flow.
Figma wireframes for key pages
Early prototype: home page
Early prototype: booking flow
We tested it with two people, a first-time self-service photobooth customer and a returning one, using five scenario tasks, like “Book a 20-minute session in New York with a color backdrop and all digital files. What’s the total?”
Test 1: first-time customer
Test 2: returning customer
Both completed every task, but not easily. Testing surfaced four friction points:
Unclear hierarchy
Services and add-ons weren’t separated, and people skipped “How it works”.
Inconsistent terms
“Book a Self Portrait”, “Rent a studio”, and “Other Services” read as different things.
Too many CTAs
Booking took too many clicks, and it wasn’t clear which studio was selected.
Mixed B2B and B2C
The portable rental and the permanent photobooth looked like the same service.
Restructuring around location
Clarifying the problem for our project
I wrote the PRD that gave our team and later the AI prototype a shared set of rules. It narrowed the problem to three challenges:
Location specificity
NYC and Houston have different hours, prices, and service variants.
Package specificity
Small differences, like color backdrops costing extra, are confusing and need to be explained in as few words as possible.
Mixed B2B and B2C
A permanent photobooth for businesses and a portable rental for events sound nearly the same.
Location first, then narrowing down step by step
I rebuilt the flow around location: pick a studio once, then narrow down one decision at a time (service, then package, then add-ons) so customers never face every option at once. Rentals end in an inquiry form, and the permanent photobooth branches off the home page entirely, since it isn’t tied to a location.
Updated user flow
Naming services intuitively for the users
I explored three nav bars, then we met with the client to settle priorities. The final nav keeps “Services” as one entry point, names “Permanent Photobooth” exactly so businesses can find it, puts FAQ where it’s easy to spot, and leaves Book Now as the only primary CTA.
Navigation options A–C
Turning the PRD into a working prototype
Static wireframes couldn’t show what made booking hard: choices that depend on earlier choices. So we fed the PRD to Claude Code and generated a clickable, coded prototype of the new flow. Instead of linking static frames, we could click through real logic: pick a location, and only that studio’s services and prices appear.
AI prototype, built in Claude Code from the PRD
Faster
A working flow sooner than linking frames by hand in Figma.
Higher fidelity
Selections carry through and prices update, so testers react to real behavior.
Built from the PRD
The prototype followed the rules the team agreed on, so changes started in the PRD.
We used it for our final round of testing with five mentors. All five completed every task, and none of the four friction points came up again. After the AI prototype validated the flow, we designed the final hi-fi UI in Figma.
One system across every location
We each designed screens in Figma, then I did a final pass on all of them against the design system, so every location and service page uses the same components.
Only what each studio offers
Each studio’s page shows only what that studio offers, with “View details” for anyone who wants more, so the main path stays clear.
Two ways in, one clear path
New visitors explore by studio, returning ones go straight to Book Now. A step indicator shows where you are, and a live summary keeps location, service, and price in view.
Separating customers from business clients
The portable rental moved into the booking flow, and the permanent photobooth got its own page and application form, linked from the nav.
Built from the brand, not a template
The old site ran on a standard Webflow template. I built the design system (styles and variables) in Figma from FotoLab’s brand book, so it feels more elevated and contemporary while staying approachable.
What I learned
We handed the final Figma files to FotoLab, and the client was very happy with the result. The next step is development. We designed desktop-first, so mobile layouts are noted for the build.
Clarifying frictions makes solving them easier
Writing the PRD clarified the problem and the path for our design solution. It aligned our team and gave the AI prototype clear rules to build from.
Comparing approaches as a team
Because each of us wireframed the same pages, we could compare different approaches side by side and keep the best parts of each.