Bustickets Responsive Web Design
Bustickets is your one-stop destination for purchasing bus tickets anywhere in the country.
Role: UX/UI Design, Graphic Design
Tools: Adobe XD, Jira, Photoshop, Illustrator, FontAwesome
Overview
Bustickets, an established platform, is expanding with new pages. One crucial addition is the schedules page, displaying bus timings for selected origin and destination pairs.
Ideation
To initiate the process, I delved into research, examining various travel agencies' approaches on their schedules pages, blog sites, and advertised deals. This exploration aimed to bring insights into effective strategies and innovative features that could be adapted for Bustickets' new pages. From there I began creating wireframes.
Schedules Page
Ensuring clarity and functionality on the schedules page is paramount, as it serves as the gateway for users to select their desired bus itinerary. Key objectives include:
Clear Presentation of Price and Time Information:
Display prices and departure times prominently for each available route.
Utilize a clean and intuitive layout to ensure easy comprehension.
Easy Modification of Search Parameters:
Implement user-friendly filters to enable quick adjustments to the search criteria, such as date selection.
Include prominently placed buttons or links for users to modify their search without confusion.
Providing Alternative Routes for Unavailable Options (Edge Case):
Design a system to handle scenarios where preferred routes are unavailable due to factors like fully booked buses or scheduling conflicts.
Offer alternative route suggestions, clearly indicating any differences in price, duration, or transfer points.
Ensure transparency by providing explanations for why certain routes may not be available and offering viable alternatives.
By prioritizing these elements on the schedules page, users will have a seamless and intuitive experience when selecting their desired bus itinerary, even in scenarios where their initial preferences may not be feasible.
Solution:
Users can conveniently access date options at the top of the page to navigate through different dates for fare and time comparisons.
Time and price information is prominently displayed, ensuring clear hierarchy among other details.
The top section becomes a modal in the mobile version, so that users do not need to scroll far to see the schedule results.
When routes are not found for the selected origin and destination, users are presented with a list of nearby cities that can provide optimal service. By offering a clear list of cities and enabling users to expand each option, they can find the most suitable route for their journey.
City Page
The city page serves as a crucial gateway for driving traffic to the website. Its primary objective is to provide valuable information to travelers about the city they are visiting, while also serving as an effective platform for enhancing SEO performance.
Key Takeaways
Throughout this project, I gained invaluable insights into the intricacies of crafting a design that seamlessly integrates user experience while meeting all project requirements. It was a challenging yet rewarding endeavor, I learned to navigate the complexities of ensuring that every element added value without overwhelming the interface.
Held feedback meetings with developers and project managers to ensure designs align with the component library and are feasible for implementation.
Considered SEO implications, prioritizing user-beneficial information over clutter on the site.
Adopted a mobile-first approach in design, minimizing the need for revisions due to information not fitting properly.