Back

Busão Carioca

2015-Feb Personal Project Website App Store Google Play

Busão is an app meant for people that want to get around by bus in Rio de Janeiro. This is a personal project, that I have both designed and developed.

Why not just use Google Maps?

That's an excellent question! Well, when you live in Rio de Janeiro... it's complicated. The city's transit infrastructure is just now becoming openly available online, and quite frankly lacks a lot of quality – both in timeliness, and information accuracy.

So as a consequence there were very few (good) services to aid your daily commute, and although Google Maps is being better integrated it's not reliable. Frustrated, I decided to take a stab at it.

Understanding the problem

Rio has two big issues that concern mobility: a rugged geography, and public policy. While you can reasonably argue that every city with 7+ million people will be congested, the city's transit system has definite margins for improvement.

So much so that the mayor's office is planning a major overhaul in the wake of the 2016 Olympic Games, almost half the city's bus lines will be either changed, renamed, or extinguished. So up-to-date information is one essential issue, along with real-time estimates for each of vehicle.

A lean approach to transit

Since this was to be a one man operation, real-time estimates wouldn't be viable, but that was remedied by relaying the location data to the user. When a user sees that their bus is two blocks away from where they are, it's ease to guesstimate. Also, since the focus was everyday commuters, giving directions fell out of scope.

Knowning the bus' position and speed, it's easy enough for the user to estimate it's ETA.

The joys of public data

Finding out about the public API was what started me on this project, and ironically, also the bad state of the data. Basically what is offered is a database dump with the coordinates for the whole fleet – roughly 7,000 buses – updated every minute. That's the good part.

Now a few of the bad:

  • the definition of a minute may vary;
  • roughly half the vehicles circulating aren't assigned to any line;
  • the reported speed is always wrong;
  • no direction info for the buses;
  • not all lines have routes and stops info;

I couldn’t go without this data, so I had to work around and recalculate as best I could. But hey, like I said, working around these was a very masochistic endeavor lot of fun.

Wheat from the chaff

Here's a random sample from the city's API, on close inspection you'll notice that some buses come without a line – actually an empty string – and those who do are assigned either a string or float value. Why not?

// City data sample (formatted)

{
  "COLUMNS":[   "DATETIME",  "ORDER",   "LINE", "LATITUDE", "LONGITUDE","SPEED"],
  "DATA":[
    ["04-24-2016 00:00:01", "B27085", "SVB905",  -22.84939,   -43.32341,    0.0],
    ["04-24-2016 00:00:02", "A41101",       "",  -22.87458,  -43.242153,    0.0],
    ["04-24-2016 00:00:02", "B75592",    355.0, -22.830851,  -43.323799,    0.0],
    ["04-24-2016 00:00:02", "C30204",       "", -22.880692,  -43.358406,    0.0]
  ]
}

And then after some parsing, recalculating, checking, double checking, and discarding, becomes something like this:

// After being processed

[{
  "bus_id": "C41272",
  "line_id": "309",
  "last_seen": "2016-04-24T03:43:20+0000",
  "label": "14 km/h → Central",
  "lat": -22.954138,
  "lng": -43.191936,
  "speed": 13.8,
  "reported_speed": 0.19,
  "movement_type": 2
}, {
  "bus_id": "C41362",
  "line_id": "309",
  "last_seen": "2016-04-24T03:42:51+0000",
  "label": "Bus C41362 stopped",
  "lat": -22.87483,
  "lng": -43.241318,
  "speed": 0.1,
  "reported_speed": 0,
  "movement_type": 0
}]

Making it look good

Since phone screens are so small, my biggest dilemma was wanting to show as many buses and routes as I could, having as little clutter on the map as possible to ensure the information would be easily glance-able by someone on the go.

Testing showed that more than 4 lines at once became very hard to read. And to help distinguish each route, I assigned them some bold colors.

Four bus lines on map

How to convey different states in such an information dense map? Very subtly.

App icons

Dealing with clutter: bus stops are only visible when the user is zoomed in.

Since it's such a tricky data source, communicating status clearly is very important.

Introduction animation and regular app usage.

Wrapping-up

One year in, Busão has amassed 30k unique users – of those, about 5k actively use the app every month across iOS, Android, and Web. Despite being just a drop in the ocean, I am damn proud of it. :)