Multistep Order Form
Product Development Case Study
Overview
- MVP
- Focused first release
- 3 steps
- Progressive order journey
- Web app
- Responsive product interface
- 1 goal
- Complete a valid order
The multistep order form is a responsive web application that helps customers submit detailed service orders online. It guides them through three steps: choosing a service and size, confirming the location and dates, and adding contact details before submitting the order.
I designed and developed the application as a minimum viable product (MVP) to make complex orders easier to complete and give the business the structured information needed for fulfilment. This first release focuses on the core ordering journey and provides a foundation for future validation and product development.
Problem
The business owner identified a bottleneck in the existing contact form: addresses did not specify exactly where a container or big bag should be placed. Follow-up emails delayed fulfilment, while calls added staff workload and friction for customers.
Customers had to repeat information, and dispatchers had to clarify the location before passing it to drivers. Capturing the drop-off point upfront could reduce this coordination and the risk of misplaced deliveries.
Improvement opportunity
Replace the standard contact form with a guided, multistep order flow that lets customers confirm the exact drop-off point on a map. Include those coordinates with the submitted order so the dispatcher and driver have a clear location, reducing the need for follow-up calls.
Capturing the drop-off point during ordering offered a practical way to reduce manual coordination for the waste-disposal company.
Product Approach
The approach retained the existing three-step process and email communication, replacing repeated location clarification with a precise map selection during ordering.
- 01
Make location the core feature
Give the map fields prominence in Step 2. A draggable Google Maps pin captures the exact drop-off coordinates for customer and administrator emails, ready to share through the existing dispatch workflow.
- 02
Fit the existing workflow
Support Estonian and English, with a mobile-friendly form and clickable coordinates in emails so drivers can open the location on their phones.
- 03
Keep the MVP focused
Deliver the three-step order form and coordinate emails first. Leave cost calculation out of the initial scope.
Multistep Order Form Flow
One precise location, shared by everyone
An address gets the driver to the property; a draggable map pin identifies the actual drop-off point. Customer and administrator emails include the coordinates as a clickable Google Maps link, giving dispatchers a precise location to share with the driver.
Technical Delivery
The core data flow is simple: select the drop-off point, save its coordinates with the order, and email a location link that can be opened on a phone.
- 01
Frontend and location capture
Vue 3, Vite, Vue Router, and Pinia manage the three-step form and retain order details between steps. Vue-i18n supports Estonian and English. Google Maps address search positions the map; dragging the marker updates the stored coordinates, with reverse geocoding to resolve the address.
- 02
Validated order storage
A Node.js and Express API uses Firebase anonymous authentication to associate orders with a user session. Server-side checks cover contact details, coordinates, service options, quantities, delivery dates, and terms acceptance. Firestore stores the order with a server-assigned sequential reference.
- 03
Email and driver handoff
Nodemailer builds an Estonian summary from the saved order and sends it to the customer and configured administrator. It includes a Google Maps Static API preview and clickable coordinates that open Google Maps. Dispatchers can share this location with drivers; a separate driver email recipient is not configured.
- 04
Recoverable submission
If saving succeeds but email delivery fails, the interface offers an email retry using the original order reference rather than creating another order. Delivery status prevents concurrent sends and repeat sends after recorded success. An interrupted send with an uncertain outcome requires an operator to check delivery before retrying.
- 05
Deployment and observability
GitHub Actions deploys the frontend to Firebase Hosting and the containerized backend to Google Cloud Run. Hosting routes API requests to Cloud Run. Firebase token verification and rate limits protect requests, email content is HTML-escaped, and Winston sends redacted production logs to Google Cloud Logging.
- 06
Testing
Repository tests cover order validation, date handling, map coordinates and previews, autocomplete request races, email safety, terms acceptance, and runtime protections. Firestore rules tests use the Firebase emulator. These checks do not replace real-device usability testing or production delivery monitoring.
Outcome & Reflections
The MVP retained the existing three-step ordering process while adding precise drop-off selection and emailed location links. Support for Estonian and English, a mobile-friendly form, and clickable coordinates addressed the core workflow requirements.
The key lesson was to improve the information captured at the start rather than add more coordination afterward. Next, I would validate the flow with customers and drivers, track how often orders still need clarification, and use those findings to guide further development.