Title
Date
Description
There's a lot going on with cricket.com.au – live cricket coverage, live streaming, cricket highlights, live scores, breaking news, video, analysis and expert opinion.
The old site was doing a job but it needed to be updated to reflect a changing audience and commercial business requirements. Mobile viewing of the site was up from 10% (2014) to 50%, and the old site – while being responsive – didn't take advantage of wider screens that had evolved over the years.
[insert all the images from CSS stats. How many different style were used.]
In short, a design update was required.
First, we worked with our amazing content team to define a prioritised layout that would better suit our audience while also delivering on our commercial strategy. This did mean more Ads – but better-placed Ads – and a layout that was optimised for available screen space.
Future header states
One day, in the future not too far away… we will update the global header to include Edition Switching. This will allow us to maintain an overarching cricket brand that will allow fans to choose between domestic or international content.
The Design system (aka style guide)
When I joined CA in late 2015 we had a website (a few websites even), but no documentation or design systems. Over the years we tried hard to build a live design system but unfortunately, resources were low and other priorities always received more attention. Shame.
We did, however, manage to build basic design systems with Invision DSM across a few properties, but that was never the game plan, just reality.
Below you can see the main elements of the system, typography and type scale, brand and UI colours, buttons, components, grids and spacing. These were the foundation of anything that is built on cricket.com.au
Match Center
The old Match Center was not "responsive" it merely filled the space it was given - think tables 😞. Also, it was designed around an Ad unit. Yep - it was designed around an MREC so it could pay for itself. Commercial Inception some might say.
We wanted to redesign our existing Match Center before the Ashes series to give fans a better responsive experience – that was layout as well as performance. The new Match Center was re-built with React which meant it loaded lightning quick. It also had a cleaner design which focused on stats data.
To test the updated design we engaged Usabillia to collect qual and quant insights continuously over the 17/18 summer. It was a great tool that gave us the opportunity to engage with users, to see what they liked and disliked, about the new features in production.
The team is constantly iterating on and building new features. Watch this space.
Previous project
Discover what design can do for your business.
Discover what design can do for your business