skiary

web application - january 2016

done for

6.148 web programming competition

tools used

Javascript/jQuery, Meteor, HTML, CSS

competition awards

"Most Impressive UI" & 3rd Place Rookie Division

skiary is a reimagining of the personal diary, providing a venue to combine snippets of our deep, personal, or random thoughts along with visualizations of the environments we write from.

Using geolocation services and a weather API, Skiary generates calming sky gradients and playful graphics into its UI, visualizing the importance of setting and the continuity of time as a backdrop for our most intimate musings.

concepts + mockup + planning

Watching the night sky, sunrise, or sunrise is often a very personal, introspective activity. I wanted to create an experience that melds the atmospheric, visual richness of the sky at key times/locations/contexts into the action of writing down thoughts/emotions in an digital diary. A key motivation for me was to create an application that was not only functional, but engaged with users in an emotional way through a playful user interface.

Personally, I'm interested in interfaces that open up new ways of thinking about activities like self-reflection, by transcending conventional design metaphors (i.e., pen and paper as a visual representation of writing diaries) with novel forms of interaction and visual engagement.


I wanted render a certain diary entry's backdrop with graphics/colors that represented the time and weather at the current location of writing. Entering the application, the user would be greeted at a section with a textbook to quickly jot down their feelings, and be able to reflect on their previous entries by scrolling or pressing the down key.

As the page scrolls from one post to another, the background would smoothly change color to animate the transition of time from one time of writing to another.

implementation

I worked in a team of three to create skiary, working closely on both front-end and back-end technologies in its creation using Meteor as a framework. Other than learning to deal with establishing basic server-side code - to allow users to create accounts, write, and save private diary entries - the greatest challenge that I personally tackled in implementation was deciding how to allow for a dynamically-generated user-interface based on time and geolocation.

I eventually settled on a way to generate a visualization of the sky by creating a list of color codes representing all of the colors the sky would transition through at all points of the day. The client-side code would store the time at which you write an entry and compare it to the time of the previous entry you wrote, and generate an appropriate color gradient that represents one point in time transitioning to another.

My teammates and I also worked on linking a weather API from OpenWeatherMap that requested the weather conditions at the user's current location, and having the requests to weather conditions map to playful weather graphics that my teammate illustrated.

Both generating the sky gradient and displaying appropriate weather conditions required a Javascript to communicate between server-side and client-side code, in order to store content and styles for each diary entry and later render it within the user's browser.




I also created the homepage/login screen, which cycles through the various weather options with their graphics, and also animates the background between day and night.




Skiary is currently down (as our host, Meteor, no longer offers free web hosting). However, we are open to continuing development and making improvements in the future. In particular, we wanted to create a feature that would allow for quick emotion-tracking by having the user select and emoji, and later be able to see some data analysis of their emotions over time. We also wanted to incorporate a social aspect into the app by having a public, anonymous "sky", where anyone with an account from a certain region could vent their thoughts and have them linger in a collective, atmospheric digital realm.

related work