Mobile Weather Experience for News Apps on iOS/Android
One of my earliest end-to-end projects at Disney/ABC was updating the weather experience in our local station’s news apps. The existing experience lacked flexibility and had never been tested by real users. We fixed both of those issues, implementing a detailed, but consumable, weather experience that worked on all devices and presented data ordered by our users interests.
ABC Owned Local News Stations, employer from 2015- current
The weather section in the existing news apps was static, having only been designed for the segment of users on iPhone 4s. The ecosystem had grown significantly and now presented users on a larger variety of screen size. It was also graphically heavy and stakeholders felt that it was outdated.
- Elevate the information our users valued most
- Modernize the weather section and embolden the station’s brand
- Make more data available without complicating the experience
We used this opportunity to put our existing app through user testing and find out what data user’s valued most. There was also interest in exploiting more of the API and giving more detailed weather insights, but I had to know where those ranked in user’s minds in order to create the most valuable layout and interactions.
After testing and collecting the station’s stakeholder’s goals, I reordered the tabs, having learned that, in most contexts, users prioritized the ten day forecast and relied on the detail in the text description. I then placed the most granular data in the last tab and in drawers relating to specific days certain users might be interested in.
Following the tabular data, I placed the video forecast(s) and access to the meteorologist’s graphics– which are preferred by a small, but active, user segment. The remaining sections were ordered by station interests.
The final design shipped with only high-level analytics available, but the weather section maintained its position as the most visited section of our app, and with only positive reviews.
Tools: Sketch, Adobe Photoshop, Principle