Project Overview
Port Arthur Booking Site is a concept prototype that demonstrates how Port Arthur Historic Site could be utilized using Bookly's booking system. This project was created to showcase our capabilities during a competitive tender process for South Australia's tourism sector.
The challenge was creating a compelling prototype that could handle Port Arthur's complex booking rules, multiple tour types, and service packages while impressing the client enough to win the tender. This project became a pivotal moment in my journey, pushing me to learn AI-assisted development and move beyond traditional design tools.
Project Details
Starting with Figma
I initially designed and prototyped everything in Figma, creating complex flows to handle Port Arthur's intricate booking rules and service packages. This video shows one of our first iterations, but I quickly noticed the prototype was starting to lag as we tried to be as complex as possible to cater to Port Arthur's specific needs and booking requirements.
The Pivot: From Figma to Code
We were short on time and I wasn't confident showing a laggy Figma prototype to the client. I was keen on impressing Port Arthur and winning the tender, but Figma's prototyping and variables could only handle so much complexity at the time - they didn't have their own AI yet.
I took a leap and learned how to "vibe code" and create a fast prototype that was flexible and could handle all the complex "if this tour equals" and "if this service is not equal to" logic that Port Arthur required. I started with v0.dev as it was the least intimidating at the time and recreated my Figma prototype to be like an actual web booking app.
My Learning Journey
Figma to v0.dev
Started with v0.dev to recreate my Figma prototype as an actual web booking application. This was my first foray into AI-assisted development and it felt much less intimidating than traditional coding.
Learning Supabase
I also learned how to connect data using Supabase and basic coding to store actual bookings so we could modify them. This was crucial for creating a realistic prototype that could handle real booking data.
AI-Assisted Development
This project opened me up to the world of AI and leveraging AI tools. It was a win for me because I could do more on the UX side and less manual work in Figma.
Delivering Results
I ended up learning so much and delivering a prototype that looked like how Port Arthur would actually work in Bookly. They were impressed and Bookly won the tender!
What We Built
Complex Booking Logic
Handled Port Arthur's intricate booking rules with multiple tour types, service packages, and conditional logic that Figma couldn't manage.
Real Data Integration
Connected to Supabase to store and manage actual bookings, making the prototype feel like a real application rather than just a design mockup.
AI-Assisted Development
Leveraged v0.dev and AI tools to rapidly prototype complex functionality while maintaining focus on user experience and design quality.
Tender-Winning Results
Delivered a compelling prototype that impressed Port Arthur and helped Bookly secure the government tourism tender.
Impact & Personal Growth
Breaking Design Boundaries
This project pushed me beyond traditional design tools and opened up new possibilities for what I could create. Moving from Figma to actual code gave me much more flexibility and power.
AI as a Design Partner
Learning to work with AI tools like v0.dev and Cursor transformed how I approach prototyping. I could focus more on UX strategy and less on manual design work.
Client Success
The prototype was so convincing that Port Arthur was impressed and Bookly won the tender. This proved that rapid prototyping with AI tools could deliver real business results.
Career Transformation
This project marked a turning point in my career, showing me that I could bridge the gap between design and development using AI tools, making me more valuable as a UX professional.