Yahoo! Weather
Role Lead Product Designer
The Yahoo! Weather with Flickr app on an Android phone displays hi-res images of the city the user are viewing the weather for. When on the app, it shows the current conditions and a brief forecast in portrait mode — and when you tilt your phone to landscape you get more details such as the sunrise, sunset, barometric pressure, humidity level and wind speed. You can also add additional locations and switch between locations by swiping left or right and sync your Yahoo! Weather locations from your mobile to your desktop and vice versa. The app also comes with a weather widget that can be set on the phone's home screen.
As a result with this launch, it is with a million + downloads and 4.5 stars rating and available in 35 languages on the Google Play store. Prior to the redesign, the app was at a 2.5 stars rating.
Impact to Yahoo!
The impact to Yahoo! was a lasting one. After the success of the newly designed weather app and launched on Google Play, the Yahoo! Weather group began to get more resources and funding from the company, on which at first was non-existent. A year and a half later, the Yahoo! Weather app for iOS was developed (referencing the Yahoo! Weather Android version design framework), launched and went on to win the Apple Design Awards 2013.
Responsibilities
I am the only designer working on this project, working closely with my dev team and a product manager. My responsibilities includes product design ideation, creating user flows, iconography design, visual design, art assets for the app, usability testing, creating the default weather illustrations, prep and create promotional materials for Google Play, web publishers and for Yahoo!’s major product launch event…and so on. For the most part, I have leaned on the Android Design guidelines as reference to build this app.
‘We are in general a small, scrappy, lean and focused team of creators crafting the app from our cubicles to get it ready for launch in 2.5 months time. It was a lot of fun!
Product
The screens below are showing a splash, a local weather location and full image view screens.
Search, Add, Sync Location & more
Users are allowed to add up to 10 locations. Search the world and add the desired location on your Yahoo! Weather mobile application. Sign-in using your Yahoo! ID or create a Yahoo! account to sync your weather location to your Yahoo! weather page on the web.
Localization
Yahoo! Weather is available in 35 languages. The app is designed to support internationalization. It is a way to mass market and to extend its potential.
“I’m a 13 year old and I think this app is fantastic. Instead of looking at the news for the weather. I can look on here. Now i’ll know the apporpiate clothes to wear to school. :D” 5 Star rating.” – A user review from Cairo, Egypt
Details
In the case below, the contrast of the panels are tested and iteratively adjusted to ensure that the component performs well with all image type and lighting conditions. We scrutinized every detail on the app to ensure we meet a high level of quality and performance.
The details are not the details. They make the design. — Eames Office
collect, CHOose, create and build
How did we get to finalizing which features to include on the launch? A good question. When we started, we did a quick rendering of ideas and listed capabilities for the weather app on paper. There were cool, interesting and little silly ideas here and there. For example, a screen showing a collection of locations with weather data, and some animation on one screen. How cool is that!
After a lot of fun dreaming up what an app can be, we went through the idea list again and decided to go with features and capabilities of the app that can tell a story to our users. For our first minimal viable product, we started small and simple, focusing on features that were key to providing value for our users. In addition, we needed to launch the app very soon and do not have much time to develop a technically complex app.
The iconography I designed below showcased the feature set for the app. (These iconography was also included on the Yahoo! Weather iOS app.)
Default Weather art
In any case, when there is no location art or that a location art is in progress of loading, a default art will load in its place. I recreated the weather art using art available from the weather library to match the weather conditions.
Product Video
A Yahoo! Weather fan created a video on Youtube.
