Sky News and Weather

"Rebuild and add some HTML5/CSS3 swankiness."

With Foxtel's move to HTML5 capable Set-Top Boxes, they asked us if we could re-develop the news and weather applications.

Due to the available technology at the time, the old applications were looking a bit fuzzy around the edges, so this was a great opportunity to tidy them up with some nice clean lines and make a few other improvements along the way.

Some considerations and challenges

The Weather Channel had been acquired by Sky News so the visual design needed an upgrade.

There were several stakeholders involved in the process.

New data was being added to the application so I had to make as many performance savings as possible, while still making the biggest visual and interaction improvements.


Liaised with stakeholders within Nagra, Foxtel and SkyNews to present ideas and gather feedback throughout development.

I initiated a subtle visual design rebrand of the weather application to reinforce Sky News branding and subtley updated the treatment of elements in the news application, always feeding back to designers and product people who had a vested interest.

I worked with the UX team at Foxtel to refine the navigation buttons used, so we'd have a good match for the next generation of Set-Top Boxes.

When I'm working on a project where I'm updating a previous interface, I like to use this technique where I print out a screenshot of the screen at a low opacity and then sketch in details that need changing.

I reconstructed the front end fom scratch using HTML5 and CSS3. (This was previously an application that used a proprietary programming language.)

I employed JavaScript to describe interactions to the software engineers.

I applied traditional best web practices coupled with knowledge of how STBs process HTML instructions to alleviate performance issues occurring due to the additional data. (The way the STB browsers work is a little different to desktop browsers.)

I reviewed data visualisation, adjusted data tables to address some accessibility issues and assist in the absorption of information.

Below you can compare how dam volumes were expressed previously, with my updates. My changes eliminate redundant rows, enhance contrast between the foreground and background and also give each cell a little more room to breathe.



The applications have successfully launched on the Foxtel network with enhanced visual quality with minimal transitions to support the added data.

The new adjustments to typography, data visualisation, branding and general visual appearance has made the user experience a smoother and more enjoyable one, without sacrificing performance.



Summary of my contributions to this project:

UI design (User interface design) Interaction design Stakeholder liason User testing Visual design Adobe Photoshop Adobe Illustrator HTML CSS

Back to the portfolio