Bookneu Event Booking System

Excited to show off my latest personal project with you all!

Bookneu :ticket:

Bookneu was designed by me for an event I help run with a friend each year. As part of this event we run it at different timeslots over the course of a few days. We previously used a system called Attendize, however we used a work around to have timeslots.

Over the course of two months I designed this system, wrote documentation for it and hired a developer to build it in Laravel.

Frontend :art:

This site was designed in Bootstrap 5 - and has a dark theme. I really wanted to design something elegant, modern, light weight, and clutter free for this booking system. All the information should be able to be read at a glance, the timeslot cards took over 3 iterations before I was happy with them. As usual I tasked myself to write as little custom CSS as I could to keep complexity and load times down, this design uses only 12 custom CSS classes.

Front page

This is the application homepage, here the user can find info about the event, and see all the timeslots.

Booking page

Once the user has chosen the timeslot they wish to use they are taken to this booking page. Depending on the number of tickets they have chosen the ticket will be duplicated, here only one has been chosen. The details form has been given the look of a ticket as I thought this would be clear what the information was for, and creates a an almost minimalistic skeuomorphic effect.

Booking Complete page

Once the user has finished their booking and their details have been validated they are taken to this conformation page. The confetti background is done purely in CSS and is animated.

Check-in page

The user then gets an email which has details of their booking and a page to check-in. On the completed system the QR code can be scanned on the backend to record the user turned up for the event. They can also update their details or cancel the booking on this page.

Backend :gear:

The final system was developed in Laravel, a PHP framework. The frontend uses Laravel Livewire allowing for very fast page load times. The system can handle hundreds of users booking concurrently, and checks against ticket collisions like users attempting to book one final remaining ticket at once.

Hosting :cloud:

The final system will be hosted with my business, BlackFox IT, on our custom load balanced, cloud operated hosting platform in the UK, and uses our custom CDN to serve the site assets quickly and efficiently. It is also completely powered by 100% green energy sources. The BookNeu system takes extra advantage of the extremely powerful MySQL database servers I provide, running dual Intel Xeon processors and 192GB DDR4 RAM :fire: .

Conclusion :wave:

I had lots of fun pushing my UI/UX experience with this project. A booking system can seem like an easy task from the beginning but has many hidden complexities. Big shout out to all my friends and fellow designers who I shared this system with while I was developing it. I gathered lots of valuable feedback and everyone seems very happy with the end result, its easy to use and looks amazing. I am extremely happy with it. I hope to make the end system Open Source maybe one day once I have re-designed the admin backend.

Feedback :ear:

As always, feedback is warmly welcomed, I wish I could share with you all the finished system but unfortunately I cannot guarantee any live demo site will be available forever so I unfortunately can’t let you all have a shot using it. The design is very final, and after running it past many friend who work in UI’UX design I am as sure its as flawless as can be, but would be interested to hear if there are areas that could be better in your opinions!

4 Likes