WEATHER INTERFACES
Templatizing Reporting Needs into Dashboards
About
Launching a completely new weather network meant creating a completely new brand and look, as well as a full working set of templates that could be filled with live weather data.
We created informational designs to account for every type of weather scenario where data might need to be presented on-air and streamed in-app. We passed these templates to the Weather Presentation team, who would then fill the templates with live data. We also needed to expand the core brand that had been developed for the network as the graphic needs of the network expanded, and we adapted and added to a core icon set that had been created by another third party design agency. Essentially, we were responsible for maintaining the emergent design system of Fox Weather, however its graphics needs might change or grow as it neared its launch (as well as in the aftermath of the launch).
PROJECT OR FILE
The Fox Weather app is free and downloadable here
The Result
A still from a live broadcast streamed to the Fox Weather App utilizing side panel data, in-studio infographics, and banner information at the bottom of the screen
THE CHALLENGES
Constraints of Media
The main challenge of designing all of the templates was working within the parameters and limitations of the actual screen layout. While it was anticipated that these graphics would be viewed primarily on the Fox Weather app, they were to be streamed via live broadcast onto the mobile app screen. So, we were limited to the technical requirements of brodcast and how things are built to be aired through a control room. Here below is the basic safety and layout of the screen.
Finished Designs
A CLOSER LOOK AT THE SIDE PANEL
An important piece of the layout puzzle was utilizing a side panel area that would always sit to the right of a video screen in particular setup. We began by designing the winter alert side panel, which was modular by nature; pieces could be switched out and flipped around depending on which data needs to be shown. We also created a fire alert side panel, hurricane side panel, and a flight data side panel.
Furthermore, we needed to adapt our designs to the "promo bug" space, which is the rectangle in the lower right corner of the screen, so that shorthand information can be conveyed when the side panel is not showing
