Sardine

UI Design — Outsmart the crowd on London’s public transport


The Need

With a population of about 9 million, London’s public transportation is often affected by overcrowding. Many riders often experience stress from overcrowding, delays and an overall unpleasant experience.

While many users use mobile apps that tell them the quickest route, these apps do not always provide the most efficient route. Afterall, London’s public transport is more than about timetables, it’s more about the people riding it.


The Idea

Sardine is a responsive website that allows people to create a more enjoyable and efficient journey on London’s public transport by avoiding crowds.

With community reported crowd levels from other riders, users are able to:

  • Chose the most efficient journey — away from crowds
  • Reduce stress by avoiding crowded carriages and buses
  • Feel more in control when using London’s public transportation

DESIGN PROCESS

[Ideation]

I began the design process by first ideating broadly around transportation and with it associations — both words and symbols.

Two themes that emerged from this were:

  1. Can of sardines — as public transportation in London can often feel squashed
  2. Undercrowd — a play on words from the word ‘underground’

[Moodboards]

With these two design directions, I began to put together moodboards for each in order to test what these might look like.

The ‘Sardine’ moodboard was heavily inspired by sardine can iconography, and used vibrant colours in order to feel more playful and friendly. The ‘Undercrowd’ included pastel shades of blue, pink, yellow and purple to create a more relaxing and stress-free experience on public transport.

Sardine Moodboard (left) and Undercrowd (right)

[Design inception]

In parrallel with the moodboards, I began thinking about the mood, space, colour, shape and movement I wanted to convey to users.

Unlike most travel mobile apps, I wanted Sardine to be friendly, energetic, with a clean feel to it.


[Style Tile]

Now that I had an idea of the type of visual language I was looking to create for my idea, I began to look for a range of vibrant colour palettes that would be reflective of Portugese Sardine cans. In terms of typography, I chose a more condensed font that would reflect the tight feeling of being in a sardine can.

Throughout the design process, I found myself continuously iterating my Style Tiles, particularly the colors.

I found that as I began designing the screens of my website, it was only then that I could see that some colours didn’t work together, or they didn’t pass a web accessibility test.


Initial desktop/tablet and mobile sketches

[Sketches]

Before getting my hands dirty in Sketch, I decided to sketch out my design for mobile first. Sketching was an instrumental part of the design process as it allowed me to rapidly sketching out a few different layouts for the screens. This allowed me to think about different ways of constructing the screens as well as how that would match up with the flow of the app.

Higher fidelity Mobile sketches

[UI Kit]

Similar to my moodboard and Style tiles, developing the UI Kit was an iterative process that took quite a bit of effort — mainly because I kept changing my mind about my color palette!

While doing my UI Kit, I made a design choice to pursue gradients as my primary color palette. This was because I felt gradient colors were representative of the shine of fish scales, and I wanted to keep this theme consistent throughout the design.


[Prototype Design]

In speaking with a few riders on the underground one evening, I came to realize that people are busy (not surprisingly) but they also are thinking about many things at once while also trying to use public transport.

As many users already suffer from existing cognitive load, I decided to design results overview screen with a lot of white space and visual cues such as ‘tiles’ that signaled the separation of different transportation routes, while also gamifying the experience.

In addition to this, I included a feature that would enable users to see the least crowded carriages in relation to their location on the platform (if taking a train with multiple carriages) as well as a feature that would allow them to see where they were in their journey with a progress bar.

Finally, in order to encourage the community based reporting feature, I incorporated a report crowd level icon on the navigation screen to enable this behaviour in the moment.

Design learnings

While designing Sardine, one of my biggest learnings was to be aware of the breakpoints — especially on mobile. I learned this this hard way when I came to the realization that the break points on mobile cut off part of the screen on (not the best user experience!). From that point on, my best friend was the Sketch Mirror App, which I used as I was designing.

Mobile (left), Tablet (middle), Desktop (right)