Yahoo! weather app
Hired to redesign the existing Yahoo! Weather Android app, I worked with a small team (one Project Manager and five engineers). I drove research, discovery, UX and final visual design while keeping in mind my goal of providing user delight. I led the team through key insights while gathering requirements and understanding user’s goals.
Requirements Phase
In the beginning of the project, the requirements were to redesign the existing Android app and incorporate a new, very detailed weather data. The business goal was to create a robust, weather app. I also sought out Yahoo! Style Guidelines to understand the brand.
Competitive and Current App Review
A major discovery for the app’s design came about when I asked the team to install analytics on the current Android version. I often use analytics to explore how people are using the app. I am looking for time spent, particular feature engagement, screens most viewed, drop off points, uninstalls and other insights.
Key contribution – Analytics led to a key understanding that most active users opened the app 2-3 times daily for around 8-10 seconds.
To expand our understanding of weather apps, I suggested we do a competitive review. I gathered screen captures of popular weather apps and shared them with the team.
Ideation
Contribution – Informed and guided the team’s adoption of fundamental design principles around simplicity, ease of understanding and low cognitive load
Sketching
Tasked with creating a robust weather app with in-depth weather data, I set about designing easy ways to absorb complex information. Trying to reduce cognitive load, I began sketching visually-based data and a UI that could support both the business goal of a data-rich app, while keeping in mind the average user opened the app for 8-10 seconds. I presented multiple ideas to the team, some that were traditional tab-based designs, with each tab having its own category of weather info. However, I also explored other designs. The “infinite scroll” pattern was just emerging on the web and had not been done in mobile. Since the “flick” gesture in mobile was so easy, I thought it could be a simple way to provide the most important weather info in view and more detailed info below the fold, accessible with a flick.
Contribution – Provided a range of data visualizations and UI solutions ranging from traditional to more experimental.
Prototyping
Using Proto.io I took quick photographs of my wireframes and quickly created low fidelity prototypes for the team to play with on device. This was a critical step in getting stakeholder buy in on continuing the infinite scroll UI design. The prototypes helped our people testing the app and the team get a feel for navigating via tab bar verses the flick of an infinite scroll. In addition, there was a change in the original project requirements. The new directive was to release an IOS version of the app before redesigning the Android version. I reworked wireframes below that are Android UI into IOS UI.
Contribution – Quick prototypes with Proto.io were critical in getting stakeholders to experience the innovative “infinite scroll” UI
Higher Fidelity Prototypes
Moving forward with the infinite scroll UI and minimal controls, I began to develop visuals in the prototypes. Working closely with the engineers, we developed a blur effect that would maintain the color from the Flickr photo.
Contribution – Keeping in mind beautiful Flickr photography and user delight, I sought ways to preserve the photo’s impact throughout the experience.
Discovery Through
User Research
We conducted a considerable amount of internal testing, however, I felt it was important to test with non-technical users with different levels of technical ability and from different areas of the country. Using a third party testing company, I wrote screeners and questions built around our beta. I worked closely with the remote User Researchers to administer tests and share out user verbatims and video clips with the team.
Contribution – Led remote user testing of beta and shared user verbatims and recorded video sessions with the team.
Visual Design
I continued to refine the app’s typography and worked with another visual designer who provided the animations on wind speed, and sunrise and sunset. I also mocked up internationalization examples with longest word scenarios. I also worked with engineers on the finishing touches of blurring and transparency as weather data scrolled beneath location and time showing in a transparent title bar. Together, the app is a great credit to the team! I was very pleased at the final design refinements. My remaining time was next dedicated to designing the Android version, producing some marketing assets and more slight refinements to the IOS app.
Team contributions – Beautiful refinements and attention paid to micro-interactions make this app what it is today.
Icon Design
I hoped to create a set that looked modern, but also playful. My sample designs were approved, so I rendered the other 44 weather conditions, including icons for chance of rain, sunset, sun rise and moon phases.
Contribution – Designed the weather condition icon set
iPad Design
It was hoped to release a custom designed app for the iPad. I did some sketching, and visual mockups.
Flow Diagrams
Shown is app flow including location maintenance, sign in and sample redlines.
Contribution – Final documentation of app flow, sign up funnel, redlines and final assets for IOS and Android to be released in 35 languages.
Launch, Usage and Retention and Awards
The app was released in 35 languages and had over one million downloads within its first week in the app store. It also won an Apple Design Award in June 2013, a best visual aesthetic Webby Award and an honorable mention Tech Crunch Crunchie.
Yahoo! Weather stands apart with its simple, uncluttered, and beautiful visual design. - Jony Ive, Apple
