ESPN logo

Live Score Apps

A case study

Football Now Scores screen
Footy Now Match screen
League Now Standings screen

Back story

ESPN Australia have a suite of four live score apps on iPhone and Android. They were previously written in HTML, CSS & JavaScript and housed in a native app shell.

The content in the apps was good but the interface and UX let it down. In 2013, we decided to build native apps and were able to explore UI functionality not possible using web technology.

HTML + CSS + JS = Web App

The "Now" Brand

Each of the four apps are branded with a unique colour which flows through the app's UI and creative assets.

A player silhouette helps communicate the sport and distinguishes one app from the other while at the same time visually tying them together.

A-League Football Now

Football Now silhouette

NRL League Now

League Now  silhouette

AFL Footy Now

Footy Now  silhouette

Super Rugby Rugby Now

Rugby Now  silhouette
Football Now app icon
League Now app icon
Footy Now app icon
Rugby Now app icon

Sections

In our initial launch there were six sections.

Scores icon
Scores
Standings icon
Standings
News icon
News
Twitter icon
Twitter
Tipping icon
Tipping
Settings icon
Settings

Sketching

Sketching is a crucial part of my work flow. I use the Behance Dot Grid Book. Sketching helps me quickly iterate UI / UX concepts without the distractions of Photoshop.

In the Scores sketch, I stacked teams and scores above one another rather than centre-aligning them on the same row. This made scanning scores faster and easier.

Scores
Scores sketch

Cards

I began to explore a card metaphor. In the Stats sketch I try hinting at a swipe gesture by showing the edges of the left and right cards.

News
News sketch
Stats
Stats sketch

Score Worm

The score worm is a key UI element which describes the flow of play in AFL, NRL and Super Rugby. It visually communicates which team is winning and by how much and is very common in live score apps.

I tried to improve the design by vertically aligning the worm and the quarter-by-quarter scores below it.

Sketch
Worm sketch
Final mockup
Worm mockup

Video demo

To help communicate the proposed functionality of the app, I produced a Flash-based walkthrough of the scores and menu screens.

This was shared with our dev team, internal stake-holders and the app developers we worked with.

Designing with cards

The online world is currently being re-imagined with 'cards' as a primary visual metaphor.

The power of cards lies in their ability to visually associate related chunks of content, while at the same time differentiating them from other similar groupings of content.

Tweets
Twitter mockup
Matches
Scores mockup
Articles
News mockup

Prominent companies which use cards to enhance their UI include Google, Twitter, Pinterest, Spotify and Facebook. Paul Adams further describes trend in this influential article.

Swiping gesture

Swiping gestures

One of the most common use-cases in the apps is moving between rounds. Previously this was achieved using two buttons in the app's toolbar. Moving from one round to the next was a painful user experience.

Old round nav
The old navigation with buttons

With native gestures we could replace actual buttons with swiping gestures and save screen real estate. Great!

Except that in early beta tests users didn't know how to move from one round to the next. This was a big problem.

First draft
First draft with no visual affordance suggesting swiping

Keen to preserve screen space but also provide a visual aid for users, we added tappable round titles.

Users could still swipe between rounds, and to hint at the swiping gesture, tapping a round title would trigger the sliding animation.

Second draft
Second draft with small round titles

However, the hit-state of the buttons was too small to comfortably tap and the repetition of the word "round" was unnecessary.

The round titles were replaced with larger numbers and the edges of the neighbouring round's cards were shown to suggest more content.

Final draft
Final draft with larger round numbers and cards appearing to the left and right

Notes

I would like to make special mention of the ESPN Australia team whose hard work and collaboration was invaluable to the success of this project.

Also, a special thanks to the guys from WeMakeApps who were a pleasure to work with. I can personally recommend them if you need help with your iOS or Android development project.