Bus Tracker Case Study: My UI/UX Design Process

By Isma Ruiz on
March 28, 2019

How can design help me save time? When I used to wake up at 5:00 am to start my daily commute to Dublin, I wondered about this question. They were not easy mornings and sometimes I had to wait 20 to 25 minutes and I was quite surprised with the inaccurate arrival time of the bus. It was then that I decided to design a case study to solve this problem for this company and their clients and reduce the waiting time of the users. This is also a great opportunity to show you my UI/UX process that I use to design products and solve problems.

THE PROBLEM

I will start with the problem. This was clear: angry unsatisfied customers because of the long wait for the bus or the fear of missing the bus when it was coming too early. The arrival time was very inaccurate, arriving too late after the schedule or too early before the schedule, sometimes reaching  25 minutes of inaccuracy. When waking up at 5:00 am in winter time, 25 extra minutes waiting on the side of the road felt quite a lot. This is valuable time for the user that could be considerably reduced.

THE SOLUTION

Design a very simple user friendly app (solution) that allows the user to track the arrival time of the bus. This will reduce the waiting time at the bus stop and the stress caused by the fear of missing the bus. The ability to set an alarm when the bus is about to come will reduce the anxiety of the user and will let the user relax until the alarm goes off and it is time to go to the bus stop.

Designing, Planing and Research

Once the problem is identified and the solution is clear the next steps consist of brainstorming, finding inspiration and analysing the competition. I created a mood board to have all the inspirational resources in one place. After this I started sketching ideas on paper to solve all the user cases, and finally, I designed low fidelity wireframe task flows that show all the interactions of the app based on user requirements.

High Fidelity Mockups

I used the wireframes and mood board as a reference to start designing the high fidelity mockups. Before designing the screens, I identified brand values and I set the typography, colour scheme, iconography and imagery for the app.

Landing for Second Time Users

The second task flow takes place when the user has already saved one location and has previously signed up to the application. In this case, for second time users, the previous home screen is not required. When the user opens the app they would have the option to either select a saved location or implement a new search to find a different stop.

Interactive Invision Prototype

I used Invision to create an interactive prototype of the app for every task flow. This allows for verification of the task flows and the usability of the app with real users.

Usability testing

I tested the tasks with some users and I implemented some modifications based on their feedback. In some cases the user was confused about the functionality of the stop name bar (Red Cow Luas),  thinking that this may be a search bar where they could input new locations. To clearly show the user where their location is, I redesigned the stop name bar, making its function clearer for the user. I also added a new stop icon so the user can find their stop at a glance on the map.

Postcards by Designmodo