M-Bus is the University of Michigan’s bus tracking app that shows arrival times, routes, and nearby stops.

screenshot of m-bus app on a phone and two wearable devices

The Problem

The University of Michigan is a big place, spread across multiple campuses. Thousands of students ride the buses every day and need a reliable app to help them plan their trips. Magic Bus, the app we were providing to campus in 2014, showed potential but had plenty of room for improvement.

Students gave us a ton of great feedback about Magic Bus. The navigation was unclear and the most important piece of information they sought, the bus arrival time, was hidden behind a series of interactions in the map view. At the time, we were paying a vendor to manage the UI. Once we allocated more resources to the project, we decided to start from scratch and build our own experience. This allowed us to be more creative and roll out app updates more flexibly.

My Role

After interviewing a small group of users on campus, I decided to rethink the information architecture of the app entirely. The old default view was of a map, where little bus icons flew around the screen as they traveled across campus. I quickly discovered that this is inaccessible to users with visual disabilities, because there isn’t any text-based content on the screen for them to interpret. I went back to the drawing board and asked my users what they really need to know when they first open the app. Their answer: “where I can get on the bus and when it will be there.”

sketches of the new m-bus app redesign

This gave me the idea to create a new default view called Nearby Stops. All it shows the user is a list of the three nearest bus stops and when the next three buses will arrive at each of them. This was a dramatic simplification of the UI and overall, users appreciated it. For more visual learners (or users who didn’t want to let go of the old design) I still included a Map View tab where they can track the buses by real-time location. I also designed a companion app for wearable devices that gives users the bus info they need at a glance.

mockup of the new m-bus app redesign
mockups of the m-bus app on the apple watch and moto 360 watch
a picture of the m-bus app running on an apple watch
another photo of the m-bus app running on an apple watch