The Idea

The idea was to redesign the most used german weather forecast website wetter.com and its features. The concept deals with the fast accessibility of information with the help of an intelligent search bar and data-visualizations. But it still supports the option of scrolling down to browse through all weather data.

wetter_com_9

Icons und Typography

An icon family has been specifically developed, which is based on geometric shapes. The icons relate to the round corners of the font Din Pro Rounded.

wetter_com_2

Search bar

When entering the website the focus is on the intelligent search function. The user can type in locations, wetter situations, time spans and other weather terms, which are stored in tags. A ghost in the search bar shows what kind of input options are possible.

wetter_com_3 wetter_com_4

Map

The map forms at any point in the system the background of the interface. Its color scheme depends on the temperature of the selected area. The visible section of the map is interactive and therefore adjustable by the user. Beside the temperature, different modes can additionally be applied. These modes are visualized on the map and the diagram below. An animation of the further weather development is optional e.g. the chronological sequence of a thunderstorm.

wetter_com_6

Forecast

One of the main functions of the current wetter.com page is the weather forecast. We aligned the days on a horizontal "tape". To navigate through the individual forecast (current weather, 1 day-, 3 days- and 16 days-forecast) the user only needs to scroll down. The size and detail degree adapts to the selected forecast. Below the forecast there is a diagram, which behaves analogous to the forecast cards. The line graph represents the temperature curve on which an indicator the current timestamp locates.

wetter_com_7 wetter_com_8

Profile

Since the website is visited frequently, there is an option to customize it. In the menu item "Profile" the user is able to enter his allergies and favorite activities, to get personalized notifications in relation to the weather situation. Those notifications alert the user or give suggestions on how to protect yourself against e.g. a thunderstorm in 2 hours.

wetter_com_5