Finalist
Finalist
Shortlist
Finalist
Nominee
People's Lovie
Shortlist
Best User Experience
UX & Service Design
Best use of API
Mobile UI Design
Best New Apps
Best Travel Apps
All Content © Copyright 2010 – 2018 Ryan Shelton
City & Urban Innovation
Mobile Of The Day Winner
Best User Experience
Best User Interface
Awards & Recognition
User Reviews
★★★★★
Londoners must have!
Can't live without this app! Especially on a night out when I've missed the last tube or it's too busy! Super user friendly, not sure how I managed without it!
Koko -B
★★★★★
Pure Excellence & Simplicity
This app is excellent. I use it while I'm dressing to check when the bus is coming at my local bus station and it's always superbly accurate. Did I mention the design is awesome? Simple, easy and effective. Kudos to the makers.
Υφας
★★★★★
Exceptional
This app is great. This is the best app ever for the travel on buses. The design and user interface is brilliant.
Mohsinakram14
★★★★★
Great app
Jump makes getting buses as easy as booking a taxi with its notifications feature and means I haven't got soaked at a bus stop since downloading it.
Alex Handley
“Jump is one of the slickest bus apps: a fast, well-designed way to check nearby bus stops, buses on their way and set alerts to make sure you never miss them.”
“Jump Means You Never Have to Wait For a London Bus Again.”
“Jump for iPhone is a slick, real-time bus-tracker for London-dwellers.”
“Jump will help you find your way home – and look good while doing it.”
“Jump is here to quell your transport-based wrath. This (genius) new London bus app knows your favourite stops and tracks bus progress in real time.”
“Jump uses an ‘almost game like interface’, and allows users to track buses’ progress in realtime, view routes and set alerts.”
Stuart Dredge
Jennifer Allen
Paul Sawers
Diane Shipley
Essential Apps
Design Week
The Guardian
148Apps
The Next Web
Shiny Shiny
ShortList Magazine
Press Reviews
JUMP: A LABOUR OF LOVE
From design and build to App Store submission and marketing. Receiving fantastic reviews and seeing Londoners use the app has made all the late nights truly worth it.
3.0
4.0
We plan to make our way through the alphabet adding new bus route destinations for each release.
The Jump App Icon receives a small
tweak with each new release.
1.0
Starting at the beginning of the alphabet with Aldgate and the popular Bus 40.
2.0
We called Version 2.0 Brixton (Bus 118).
One of the most challenging aspects of this app was coming up with the name (Jump) and creating the app icon. I thought a pin on a map might work but that was soon dismissed, a bus on a banded background, the bands inspired by bus times in the app, a bus wheel...
I wanted something that Londoners would instantly recognise as a bus app. A London bus app!
London has a new fleet of Routemaster Buses nicknamed “Boris Buses” after ex-mayor Boris Johnson who introduced them. They’re a modern interpretation of the classic Routemaster.
Boris Buses have a very iconic look to them. I chose to create an icon that paid homage to this new bus, utilising crisp lines and colours.
APP ICON
CORE
FUNCTIONS
• Search stops
• Save favourites
• Set alerts
• Change theme
Extras
1
Find bus stops
near you
2
Track bus progress
in real time
3
Check all stops
on a route
Promo Video
Written and Directed by Ryan Shelton, Produced by Pinyata
Voiceover: Lee Sellers, Wordsmith: Mike Potter, Soundtrack: Dexter Britain
FINAL
DESIGN
Video from Jump's App Store listing. It shows the core functionality of the app and the animations I’ve been attempting to explain up to this point. What isn’t shown in the video is how you dismiss a card (you can view this via the promo video below).
Knowing that time is a precious commodity we strived to show bus arrival times from a single tap.
Bus stop tabs on card
Visual showing bus arrival times for a specific bus stop. Bus direction and destination displayed in the footer of the card.
EARLY
ANIMATION
IDEAS
Inspired by old train station ticker boards.
Team
Ryan Shelton (Design Lead)
Adam Shelton (Design)
Marco Meschini (Development)
Objective
Make use of TfL's Open API. Design an elegant, aesthetically engaging app. A user interface unmatched in its simplicity with laser focus on the core information – bus arrival times. Make the app unique, beautiful, fast and smart.
Early App Sketches
One of my first ideas was to show all buses arriving at a particular bus stop in a graphical way through concentric circles. Each bus would have a circle with the countdown to arrival represented by how complete the circle was, ie. less circle meant less time to wait.
The circles idea was soon trashed as I felt there was too much info to be displayed and the circles seemed to complicate rather than simplify the information. Other ideas were around selecting a bus stop (sketch 2) and then displaying just the next bus. The problem with this was if I was in the city or at work, I might want to see buses over the next 30 mins so I could plan when to leave the office and time my arrival at the bus stop around the time the bus arrived.
I also had the idea of searching for buses near me or by a specific location and then showing results (sketch 3). The problem with this is I felt people needed to get their bearings by showing results on a map rather than in a list. Once a bus stop was selected I wanted to show all bus arrivals on a single screen.
Initial Design Concept
1
Load Screen, choose current location or search.
2
Bus Stop Info. Buses arriving at bus stop shown on right hand side, bus arrival times to the left.
3
Tapping on a bus number (Bus 10) flips screen to show bus stops along chosen bus route.
I still wasn’t happy with the designs so I decided to start again. I set out to remove as many taps as possible and focus more on surfacing relevant information more quickly.
I felt the design was far too complicated and difficult to follow so I started to consider cards and using gestures to display or dismiss information.
BACK
TO
THE
DRAWING
BOARD
Make the app more fun to use
The first, second, third bus cell grow or shrink depending on the time of each.
Bus arrival time animation
Initial card idea, making use of the arrival time blocks from the original design but instead of showing all info at once I focused on a single bus. The idea was that as buses got closer or time to arrival decreased, the size of the block would change - creating a neat animation and the feeling of the bus network being alive. Taping bus numbers (39, 188, 470) would, like-wise, animate the time blocks to the required arrival times for those buses.
JUMP
LONDON BUS TRACKER APP
Every year over two billion bus journeys are taken in London, that’s five and half million journeys every day.
The goal with Jump was to make use of Transport for London's (TfL) Open API to create an innovative, functional app. An app built for Londoners which taps into bus information and presents arrival times in a unique way. Jump is a self-initiated project.
Portfolio of Work
RS