Weather Channel App Redesign

For my User Interface Design class (CS 3750), we were instructed to find a problematic user interface and create redesigns to address those user interface problems. I chose the Weather Channel app, because it presented some problems with discoverability, signifiers, and information overload. Below are my redesigns, mocked up using the iOS app Inspr.

launch.PNG

Launch Page

Improved first launch experience. The dots represent a feedback animation feature, letting the user know that the app is loading. The previous design did not provide any feedback for the user while launching.

hourly.PNG

Hourly Weather

Improved signifiers. The user clearly knows which forecasting section they are currently in, indicated at the top by "Hourly" or at the bottom of the menu, where the selecte

today.PNG

Home Page - Current Weather

Quick navigation. There is now a menu at the bottom of the screen with different forecasting options; the previous design did not show allow the user to quickly navigate to any of the other options.

daily.PNG

Daily Weather

Improved signifiers. The left and right arrows at the top module suggest that the forecasts are displayed in a carousel module, affording horizontal scrolling clearly marked by the arrows. The user can also see more information about two daily forecasts in the lower module, beginning with the selected day (marked by an opaque-white highlight in the top module).

dropdown.PNG

Customizable Locations

Quick navigation. The user can quickly navigate between their saved cities, or add a new one by clicking the search icon. They can also see the current temperature in each of their saved cities without clicking on them.

sidebar.PNG

Features Menu

Improved navigation. The hamburger icon lets the user know that there are more features and settings in the app. This secondary menu shows various features separated by relevance.