db_logo.png

Dublin Bus app

Dublin Bus app

splash.jpg
 
db_logo.png
 
 

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).

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).

 

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, Favourites and Stops Near Me. 

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

 

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. 

Dublin Bus - Categories.png
 

Wireframes

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.

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.

 

Design

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.

Helvetica - as a part of current Dublin Bus branding.

 

Interaction

 Introducing microinteractions

Introducing microinteractions

 

Promotional shots

 
dublin_bus2.jpg

Thank you for reading!