Project Details
Timeframe: January – May 2015
Skills: UX and visual design, ideation, front and back-end development
Technical Implementation:
Front-End: HTML5, CSS3, JavaScript, jQuery, CARTO
Back-End: Node.js, Express.js, MongoDB, Instagram API, tzwhere and suncalc node modules
Press:
The Washington Post, Daily Mail – UK, The Weather Channel – UK, Exame, Spiegel, PSFK, Mental Floss, Engadget, Gizmodo, PetaPixel, The Creator’s Project, Design Taxi
Thesis Inspiration
All Our Yesterdays, my Master’s thesis, is a long form narrative site exploring our relationship to photograph today.
The initial inspiration for All Our Yesterdays centered on the idea of synchronicity – visualizing moments in time in which an Instagram user uploaded a photograph of a sunrise at the same time as another user uploaded a photograph of a sunset. I also wanted to explore a popular photographic topic that often times seem mundane and superficial: photographs of the setting sun.
Concept and Ideation
At the start of thesis, I developed a server-side application to stream data from the Instagram API in real-time collecting Instagram data tagged #sunset and #sunrise. The application allowed me to find moments in time in which one user was experiencing a sunrise at the same time as another user was experiencing a sunset.
Once I had setup data collection, I began to gather as much research as possible in order to better understand the human fascination with the sun. My research spanned many fields including astronomy, history, photography and philosophy. I also interviewed experts in the field of data visualization including Gilad Lotan of Betaworks and Andrew Hill of CARTO.
I explored many ideas of possible outputs for the project including a VR experience or a photo booth installation. However, through my research I discovered I could track the rise and set of the sun through Instagram posts and visualize this data on a map. I realized I could best utilize my strengths as a writer and researcher by creating a long form narrative site inspired by the best of interactive journalism — online stories told through a combination of video, imagery, data visualization, graphics and audio.
Design
Competitive Analysis
I began the design process with a competitive analysis of online interactive journalism I found interesting analyzing the sites from a UX standpoint. Interactive journalism stories that I found engaging had elements such as:
- Some level of interactivity to engage with the data and media
- Clear navigation and chapters
- Not much text, more emphasis on video, imagery, data and graphics to drive the narrative
- Full screen maps, beautiful imagery, sound that helps the narration and typography
Areas where I found room for innovation and experimentation included:
- Artistic visualizations using maps and data
- Incorporation of sound with data (sonification)
- Interactive elements, moving away from text heavy sites
- Incorporation of game elements
Mood Board / Visual Inspiration
Inspiration for the visual design and colors of the site were pulled from antique/vintage star constellation maps, antique maps and illustrations.
Wireframes
High-fidelity wireframes were developed for each page of the site as the wireframes would be both the basis of user testing and sent to PSD2HTML to develop HTML/CSS templates using Twitter Bootstrap.
User Testing
I tested the site for usability with several students at ITP before sending the wireframes away for development. User feedback included adding additional instructional information linking the map visualizations to the text, adding additional interactivity, and renaming menu options.
Site Development
PSD2HTML developed templates for the site based on my wireframes. I then used the templates to build out the content for the site. The map visualizations were built using a web mapping platform called CARTO. Real-time data streaming was accomplished using a Node.js web application hosted on Heroku that streamed data in real-time via the Instagram API to a dataset stored in CARTO using CARTO’s SQL API.
The Final Product
All Our Yesterdays is a longform narrative site exploring our modern, connected 24/7 world through visualizations that chase the sun and document how locations have changed over time.
Project Website
Highlights
Through Instagram user posts, watch the sun set and rise over the previous 24 hours on this dynamic map visualization.
Our fascination with the sun extend to pilots whose photos transport us to thousands of feet above the horizon through this interactive infinite horizon collage.
Explore the individual photographs users take by hovering over each point on this CartoDB map.
The site also explores our relationship to memory and legacy through timeline visualizations that compare my personal memories to the Instagram collective memory, ordering the photographs based on how long things have existed.
