Cricket Australia Live Redesign

January 2018

Live matches & the latest news on your device

Creative Direction

Interface Design

UX Design

UI Design

New business requirements, namely commercialising the app –insert Ad– meant promoting video above all else. The old design did not prioritise video content over news and our new objective was to become the 'Home of Highlights' for Cricket.

‍

A bit of background…

It had been a couple of years since CA Live had a brand update and things were looking a little iOS9 πŸ˜…. With a new season looming, we decided to give the app a refresh.

New business requirements, namely commercialising the app –insert Ad– meant promoting video above all else. The old design did not prioritise video content over news and our new objective was to become the 'Home of Highlights' for Cricket.

The old home screen (below, left) did a great job of visually promoting mixed content with great images – Instagram style – but only displayed 5 items with a link to the news screen. We updated the layout to allow fans to scroll through a mix of top video highlights then top news highlights as this was the metric we were heavily nudging.

Old CA Live app layout vs new proposed app layout

‍

The pivot to video (over news)

Taking direction from the best in class for video, YouTube, we looked at how they delivered content. One thing YouTube does best is to send you down a never-ending rabbit hole – and we had about four years worth of continuous video to feed cricket hungry fans.

To provide a better experience, visual feedback on which video was up next, which was currently playing and which had been played was introduced to the UI. This was important as users would frequently come back to the app to see the latest highlights – or replay ones they had viewed previously.

Because of this, we felt that the UI needed to feed show which videos were being watched, up next and already seen.

The UX we designed gave visual feedback on which video was up next, which was currently playing and which had been played. This was important as users would frequently come back to the app to see the latest highlights – or replay one they had viewed previously.

‍

‍

We also simplified the tab icons to promote video over news in the hope that all these subtle changes would drive more video consumption.

‍

Splash Screens

Updating the splash screen pre-series was a must as in the past we had let the design slip a little. We had great photos of the players and decided to promote them as heroes of the game.

‍

Match Card unification

As we were updating a few properties in our product suite (namely cricket.com.au & Match Center) we decided to consolidate all the various layouts of Match cards.

There were a few problems with the old format, the first being acronyms for team names. It was suggested these were confusing when displaying international teams and there was no way to differentiate Mens or Women's matches. The second was the visual hierarchy, the team names and flags were larger than the score. And lastly, the problem of fitting all this information into a small space.

When reviewing how other sports displayed scores we were always envious of 2-3 digits score formats. Cricket scores are complex and display differently for each format – Tests have previous and current innings, ODI's & T20's must display overs and BBL introduced a Super Over if the game was tied.

The challenge was to include all of the above, details of Match Summary, Teams, Scores, and Series info while maintaining readability and reducing the card size.

Live Icon + Live drawer

The purpose of this UI was to subtly attract attention when a match was live-streamed - to promote the new Kayo subscriptions. I applied a simple pulsing animation to draw the eye and let the user know there were video and radio streams available. This was applied across both CA Live and Match Center properties.

Onboarding

A new onboarding sequence was designed to inform users about these features while performing the usual notification and permission settings. We had age restrictions due to our sponsors so we needed to communicate that along with all the notification settings. The [Pre-Ashes] release of the app shipped with a few new features including BBL customisation, Match notifications, and a new Matchday experience.

Matchday UX

This concept was driven out of a need to improve purchase decisions, develop player connections and value attendees. We trialed this last season with a simple set of features that added an extra experience for anyone attending a match.

So, what's important to fans before, during and after the matches? We kicked off some initial explorations to really understand what was important – and feasible in the time allocated for the initial phase.

Matchday Implementation

The 2018 at-match feature was not only updated from XXXX Gold Yellow to Gillette Blue after a sponsor-swap but included an updated dashboard screen that promoted primary actions above brand and marketing initiatives.

Over the last year, the business pivoted to put more focus on Fan Engagement, and this season included an updated Matchday featuring and AR experience as a pilot. The idea of Player Bays was born and, along with our tech partner Accenture, we designed and built an AR experience that would allow fans to interact with a players avatar.

Matchday was geo-fenced to 20km from the venue. This meant we needed to customise the dashboard for each stadium.

‍

‍

Like what you see?

Discover what design can do for your business