WEATHER APPS

CASE STUDY

ROLE:
IA, IxD, UI Design Lead

I managed an in-house design team as well as an overseas agency NBC partnered with. Priorities included updating the UI to reflect current design trends as well as the look & feel of iOS 7 & 8. The stations also requested greater presence of the interactive radar, station branding and station talent. Additional features included native weather alerts and school closings, interactive info graphics and layers, integrated advertising as well as customized animated weather backgrounds. Designing something with this many features while maintaining an engaging, clean and usable interface was an amazing and exciting challenge.

This was a 9 month project that involved involvement from the various divisions of NBC including, executive, editorial, ad sales, brand directors, product managers, engineers and design.

STEP ONE

Sketching and Whiteboarding

As with most complex digital projects it helps to generate ideas on paper or a whiteboard. This helps in brainstoming varous concepts, layout and simple interactions without having to worry about using a a computer or software. We want this phase to be agile and efficient. Find good ideas and expand on them while discarding the impractical ones. Answering questions and deciding on approaches such as "tabbed" or "single scroll" was decided here. A conference room turned into a "War Room" served as the location.

STEP TWO

Information Architecture

It is important to the designers, managers and stakeholders to understand how and where UI elements, graphics, data and information is going to be presented and organized. The purpose of this phase is to figure out what will go where and how the layout will be structured.

Challenges included market priorities such as ad placement, interactive radar and branding, user needs such as forecast information and current conditions. Navigation, labelling all the while focusing on digital and mobile was key here.

STEP THREE

Interaction Design

IxD is concerned with how users engage with the UI, and how that UI will respond so that users knows how to accomplish their goals. This project especially included simple to complex interactions.

I made it a priority to not only present the ideas through annotated wireframes and sitemaps but also prototype the experience by including these documents at resolution into a device. This helps the user/stakeholder understand much easier. Users don’t read interfaces. They interact with them.

I have to say it simply looks beautiful. Great job on design guys.

Pranav Kamkhalia

Vice President Product Development
NBC Owned Television Stations

STEP FOUR

Visual Design and Prototypes

After countless iterations of wireframes and prototypes it was time to bring the design to life through visual mockups. The goal is create a visual representation of what the final product will look like. Some ideas in the UX phase just did not work out in the visual phase and had to go back to the drawing board. Keeping true to the wireframes and defined interactions was important.

Many NBC stakeholders were able to be give more valuable feedback once they saw how the design was actually going to look.

Experimenting with changing locations and a natural radar open.
Iteration that moves the branding into the top card.
NEW FOR 2019

Modular Design System

Moving away from the traditional idea of "pages" and thinking about how content areas can form the experience will allow for a more customized experience for users in specific regions.

Working with our colleagues in editorial and technology, this card based design system will bring a new level of flexibility and monitizaton opportunities.

Love the new design!
Very elegant and easy to navigate.

You nailed the above-the-fold info...breaking news, alerts, school closings, current conditions, map, ad...Below-the-fold info is also valuable. I like the Met branding and trending section. Great Stuff!

Ric Harris

President & General Manager
NBC Connecticut

MARKETING

TV SPOTS AND BANNERS

No better way to get the word about features and updates than promoting the product on the world's most famous arena and on a national television network!