Company
IBM
Year

Feb. 2018 – Sep. 2018

Industry
  • Meteorology
Audience
  • Morning Planners
  • Weekend Warriors

OVERVIEW

Snapshot is an ambitious initiative born from the desire to move the Weather app into the future. With feedback from users, our team rebuilt the app layout and flow from the ground up with our users’ needs at the center. To accomplish this, a special taskforce was formed to dedicate time to research, ideation, testing, and implementation.

Background       Research Process       Design Process       Design Evaluation       Pivot       Final Design       Results       Moving Forward

Background

The TWC mobile app was experiencing a declining usage trend while apps native to the Apple and Android platforms are growing. So TWC conducted research to identify the causes of these shifts and develop a plan to reverse the trends through product and marketing enhancements.

Survey

To find opportunities and gaps in service, we conducted research through surveys and interviews. The most common difficulty our users had is discovering what they were looking for. This was caused by a combination of scroll-induced fatigue and confusing architecture. Additionally, advertising lacked context and were placed in a way that users saw as obstructive to their experience.

What They Were Saying

“I live in an area with very volatile weather […] I have to scroll through miles of unrelated things just to get to what I’m looking for.”

Research Process

The Weather Channel Today

I broke down the iOS weather app into pieces. Right now, our app has a very long scroll where almost all of the data is hosted. As you can see, each component carries similar weight and there is a lack of structural and visual hierarchy. 

Current Flow

I believe that information architecture is the backbone of a great product. That’s why I created this sitemap to evaluate our current navigation. As you can see, there are 12 cards on the home screen alone which limits users’ accessibility to quick jump into content and discover what they’re looking for.

Task Analysis

In this scenario, the user would have to scroll all the way to the bottom of the page to even discover that TWC can answer their question. Once they do discover where to find what they’re looking for, there is not a quicker way to navigate to it. Normally there would be a learning curve to get the most out of a product, but the efficiency of the TWC app plateaus quickly.

Navigation

To streamline navigation, we looked at taking advantage of the full range of gestures users are familiar with making. This would make the app more intuitive, engaging and interactive. It also allows for more discoverability and quicker access. For instance, rather than scrolling until the user finds the radar, they know that they can just swipe once to jump right into it.

Architecture

I proposed this architecture as a solution. Based on added gesture options, we can create a flow where users can jump straight to the content they’re looking for and more easily discover other pieces. This cuts down on the scrolling necessary to view frequently referenced data.

Competitive Analysis

The TWC mobile app is experiencing a declining usage trend while apps native to the Apple and Android platforms are growing. So TWC conducted research to identify the causes of these shifts and develop a plan to reverse the trends through product and marketing enhancements.

Persona

Based on the research this far, we were able to craft our persona, Samara. Samara is a young professional that has a daughter that she wants to make sure is safe and comfortable. Samara looks to the weather to know the best time to run, how to dress her daughter, and how her commute is going to be affected.

Samara

  • Commuter, runner, teacher  
  • Apple weather widget user
  • <1 month at-risk TWC user
  • Nashville, TN, 28 years old

Checks weather in the AM to decide things like:

  • When to run
  • How to dress her child
  • What to expect for 30-min driving commute to/from work

Uncertainties

  • Will forecast change between AM check and afternoon commute?
  • What does “% chance” of rain really mean?
  • A Facebook friend mentioned a cold spell was coming, but she can’t remember what day?

Design Process

Brainstorming

With Samara as our focus we split into teams to explore how our ideas could solve her daily needs. We understood that most of the traffic to The Weather Channel app takes place each morning between 6 AM and 10 AM. This makes sense as users rely on weather forecasts early on to prepare for the day ahead of them. Because of this, we held that first morning impression as the key to serving our users.

Through affinity mapping and extensive collaborative meetings, we began to flesh out two general themes for our new design.

I took charge of the Beautiful Utility exploration and began sketching out wireframes.

Sketches

With Samara as our focus we split into teams to explore how our ideas could solve her daily needs. I took charge of the Beautiful Utility exploration and began sketching out wireframes.

Timeline

The first concept I laid out was a solution based around a timeline. In this model, rather than displaying the conditions for every single hour regardless of relevance, I pulled out the key moments of the day. This makes scrolling through the weather effects of the day more digestible and allows for us to plug in insights based on those conditions. For example, under the title for rain beginning, there is text recommending clothes to wear and items to bring. Around dinner time on a rainy day, it can feature food delivery recommendations that are local and more contextual.

The second panel shows a condensed version of the timeline that breaks the day into phases.

After meeting back up with the team and critiquing each other’s progress, a few key points arose. While interesting, the timeline layout still resulted in a scroll based format and led to data being cluttered in order to display the range of contextual content and alerts we desired. We all saw value in exploring the idea of condensed phases though and this led to the exploration of the next concept.

  • Emphasizes changes in the day
  • Displays start and stop times for WX
  • Contextual recommendations for action
  • Empowers the user with confidence
  • Limited gestural interaction
  • Still had a long scroll
  • Still felt cluttered

Day Phases

Next, I built a flow based on the concept of day phases. Even more simply than pulling out hours, I wanted to break it down into phases of the day highlighting the evening before, morning, midday, and evening. This way would turn weather into more of a story so that users could understand how weather conditions affect each other. An example would be if it rained overnight, then users could understand how that caused a clear but muggy morning with slick road conditions. These cards would bring a window of color to the layout as well as something that is easily dynamic throughout the day.

The drawback to this layout is it takes up considerable real estate on the main screen and forces ads into a smaller box that would hinder the business partnership with our advertisers.

  • Connecting times of day in our experience will improve users’ understanding of how weather events influence their days in relative terms.
  • Scannable
  • Engaging
  • Dynamic graphic that changes day-to-day
  • Limited visualization options

