Dublin Bus

Year
2017
Time2 min read

Dublin Bus app splash image

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

Screenshots from the current version of the app (2017)

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

Early sketches of version 1 and alternative (version 2) of the Dublin Bus app - Home page

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

Bus It To Events screen - sketch

Favourites

Favourites screen - sketch

Stops Near Me

Stops Near Me screen - sketch

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

Dublin Bus App - diagram of the current pain points

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 app categories - information architecture

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.

Bus It To Events wireframe

Bus It To Events wireframe

Favourites wireframe

Favourites wireframe

Home wireframe

Home wireframe

Stops Near Me wireframe

Stops Near Me wireframe

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
Stops Near Me interaction Favourites interaction Bus It To Events interaction

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. Dublin Bus colour palette - Black, White, Yellow, Blue

Helvetica - as a part of current Dublin Bus branding. Family of the Helvetica Neue font incorporated into Dublin Bus app branding

Interaction

Introducing microinteractions

Animation of completed prototype of the Dublin Bus app, including microinteractions ><

Promotional shots

Some of the promotional shots

Dublin Bus app - isometric promotional shots of the app screens

Dublin Bus app - promotional poster of the app, that can be used at bus stops, billboards etc.

Thank you for reading!