Joey Kilrain

UX & Visual Design

The Weather Channel


The Weather Company and IBM partnered together to harness the big data of weather, allowing analytics to help businesses of all kinds make insight-based decisions.

The Challenge

The Weather Channel wanted to build a SaaS product that used their weather data and mashed it up with Social Media data, pollutant data, purchase data and other sources to figure out how to translate weather data into business actions.

"Weather analytics is used to see how weather shapes consumers demand – what people need – and with the ability to grab all sorts of data sources, we're now able to be smart to interpret and take action."

Their data scientists had supplied my team with several heavily detailed excel documents. These docs contained globs of anonymous data which could only be understood by, well, a data-scientist. There was no mention as to what their users would need. "Just go figure it out." their Lead DS told us.

My Process

My colleagues and I decided to review the docs privately and make our own notes as to what we thought was valuable. Later we compared our notes and formulated rough ideas. There were several strong product ideas that came about. We explored each of these and realized they were all valuable.

Following our meetings I created a series of wireframes that placed every data point on the page. These wires were not designed with layout in mind but only to show data points.

With these confirmed wireframes I started researching ways on how to visualize the data. Management stated it needed to have 'sizzle'. I met with a few developers to discuss the JS libraries I intended on using to deliver the data. With their feedback in mind I set out to start visualizing the platform.


With 'sizzle' in mind, I set off to create an intuitive dashboard that permitted a flexible pattern library. Because some JS libraries could prove problematic when themeing.

I started to loosely play with colors, fonts, and iconography. For the colors I wanted confident but fun. For the font I looked for modern. And for the iconography I wanted the 'sizzle'

Primary and Secondary colors along with tints

The fonts and 'sizzle'

After creating a few icons I decided to develop a series of these icon to keep the branding and 'sizzle' consistent.

As much as I enjoy UX and Visual Design work I doubly enjoy preparing the production assets. See an example below:

The Results

This product is currently in development. But the beginning process through the production has been smooth sailing. So smooth, we are currently building Phase 2!