Working through the information architecture for a booking-style app (think something like scheduling a service visit — a car wash slot, a fleet vehicle pickup, that kind of flow) and stuck between three structures. Curious how others here have approached this in Figma.
The core flow: pick a service type → pick a time slot → confirm vehicle/location details → payment → confirmation. Nothing exotic, but the ordering and screen-grouping keeps feeling off — especially since I'm trying to reuse the same base components for both a simple car wash app booking and a heavier fleet management app assignment flow.
Option A — Stepper pattern One screen per step, persistent progress bar at top, back/next navigation. Clean, predictable, but feels slow if the user already knows exactly what they want.
Option B — Single scrolling form Everything on one long screen with collapsible sections (accordion-style), auto-expanding as each section is completed. Faster for power users, but harder to show validation errors clearly, and it gets messy on smaller screens.
Option C — Bottom-sheet layered flow Base screen stays the service/time picker, and each subsequent step opens as a stacked bottom sheet rather than a full screen transition. Feels more "native app" but I'm not sure it scales well past 3-4 steps.
For context — this needs to work for both a quick one-off booking (single car wash slot) and a slightly heavier B2B flow (assigning a fleet vehicle to a scheduled pickup), so the same component set has to flex across a simple and a more detail-heavy use case without feeling like two different apps.
Has anyone built out a component set in Figma that handles both a "quick single-item booking" and a "multi-field assignment" flow without duplicating half the design system? Would love to see how you structured your variants/auto-layout for something like this, or any examples of a booking flow that scaled well from 3 steps to 6+ without a redesign.