Oculus Weather​

Your personal sky
​
Independent Project | Fall 2020 
JavaScript, React, D3

​Full Demo
(for best mobile performance, open in new browser)
In a sea of cluttered weather applications, Oculus Weather delivers you the information you need in a dynamic and minimalist package. Inspired by the architectural oculus, an opening in the wall or sky, this weather visualizer brings outside conditions into your virtual space.

Concept

Since recorded history, the sky has been a constant source of fascination for all people everywhere. With its ever-changing conditions of light and color, the sky has a spiritual way of connecting humans to nature and the wider cosmos. The weather represents more than functional information, telling us how to dress and when to go outside; it is ultimately a thing of beauty, and nature itself. 
(Left) ​Benesse House (1992) by Tadao Ando
(Below) Skyspace by James Turrell, and
​The Weather Project by Olafur Eliasson.

Existing Conditions

Android Weather
iOS Weather


​Banana Icons & Other Sins

In today's digital interfaces, we are overwhelmed by a clutter of information and an endless stream of spectacle. The conventional approach to user interface design is to treat applications as beautifully decorated pages, functional charts, and documents. The overwhelming quality of data, in its fullness and comprehensiveness, creates "maximalist" experiences and draws the user's attention.

While this approach creates fun designs and spectacles, it can also result in cluttered designs with a lack of elegance and restraint. In the world of weather apps, you may find endless rows of dates and information, or fun small animations. Often, applications rely on tried and true weather icons as fallback, which can feel cartoonish and difficult to understand. (For instance, I cannot "un-see" the banana-shaped, gold-yellow moons. They look and suggest bananas.) Rather than relying on icons and cartoons for communication, can a weather app simply convey the feeling of the weather in a more elegant way?

​

Outline and Goals
The project will deliver an elegant user interface that celebrates the experience of weather.
(2-Weeks Development, 2-Weeks Design, 4-Weeks Integrated)

Design Objectives

Graphic Hierarchy

The user interface has clear graphic hierarchy and legibility. Weather visualization expresses the qualitative feeling of the weather, and weather data indicates the quantitative functional data. Information scale and placement directly relate to the information presented, and only the most important data is shown.

Meditative Animations

Weather visualization fully utilizes the potential of CSS animations. Visualizations convey weather events realistically and comfortably, based on the weather conditions provided by external API.

Responsive Design

Project contains response design that scales well across screens and devices (desktop, tablet, and mobile). Design responds to changing weather information and local time of the user, through lighting and visual changes.

Development Guidelines

External API

The project uses an external API to bring in weather data and maintains information in state. Application identifies user's location through browser geolocation. Data includes local, hourly, and 7-day information.

React Reusability

Application uses React as a front-end framework. Data from API moves uni-directionally from the container state to smaller components, and user events flow the other direction. Whenever possible, data logic and components are reused to prevent redundant logic. Application folder structure and file information are clear.  

D3, React Hooks

For learning and experimentation purposes, project utilizes D3.js for data visualization for some displayed information. React Hooks are also explored whenever possible.

Initial Sketches

How can the interface itself express the weather? My first thoughts went towards Mark Rothko's minimalist paintings, such as his No.1 (Royal Red Blue). The modern painter once said that a "painting is not a picture of an experience, but is the experience." How can I imbue that same spirit to the app? The key was not to merely overlay the weather text and data on top of the image, but rather celebrate the image itself, as the icon and experience. The architectural oculus serves this role beautifully.

Wireframe / Prototype


​The Heavens and the Earth

In Chinese philosophy, the square and the circle are fundamental shapes, symbolizing the Earth and the Sky. (Also, I am inspire by the floor plan of this OMA building.) In the same way that the oculus will visualize weather conditions, a text square will indicate requisite information. The relationship between the two shapes determines the responsive design, in both portrait and landscape orientations. For the data portion, shifting panels will indicate current, hourly, and daily information.

Weather Conditions

Inspired by James Turrell, I crafted oculus animations that celebrate moving clouds, falling precipitation, and thunderstorms. To begin, I tested animations in CodePen and referenced some great front-end examples. I corresponded each weather condition to Open Weather's own set of orange-and-black icons. For further study, I imagine that the app's visualizations can be further attuned to the 50+ unique weather conditions.

Colors of the Day
Gradient Tests, 24-Hours
As a final touch, the background and text colors dynamically change based on the user locations' time of day. Here, I was inspired by Olafur Eliasson's Color Experiments. The app's changing color theme seeks to match the circadian rhythm of the user, changing to darker, cooler colors at night and warmer, lighter tones during the day, every two hours. 

See the Pen Rain Mist by urbandesign09 (@urbandesign09) on CodePen.