Welcome to Laura's Buslane frontend design demos.

These are a series of demos intended to demonstrate various UX flows, as well as provide all the HTML, CSS, and frontend interactivity JS for handoff to dev for implementation and integration into the Buslane codebase.

Use the links below to navigate through the demos. Keep in mind, these are in no way integrated with any databases or backend logic, and lack a lot of the features that would require that to work like a full-blown app. Please focus on the frontend UI / UX.

To get back to the start of this demo at any point in the UX flow, simply navigate to the root URL.

Please direct all questions to Laura in Slack.

Demo #1: Single-day trip

In this demo, we're walking through the UX immediately after the user builds a single-day trip and lands on the search results. Single-day trips are simple enough that we can quote users automatically, without intervention by an Operator to review the trip and send a quote. That's why in this demo, you'll see all the prices.

This demo also has the option to "Send Inquiry," which requires the user to submit a question along with basic account creation info.

Start demo: Single-day trip

Demo #2: Multi-day trip

In this demo, we're walking through the UX immediately after the user builds a multi-day trip and lands on the search results. At this time, multi-day trips require submission of trip details and manual review by the operator before a quote can be provided. That's why in this demo, you won't see any prices. The user will receive a quote for their trip within TBD days and have to either approve or decline it. If they approve it, they'll be taken through the checkout process to complete the order.

Start demo: Multi-day trip

Demo #3: Menus

This demo shows all the menu states.

Start demo: Menus

Demo #4: Loader animation

This demo shows the loader animation that appears anytime search results are updating.

Start demo: Loader animation

Demo #5: No results

This demo shows the text that appears when there are no results.

Start demo: no results

Demo #6: Confirmation pages (temporary, stripped down version for Dec. 2024 launch)

This demo shows a stripped down / heavily simplified version of the confirmation pages.

Start demo: Confirmation pages (temp)

The full versions will be implemeted after launch. These can be accessed in the original Demos #1/#2 by following each of the flows, or by clicking the links directly below:

Demo #7: Review & Dispute

These are the screens for reviews and disputes. Please reference the design spec here.

Start demo: Reviews Start demo: Disputes