Busbud.com is an intercity Bus OTA that sells bus tickets online in 63 countries on a million + routes. As part of the ongoing effort of improving the website experience, I redesigned the core funnel on mobile web and desktop.
A design system isn't about looks, it about solving the problems you commonly run into in a systematic, intuitive and consistent manner.
In Busbud's case: address a couple of creeping UX & technical issues that Busbud was facing.
- Improve the mobile experience, conversation rates and satisfaction.
- Revisit the website navigation to better align with user's intention to navigate between pages of the funnel.
- Implement a solid component based design system to increase consistency, speed up the design process and front-end development.
- Create a design system that would align with our future development goals.
Busbud's redesign was data driven since the company has built solid event tracking. Most decisions were driven by explicit behaviour we could witness. For instance, Busbud features breadcrumbs for the 3 steps on the funnel (Search, Select, Pay). However those breadcrumbs were not clickable but were getting clicked on almost constantly by users trying to navigate between pages. I embraced the behaviour and made the breadcrumbs the center piece of the navigation bar while also making them clickable. They became the #1 way to navigation the platform.
Moreover, the endgame was a fully developed design system that would be both usable within Sketch and on the frontend. The result was a set of components (symbols) that were integrated in Sketch as Symbol and in code with 'Busbud Bootstrap' an implementation of the popular css framework specific to Busbud that supported all our components.
Below are some screenshot from the final product, head to busbud.com for more.