PERFECT WEATHER

ROLES

UI/UX Designer

PLATFORM

iOS (iPhone)

DATE

2012-2015

A BEAUTIFULLY BALANCED VIEW OF THE WEATHER

 

Some weather apps are overloaded with information. Others are designed to be pretty rather than useful. Perfect Weather strikes the right balance. It gives you a quick, clear overview of the conditions you care most about.

[unex_ce_button id="column_content_llagyycqy" button_text_color="#ffb734" button_font="custom_one" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="transparent" button_padding="15px 60px 15px 60px" button_border_width="3px" button_border_color="#ffb734" button_border_radius="100px" button_text_hover_color="#a47c35" button_text_spacing_hover="2px" button_bg_hover_color="transparent" button_border_hover_color="#a47c35" button_link="https://itunes.apple.com/us/app/perfect-weather-noaa-radar/id695709241?mt=8" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]DOWNLOAD ON THE APP STORE[/ce_button]

Only available in the US & Canada at this time

The app project started in the fall of 2012, almost a year before the official release. It went through several iterations and gained new features, but also faced some unexpected challenges along the way.

Apple introduced iOS 7 in June 2013 at WWDC, its annual development conference in San Francisco. At that time, Perfect Weather design and development were running full steam and the app was very close to shipping. The deep UI changes Apple made in iOS 7 forced us to rethink the UI design so that it would be fully iOS 7 compliant and fit in aesthetically when the new OS was released in September 2013.

Early stage UI mockups (iOS 6) - Mid 2012

Early stage weather icon set - Mid 2013

Adopting Apple’s new UI aesthetic also meant that we had a chance to reinforce the app’s personality through user experience, including designing delightful transitions and animations. Responsiveness helps to deepen the link between user and app.
Prototyping in After Effects allowed me to fine tune some of those animations, such as pull-to-refresh, the pull tab arrow, and temperature chart scrubbing.

Prototyping Pull to Refresh animation

Pull to Refresh animation (early stage)

Data Chart animation (early stage)

In order to distinguish the app from the plethora of weather apps – often delivering gimmicks rather than useful and accurate information – we couldn’t compromise on designing a meaningful and visually stunning interface.

Months of sketches and iterations resulted in these carefully crafted weather icons.

Once the core features and most of the visual design has been taken care of, it’s time to focus on polishing small details and prepping marketing assets.

ANIMATED WEATHER MAP

Perfect Weather bundles a very cool weather map that animates recent radar or cloud data. At some point the team came up with the idea of sharing that map as an animated GIF, which is especially useful during severe weather outbreaks and serves as a form of word-of-mouth marketing for the app.

WHAT'S NEXT?

Along with some subtle improvements and a few design tweaks, we worked hard on our next update to bring iPhone 6/6+ support and a long awaited Notification Center widget.

Successfully launching a new app, as with any other product, requires a broad set of knowledge and skills. We couldn’t ship Perfect Weather without a proper promotional video, but no one on the team had professional video production experience. So, David worked on the storyboard and hired Readdle marketing team to produce our launch video.
Below is a preview of how David envisioned things on Basecamp and the final result.

STORYBOARD AND SONG
Posted by David Barnard on Aug 5, 2013

• Woman wakes up, sun is shining in the window, she's happy
• Man wakes up in a panic, scrambles to get out the door
• Woman walks to work, it's sunny and nice out
• Man is sitting in a drab cubicle and looks at a list titled "Date Night Ideas", opens Perfect Weather and sees rain. • Crosses off "Picnic"
• Woman shown working at a flower shop, everything is beautiful
• Man checks the weather in a couple nearby cities, crosses off "Road Trip"
• Woman sits down in a sunny spot for a lunch break
• Man goes back to "Your Location" and sees a severe weather alert. Looks at the alert then scrubs through the rain chart to see percentage chance of rain over time. Circles "Movie Night"
• Just as the song ends (0:49), cut to the couple sitting down in a living room with hot chocolates or something else cozy, and the sound of rain on a tin roof starts just as the last note is fading. Closeup of her hand grabbing his with a female voice over whispering "This is PERFECT". Somewhere in there cut to a title shot with "Perfect Weather — Available in the App Store" showing the icon or other art we supply.

Perfect Weather uses state-of-the-art weather technologies provided by Weather Decision Technologies. Their proprietary weather algorithms deliver tremendous accuracy straight to our users.

Weather Decision Technologies, Inc. is the industry leader, providing organizations with weather decision support on a global scale. WDT offers specific expertise with Big Data as it applies to hazardous weather detection and prediction, forecast modeling, decision analytics, GIS, mobile apps and interactive mapping. WDT employs the world-renowned WeatherOps forecast team, staffed by exprrts who provide global asset projection and commodities trading decision support. - www.wdtinc.com

Perfect Weather is an ongoing collaboration between Contrast's David Barnard, developer Elfred Pagan and myself. We used Basecamp to build it over several months from end of 2012 to Fall 2013.
Take a look at some of these rather impressive Basecamp numbers: 

DISCUSSION THREADS

644

ATTACHED FILES

1262

COMPLETED TO-DOS

509

Perfect Weather has been critically acclaimed by the international press and featured on the App Store multiple times. It also won a 2014 Best App Ever Award in the Weather category, and had an Honorable Mention in the Best Visual Design category alongside other world-class apps.

[unex_ce_button id="content_7q6fu2zzc,column_content_h8hda0azr" button_text_color="#ffb734" button_font="custom_one" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="transparent" button_padding="15px 60px 15px 60px" button_border_width="3px" button_border_color="#ffb734" button_border_radius="100px" button_text_hover_color="#a47c35" button_text_spacing_hover="2px" button_bg_hover_color="transparent" button_border_hover_color="#a47c35" button_link="mailto:contact@julienmartin.me" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]CONTACT ME[/ce_button]
[unex_ce_button id="content_7q6fu2zzc,column_content_gdi3ft9r7" button_text_color="#ffb734" button_font="custom_one" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="transparent" button_padding="15px 73px 15px 73px" button_border_width="3px" button_border_color="#ffb734" button_border_radius="100px" button_text_hover_color="#a47c35" button_text_spacing_hover="2px" button_bg_hover_color="transparent" button_border_hover_color="#a47c35" button_link="http://www.julienmartin.me/about" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]ABOUT ME[/ce_button]

© 2016 • Julien Martin