WEATHER APPS

CASE STUDY


Dark mode concept, currently being tested
PLANNING

Overview and Timeline

In 2016 prior to the start of this project, the NBC weather apps were designed, developed and maintained by an agency. Bringing these apps in-house allowed us the flexibility to define the experience without constraint and grow our business.

I led the in-house design efforts which included all phases of design from the initial launch to feature iterations and improvements.

Role Design Lead
Timeframe 2016 - current
DISCOVERY

Initial Research and Analysis

Combining qualitiative and quantitative data, direct user feedback and content consumption patterns sets the context for the redesign. We want to make sure we are solving the right problems.

DESIGN PROCESS

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.

DESIGN PROCESS

Information Architecture

It is important 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.

DESIGN PROCESS

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.

DESGIN PROCESS

Visual Design and Prototypes

Once the first phase of functionality ws nearing completion it was time to bring the design to life through visual mockups. Keeping true to the wireframes and defined interactions was important although at times adjustments have to be made.

A darker shade of blue which is derived from the broadcast color palette was used as a primary and a cyan as a actionable highlight. Red is reserved for alerts or breaking weather events. The primary font is custom built in house called Arthouse which is used for larger type and headers. Roboto is used for body copy and data.

DESIGN ITERATIONS

An Easier way to
Change Locations

Feedback from our users indicated they had trouble switching locations once they added them. The original design using arrows had low user engagement. A card based gesture approach helped solve the issue.

Success Metric: Initial testing shows virtually all users changing locations and elimination of this user ask.

Improving the
Interactive Radar

The radar presented some challenges. Users were not clear as to why they couldn't exit the same way they entered. There was also confusion around the layers icon. We found a solution that not only fixed the usability issues but also presented opportunities to better surface radar layers which were previously hidden in a menu.

Success Metric: Increase in radar opens as well as 43% engagement increase on the first 3 layers

MODULAR DESIGN SYSTEM

COMPONENT LIBRARY

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 atomic design influenced design system will bring a new level of flexibility and monitizaton opportunities.

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

Pranav Kamkhalia

Vice President Product Development
NBC Owned Television Stations

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

Ric Harris

President & General Manager
NBC Connecticut

RESULTS

Metrics have steadily improved

Page Views, Unique Views and visits have all increased over a 3 year span.

APP RATINGS

Through steady feature iteration, listening to our users and a regular cadence of imporovements the app has improved its rating from an average of 1.6 to between 4.5 - 4.8.

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!