Curious about what's going on on the other side of the world? This is the tag line of Polar Opposites and the question which drove me to develop a weather app which helps the user compare weather conditions between different places.
This project looks at the presentation of data. The aspect of data presentation I am most interested in is the systems through which we seek and receive dynamic data, like the weather which changes by day and even by hour.
On one level of interaction, the user may check the local weather before heading out in the morning. Most of the time, the in-built weather app on a smart phone would suffice for this.
But what about users seeking a deeper understanding of the weather? Why go beyond the daily weather which greets us from our phone screens?
Breaking it down, I found that there are two crucial aspects that can vary with more in depth weather data.
Time and location.
Past data allows users to spot trends or seasonal patterns. Future data allows users to plan ahead. Viewing data in different time increments helps analysis and planning for different contexts.
Changing locations introduces the possibility of travel or comparison.
Hence, typical users who are looking at this data would be travellers who seek information about their destination and curious individuals who are researching about foreign places.
In both these cases, a comparison to the user's local weather or the weather of the previous or next destination of travel would be an extremely helpful tool. Having cleanly layed out screenshots would also be a valuable reference. However, this feature is currently unavailble on traditional weather sites.
Hence, my goal is to develop a weather app - accessible both via mobile and online - which serves as an easy tool for weather comparison and an intuitive reference for weather changes over time.
The idea is to make any two places, no matter how far apart they are, easily comparable as they sit side by side on the user's screen. And what two places on earth could be are further apart than the North and South poles?
Hence, the idea of "Polar Opposites", as well as the initial graphics was born.
The wireframe helped me develop a structure for the most important features of the product,
Different timeframes accompanied by levels of detail,
linear scroll-through timelines,
easy to screenshot calendar views, and
a balance of information between two locations throughout.
Styles and Assets
To help organise and deliver the plethora of information, I established a hierachy and aesthetic which is informative yet simple and adaptable for the changing locations, times, and formats.
Funnily enough, although I questioned the non-decorative value of the animated characters at first, throughout my own coding process, they became the one of the most helpful visual cues in differentiating the two locations.
I then used web code and weather APIs to build a working web prototype of the product. I was unable to create a full running version due to two main restrictions.
The first restiction was API availability. Although I was able to link current weather data to my site for free, past and future weather data is only accessible through paying a subscription to the providers.
The second restriction I had was time. As this app uses characters (national animals) and colour schemes (with a formula for working out combinations) to each country, there would need to be hundreds of assets added to make the full site.
The main desired features - different timeframes and levels of detail, linear scroll-through timelines, and easy to screenshot calendar views - were achieved by:
Having an easily accessible menu of typically helpful views (day, week, month) that the user can easily switch between. This way, they can navigate from a comprehensive month view to look for further detail in a day view in a second.
Using a linear timeline as the default layout so that users can scroll through and see time pass in the way we are most used to viewing it: linear. This view also gives users a time series graph of the temperature changes for an added layer of visual information. This is represented here in the prototype by the jagged line in the background.
Allowing users to switch at any time between linear and calendar views. All the calendar views are made to fit the user's screen, making screenshotting the information for future reference much easier.
Below is the coded site so far! click on "take me back in time" to see what clicking through the days on linear day view looks like.
Fun fact! The first page shows the weather at the North and South poles right now! If you come back later, you might be able to see it change and see the characters react differently.
Special thanks to RISD Web Design Winter 2019.
Programs used for this project include: