主播大秀

Hi, I'm Mala Vadhia, a Senior User Experience Designer in 主播大秀 Future Media.

The 主播大秀 Weather app was (user experience led by my colleague Stephen Robertson). Since then we've heard from many users about the need for landscape rotation across all Android devices and the desire for a tablet app on iOS (as product manager James Metcalfe).

We currently support 438 different screen resolutions on over 1000 Android devices. The key challenge here was to produce a design that scales, rather than bespoke solutions for both iPhone and iPad.

As well as scaling elements of the design we introduce features based on the screen size of the device. For example, for screen heights as small as 320 dips (density-independent pixels) we don't have the height to reveal the five day forecast information within the navigation tabs (or the hourly temperature curve). We reintroduce the five day forecast within the navigation for screen heights 360 dips and above, and the temperature curve for screen heights 380 dips and above. Similarly, for screens that are narrow in landscape orientation, such as devices 433 dips wide, we don鈥檛 show the column with environmental information, sunrise and sunset.

We aimed to keep a tight relationship between the elements that make up the five day forecast, the daily overview on the home screen and the temperature curve on the hourly forecast. The vertical space in between these areas increases as the app scales, allowing the designs to breathe.

By focusing on one design that scales we have been able to build on the existing Android app more quickly, while keeping a consistent user experience across all devices.

The major difference in the iOS app is that we have exposed the hourly forecast data in both portrait and landscape orientation. The stats confirmed that this is the most commonly used feature by our users.

With extra horizontal space on larger iOS devices we had the room to expose the temperature curve which visualises how the weather will develop over a day. For example, if you are likely to get caught out by a rain shower or if the day will become warmer.

We made a couple of smaller enhancements too. The sunrise/sunset time is in a more prominent position following user feedback, and we鈥檝e strengthened the relationship between the refresh icon and the location by bringing them closer together.

Both apps remain optimised for their respective platforms and use bold typography to create strong hierarchies and highlight key information.

On Android, we're using the font Roboto - the bold weight is a little condensed compared with Helvetica bold so it works well for small screens and long location names.

With this update we've taken the opportunity to freshen up the look and feel of the app. We improved the ambient transitions for daytime and added two new ambiances for light rain and heavy rain showers. We also introduced nighttime ambiences for all weather types.

We鈥檙e now using simple, semi-transparent white blocks on top of the ambiences which let the weather show through (for example behind the five day forecast). We stripped back the use of gradients, creating what we feel is a cleaner design.

I'm always keen to hear your feedback so please leave a comment below.

Mala Vadhia is a Senior User Experience Designer, 主播大秀 Future Media