ATMOS

Atmos is a weather app that visually interprets the local weather to give the user a compelling sense of atmosphere.

Role: UX, UI, Illustration, Animation, Prototyping

The Challenge 

The practicality of a weather app is pretty clear cut—to check the forecast. Yet, there are so many weather apps on the market! Even though smart phones come with one pre-installed, people still seek out to download (and at times pay for) something that they find more fun. 

So, for my first product design project, the challenge is to create an easy-to-use mobile weather app that is both visually engaging and delightful to use. This is also an opportunity to exercise my illustration chops and really familiarize myself with design and prototyping tools.

Thematic Explorations

Creating a compelling sense of atmosphere was my main stylistic objective when exploring illustration concepts for Atmos. In addition to that, I also wanted to incorporate elements of playfulness to bump up the delight factor.

After consulting with my mentor, we decided that Concept 2 would be the most amenable for creating an immersive visual experience.

Sketching the UX

Referring to a familiar weather app UX pattern of swiping from one screen to the next for transitioning between locations, I sketched out the content layout of Atmos. The content on each screen is formatted the same. What’s missing are my illustrations and accompanying animations.

Defining the Look & Feel

To properly set myself up for a cohesive user interface and set of illustrations, I developed a mini style guide. 

Color Palette and Typography

Since I’ll be illustrating for different locations and weather conditions, the color palette contains a comprehensive set of hues. The typography and text styles are selected for their straightforwardness to effect legibility at a glance and to not compete for attention with the illustrations.

Weather Icons Explorations

In exploring options of the weather icons, I created several different sets. I played with flat and stroke styles, weight, and color combinations—eventually settling on a set of dark stroke icons.

Illustrations

Combining the project challenge of creating a visually engaging experience with the selected illustration concept, I decided that each screen should contain the following three components:

• Visual expression of the local weather condition

• Location landscape accompanied with recognizable landmarks (when feasible)

• Animated components for added interest (clouds, water, rain, etc)

Almost There, But Not Quite

My first pass illustrations left a few things wanting.

• The landscape is a tad flat, which takes away from the immersive atmospheric quality that I’m trying to achieve.

• I could obtain better color coordination for a more unified composition.

• A colored base in the weekly forecast panel makes the weekly forecast information hard to scan.

Final Illustrations

Below are the final illustrations for five U.S. locations, which satisfies the compelling, dramatic sense of atmosphere that I was going for.

Animating the Prototype

The primary user interaction is a lateral swiping between the screens. Because this is such a simple interaction, I made the transitions between locations more playful by employing a parallax effect when one landscape disappears and another appears. When the user is moving between screens, the sun and clouds track laterally with the swiping motion to provide visual feedback.

For added interest within an individual screen, I gave life to various weather and accent components (e.g. clouds, water, rain, boats, smoke, kites) by turning them into looping animations.