Knutsford SaaS UX UI: Modern Dashboard for Travel & Courier

Client Needs & Business Goals

Knutsford Express, a leading luxury ground transport provider in Jamaica, wanted to modernize its online booking dashboard. The goal was to create a seamless digital product that allowed travelers to easily manage new and upcoming trips, email tickets, and view travel history—all within a clean, intuitive SaaS UX UI design. In addition, the client wanted to expand dashboard capabilities by including courier booking, account settings, and subscription management.

Client’s Website ► https://knutsfordexpress.com/

The Challenges

1. Provide a dashboard where users could quickly access upcoming trips and booking details.
2. Add a “New Booking” flow that made creating fresh reservations fast and intuitive.
3. Allow users to email purchased tickets with one click, improving convenience.
4. Integrate travel history so travelers could revisit or rebook previous journeys.
5. Design and integrate courier booking services within the same dashboard.
6. Build account and subscription management modules for a complete user experience.
7. Ensure the design translated well from Figma prototypes to a fully responsive Bootstrap front end.

The Details of our SaaS UX UI Design solution

We designed the Knutsford Express dashboard in Figma, prototyping every key feature and then building a responsive front-end dashboard with Bootstrap:

• Upcoming Trips Section: Clear cards showing ticket number, departure/return times, passenger info, and quick actions like “Email Ticket” or “Change Booking.”
• New Bookings Flow: Streamlined steps to search routes, select seats, and confirm journeys with minimal clicks.
• Email Ticket Feature: One-tap solution for emailing purchased tickets directly from the dashboard.
• Travel History: Organized records of past trips with the option to rebook quickly.
• Courier Booking: Added a dedicated flow for sending parcels, aligned with Knutsford’s transport services.
• Account & Subscriptions: Designed account settings and subscription management screens to give users full control over their profiles.
• Prototype & Development: Delivered a clickable Figma prototype for testing and built the live responsive interface using Bootstrap while maintaining design fidelity.

Front-End Development for SaaS UX UI App

After completing the UX/UI design in Figma and validating flows through prototyping, we moved into front-end development for the Knutsford Express dashboard. Using Bootstrap, we translated the design system into a responsive, pixel-perfect interface that worked seamlessly across desktop, tablet, and mobile devices.

Key Dashboard development steps included:

• Implementing the dashboard layout with clear sections for Upcoming Trips, New Bookings, Travel History, Courier Booking, and Account/Subscriptions.
• Developing interactive elements such as editable booking cards, “Email Ticket” actions, and quick rebooking shortcuts.
• Integrating Google Maps with a pulsating icon to indicate traveler departures within the next 30 minutes, providing real-time visual context for journeys.
• Ensuring fast loading times and smooth transitions so users can easily manage trips without friction.
• Preserving the design consistency from Figma to code while optimizing for scalability and performance.

The outcome was a fully functional SaaS dashboard front end, coded to deliver the same clarity and usability as the prototype, while being robust enough to scale as Knutsford Express expands its travel and courier services.

The End Result

The result was a modern, responsive, and user-friendly travel booking dashboard where travelers can:

• Instantly see upcoming trips and manage bookings.
• Create new bookings quickly and easily.
• Email tickets directly from the dashboard.
• Access travel history and rebook past trips with ease.
• Use courier booking without leaving the platform.
• Manage account settings and subscriptions within a clean SaaS UX/UI environment.

Live URL ► https://prodesign.tech/portfolio/knutsford/

Client Feedback