Riders were getting frustrated with the current bus system, arrival times were inaccurate and constantly being affected due to;

While the users would primarily be everyday commuters looking to stay up to date on what was going on with their bus, to know if their commute would be affected in any way, we also wanted to make sure the app would be able to benefit those who would ride the bus once or twice a week just to get to different places in the city.

The main survey was sent out to r/samplesize, a subreddit dedicated to research. We set constraints to make sure that those taking the survey had actually used the bus system previously in their life.

One of the key things we found was that Bus arrival time was the most important information people wanted when going from point A to B

Another key piece of info we noticed was that people would associate bus numbers with the numbers on their bus. We later decided to implement this into the app as a quick way for people to correlate what they were looking at on their phone, with what they were looking at in real life.

With our audience in mind, I created a few Personas to help empathize and gain a greater connection to the users that we were designing for. Meet Darius and Rachel!

With a good understanding of the user’s current interaction with the bus system, I created a few user flows to describe the process that users would take when navigating the bus app.

The wireframe process was straightforward however many things were reiterated on, after doing some tests to see how the flow would work I decided that the bottom bar that shows “directions, stops, buses” was not needed instead I could provide that info through other parts of the app, this helped avoid overloading the user with too many options to pick from.

The first prototype fixed many usability issues that came up during the wire frame process. Things like lack of text hierarchy as well as unnecessary info. I also played around with a horizontal layout of the app during this prototyping phase which can be seen at the bottom.

With a solid idea of the layout and feel we worked on creating a brand for the app itself. After sitting down and brainstorming names and then creating logos based on those names we settled on ‘Pocket Route’ the Logo resembling a pocket with a map icon in the middle and a navigation arrow in the top right.

I decided simpler was better for Pocket Route. Since people will rely on this mostly for navigation having too many distracting colors was a no go. So I settled on doing a simple grayscale format with a splash of red and a deep dark blue for certain elements.
‍
The font San Francisco was used because of the familiarity users would have with it making it quick and easy to read.

With the final look and feel for the app, it was time to put it to the test, I conducted 3 different usability tests with a range of different users put into 3 user categories. Those categories were.

Some key findings were that most users seemed to have issues navigating to the very last screen where they would get the directions, this might be a hint that we need to make it more apparent that certain icons can be clicked. Another issue was that the back icon wasn’t quite as noticeable as we had originally thought, so we made it a much bolder color.