Yahoo weather app
In 2013, apps didn't really move yet. I led design on Yahoo Weather, which covered the screens, the icon set, the design system, and the animation. Motion was the part I pushed hardest. Weather is the same numbers every day and I envision giving people more delight by adding motion to enhance the data.
Role
Design lead
Keywords
Motion, iconography, design systems
Date
2013
Early sketch on the weather app UI and motion
This is one of the first explorations on motion in the app. Fun fact: The windmill will spin faster when you blow into the microphone
I prepared very light weight graphics and worked with engineering to program the movement of rain, snow, heat, fog to make sure it used minimal space without slowing down the app loading time. This effect later on adopted in iOS weather app
Motion on iPad has even more freedom as the screen is bigger, while strike a balance of not over powering the UI.
An exploration on iPad where there's a view of all weather around the globe at a glance.
This idea came from a hack day where I proposed having live cam as the next version other than still image. Seeing live video pairs well with the weather as you can actually see the weather condition more than the data can show.
Each icon set is specially aligned differently. E.g. When they pair with text, the strongest common line aligns with the baseline. When it's displaced vertically, I reset them and have them centered vertically and horizontally centered aligned.
Slightly different on color choice for iOS and Android based on screen color rendering. Android tends to have a sharper, more contrasy color so I compensate the difference by choosing a duller color.
Minimum amount of spacing and font size is used in the app. Me and the engineering team refine this a lot in the app and we are proud to claim the app is pixel perfect.
Apple design award along with Crunchie award, International Design Excellence Awards (IDEA), Webby Award.
An app that people loved.
Next project: Design leadership
Design work and portfolio site made by Cat Tai