Dublin Bus

Time3 min read

alt text

It all started when…

...I was waiting for a long overdue update to the app. I was frustrated with how obfuscated navigation was, how sluggishly the app performed and how non user friendly in general it was to use on an everyday basis.

Being a bus commuter, I decided to make a concept that could enhance user experience and help us to quickly find bus stops and routes and to speed up interaction overall.

The current state of play

The current (2017) version of the application hasn't been updated since 2012, which means it is not optimised well for bigger screens (example: the screen keyboard always appears larger than usual). Navigation with one hand can be difficult: I always have problems reaching the menu when rushing to catch a bus (Apple's Reachability solution usually introduces more distraction and definitely imposes more cognitive strain in the described situation).

alt text

I often found it annoying and frustrating not being able to use the app during the loading screen on Bus it to Events - the whole app simply froze.

Another issue I came acros was that, while using Stops Near Me, I couldn't tell what my exact location was since bus stop pins/locators looked exactly the same as my current location indicator!

The early stage of app life

It was time to list the common pain points and issues related to the app. Using good old traditional sketching, I drew out two concepts of the homepage - considering two types of navigation: V1 bottom tab bar and V2 tiles located in the lower part of the screen with the hamburger menu (containing less important sections).

alt text

Sketching out how particular section could look at this stage was a good idea too. I've decided to focus on most dysfunctional section of the apps:

Bus It To Events

alt text


alt text

Stops Near Me

alt text

I tend to work with mind-mapping quite often, as it helps to structure pain-points in a more visual way.

alt text

Information Architecture

Part of the process was to build the navigation that would have a logical structure and shortest ways possible to reach the goals.

alt text


Finally, after a sketching session, I produced some wireframes using Adobe XD to see how actual elements of the app can look on the screen. I took into consideration skeuomorphism - to introduce bus stop pins/locators on the map as they normally look in the real life.

Bus It To Events wireframe

alt text

Favourites wireframe

alt text

Home wireframe

alt text

Stops Near Me wireframe

alt text

Going further, using prototyping tool in Adobe XD I was exploring possible ways user journey and interaction.

At this stage I decided to use V1 bottom tab bar of the navigation, since it would be the easiest to use with one hand while in a rush.

Stops Near Me Favourites Bus It To Events
alt text alt text alt text


Satisfied with layouts and wireframes, it was time to make a design! The general thought process was to not produce anything too extreme or in any way radical that could confuse users, because, as we know, the transition from old to new can sometimes be problematic, especially when introducing new navigation flow or unfamiliar patterns (mental model). I used Sketch for general design and Flinto for microinteractions.

Incorporating Dublin Bus colour palette, my aim was to design the app around the current Dublin Bus branding. alt text

Helvetica - as a part of current Dublin Bus branding. alt text


Introducing microinteractions

alt text ><

Promotional shots

Some of the promotional shots

alt text

alt text

Thank you for reading!