Bus routes. The complete picture.

Bus routes in "list view". But unlike other sites that display them in plain lists, I decided to design this in a slightly different way.

Each bus service has 1 or 2 routes with different patterns; A to B, A to A, A to B + B to A, and A to B + C to D.

For 2-route services, Instead of only display one route at a time, both are shown by default, on a rather small column (mobile-first design).

Some stops have blue dotted lines in between. It means both of those stops are opposite each other serving opposite directions of services. They may be walkable from each other via pedestrian crossing or an overhead bridge.

This design may look easy, but the layout logic is way more complicated than I expected.

Higher res: https://imgur.com/a/0yr2Ccp