UbicaBus App

This is a redesign of an actual app that actually exists and that I use. I’m in no way affiliated with the actual app or company behind it (although I did forward the design to them to use if they wanted).

This app is used by my daughter’s school system. It tracks the school bus, letting you know where it is and when it is approaching your stop, which is helpful when you don’t want to have to wait around at the bus stop any longer than necessary (especially in New England winters).

I think the app is a great idea, but I thought the UX not as optimal as it it could be and the UI a bit clunky, so I sought to design an improvement.

To me, the most important thing is the map and location of the bus, so I made that the default screen that the user starts on and always goes back to. I also removed as much stuff as possible that was overlaying the map screen in the current app to make the map as big as possible and tried to reduce the footprint of the markers that indicate the stops.

I moved most of the functions that were overlaying the map or accessed via the bottom tab bar to a floating hamburger menu button. I know there is a lot of literature arguing against hiding things under a hamburger menu, but it is pretty ubiquitous and, again, the map seemed primary to me and if you have to hunt a bit to find some other setting I thought the trade-off was worth it compared to how rarely I used most of the other functions personally.

I also added some additional ways to get to various areas - tapping on the student avatar on the map page to navigate to the “change student” page, or tapping on a stop in the list to refocus the map, for example. I also tried to freshen up the UI a bit with a cleaner layout and more minimal iconography.

Prototype

A Sketch prototype with some additional screens is available here. (I did add one theoretical feature to the prototype - “ping bus”.)