Morning Digest

These concepts led me to develop the digest feature. Rather than reduce the visual real estate, I wanted to give the dynamic content its own dedicated space. Since we saw that users were searching for content in the morning, this feature would be a one stop shop for all major content needed to start the day. This feature is also something that users are becoming more familiar with as story features emerge. The cards could tell the story of the day with calls to action to share news and toggle temporary alerts for developing conditions.

  • Targets highest activity point
  • Modern gestural interactions
  • Trending media consumption format
  • Dynamic based on user and WX
  • Potential to form daily habits

Stories

Based on this, an expansion and fuller visualization of the digest feature. Content is more in-depth and features pagination to track story progress.

  • Dynamic content
  • Alluring interface
  • Social engagement
  • Ad spotlight

Prototype

Stories improve understanding by presenting data in a new way that’s quicker and easier to navigate through and comprehend than current forecasts. The stories format encourages tapping and swiping, capitalizing on native gestures enabling users to take action on/in their forecast.

  • Dynamic content
  • Alluring interface
  • Social engagement
  • Ad spotlight

Design Evaluation

User Testing

With an external agency, I observed 1:1 in-depth interviews in Philadelphia and Atlanta  through 60 minute sessions. Each tested user was presented two clickable prototypes and invited to open their mind to us.

What They Said

“I like this! This is my whole reason for taking the time out to watch the news in the morning. I probably would not turn on the TV in the morning if I had this.”

Pivot

Snapshot

From our interviews, we discovered that users were positive of both the Beautiful Utility concept and the Iconic Expertise concept. It was here that we saw an opportunity to combine the designs with Iconic Expertise serving as the master layout and the Beautiful Utility’s daily digest (now called Snapshot) serving as a home feature. From here, I led the design of the Snapshot cards and info-vis.

Our team dove deep into the story concept and created a series of categories and definitions for each card. They would be separated into current weather, future weather, local news, severe weather, ad space, and delightful. Within this, there were a range of ways to display weather conditions and a range of ways to say it.

User Flow

Wireframes

Style Exploration

Here’s some examples of explorations in illustrative backgrounds versus photographic ones. In the illustrative ones, we’re able to build out micro-animations for user delight.

For a wide range of possible weather effects, our team assigned a color gradients to each condition for quick recognition of both the effect type and the change. This color scheme would be reused on the home screen experience as well for a more cohesive presentation. I created all the icons that would be overlaid and used for each effect and gradient.

Once the Beautiful Utility and Iconic Expert concepts were combined, we conducted new user tests in Chicago, Philadelphia, Atlanta, and Tokyo.

Final Design

With an external agency, I observed 1:1 in-depth interviews in Philadelphia and Atlanta  through 60 minute sessions. Each tested user was presented two clickable prototypes and invited to open their mind to us.

Snapshot

  • Onboarding card added for first-time users, clarifying how to advance
  • Experience automatically progresses after period of time to alleviate control and ad confusion
  • Micro-animations provide extra delight that get users excited about the next screen
  • Ending card that allows users to jump back to previous cards users were interested in
  • Users unsure of when they’d watch a
    video in a digest
  • Some users still close the experience when trying to avoid the ad card

Results

The Daybreak update is still relatively new and we are monitoring user satisfaction and measuring success through social listening, App Store and Google Play ratings, and feature click-through rates. As market feedback is coming in, we are adding features and fine-tuning our design. Up to this point, the launch has been well received for its new, modern design and easy navigation. However, there have arisen concerns regarding ad placements on the home screen and general discomfort from conservative users about a new look.

What They’re Saying

“I love the new user-friendly update because I did not know how to find what I needed before. It used to be difficult to navigate to daily or hourly weather predictions, but now they’re conveniently located on the bottom bar. And I ABSOLUTELY LOVE how quickly I can get to the radar. Overall the update is a HUGE improvement that inclined me to finally leave a review after having the app for over two years. I 11/10 recommend.”

“I love this app as it is very informative about weather forecasts, weather stories both video and print, very easy to navigate and the radar is now SPOT ON PERFECT!!! I also love alerts pinpointing a lightning strike and the precise distance physical location and alerts telling me precisely when it is expected to start to rain.”

“Great app. Simple to use and easy to navigate through the site to find whatever you need. Information provided is usually accurate and always my go to app. for daily and extended weather forecasts. I even find myself watching their videos for way too long, next thing I know an hour has gone by, LOL! I definitely recommend this weather app. over all the others out there.”

“Most accurate forecast I've found. And They're the ONLY to provide a projected radar i believe 4 hours. It's much broader and not as accurate but still nice. Also you can track lighting strikes near you in real time. NOAA data, lots of layers for weather behavior. By the far the best. For realtime and 3 day accuracy NO ONE provides a better app.”

“I've loved this app for many years, I still do. Its easy to use, its helpful, efficient, and reliable. It keeps you 'in the know' about everything. It refreshes by the second so you can stay in check with all weather updates. You can follow along with the radars, you can watch news video clips, see the hourly and daily weather, as well as updates allergy seasons. It sends notifications about storm warnings and freezing temperatures. Not to mention it has beautiful backgrounds when you start the app. I love how I can check the weather while seeing breathe taking photos of scenery such as snowy mountain tops and the stars. Overall I highly recommend this app. With that being said, get your eyes outta the comments and download this app already!”

Moving Forward

While the main app is being accepted, there is still much work to do to introduce the Snapshot feature to our users. We are looking at ways to highlight the icon to initiate the feature as well as build a more robust library of possible cards. Specifically, I am working on adding lunar phase, holiday, and severe weather condition cards.

As we build out this feature, we are hoping to build a habit that generates Daily Active Users and drives more traffic to our advertising partners.

Severe Weather

Moon Phases

Home Banner