AccuWeather Now

AccuWeather Now is a 24-hour continuous video program that covers local, national, and international weather.

My Role

I worked as a UX Designer to create ways to discover and interact with the AccuWeather Now module in a mobile application.

Research

To understand the implementation for the AccuWeather Now module I conducted a competitor analysis of seven other services which have video functionality. The seven other companies I picked all have strong ties with live video integration. By gathering all of their successful traits in a side-by-side comparison I could pick out the ones that will aid AccuWeather the most.Through this research I found that there were five beneficial features that could be applied to the AccuWeather application.

Through this research I found that there were five beneficial features that could be applied to the AccuWeather application.

  • Flyout Player
  • Video Wall / Tile Variation
  • Play Banner
  • See More Description
  • Genre / Categories
1 / 3
2 / 3
3 / 3

I created a chart to check for any overlap between the seven companies. I found that there was an overwhelming amount of overlap for the Video wall / Tile variation, See More Description, and the Genre / Categories.

Having Tile variation on a future video wall is a great feature to add (vertical and horizontal thumbnails) though it is outside of my scope for this immediate project. The See More & Genre features are essential and will definitely appear in my explorations.

Explorations

The first design I explored was for a Flyout Player. I decided this was an important feature to add since it allows the user to both view the video and browses weather content on the application. The video player would live in the bottom bar labeled “AccuWeather Now”. It would expand into a live video player that hovered over the screen. The user can pause, mute, minimize, resize, and move the player at their convenience.

The second design I created was a Bottom Drawer Video Wall. To open the AccuWeather Now Video wall the user would swipe up on the “AWN” half circle in the tool bar. The video wall then opens and the user would be greeted with an assortment of different videos.

In the following flow, you can see how a user can switch between different videos by clicking on them directly (screen 1). Or by clicking on a genre to see more videos of that type (screen 3).

Explorations

The UX team had two feedback sessions while I was working on this project. Two big issues were brought to my attention.

  • The flyout player may block the ad on the bottom
  • Where would the AccuWeather Now video go once a user clicks away (Bottom Drawer Video Wall)?

Redesign

To redesign the flyout player I took inspiration from the AccuWeather desktop site with their “Feedback” bar. It has the same interaction since it scrolls with the user as they navigate the site. So, I simply rotated my Flyout Player by 90 degrees. I did this so there was less chance of it blocking the ad on the bottom.

The next piece of feedback was addressed by moving the AccuWeather Now video directly down on the video wall. This was the best space to move the AWN video so that users can find it easily and reopen it when they want to.

Hand-Off

At the time of writing this, this project is still in development with the AccuWeather UX team.

If you'd like what you see feel free to email me. :)