Parallax Web Application with Illustrations and Data Visualization


DOC Website Link

Website that visualizes carbon emissions data of the Dartmouth Outing Club with illustrations and fun visuals. Decisions on style and flow are centered on the desire to create an accessible site that is clean, engaging, credible, motivating and inspiring. Key features include data visualization with parallax illustrations, carbon emissions calculator and about page. The calculator page is still under construction.


Problem and Solution

The Dartmouth Outing Club runs recreational trips that produce carbon emissions and there is no accessible way to keep track of that.
The DOC has set a goal to become carbon neutral by 2020. As part of this goal, they aim to reduce carbon emissions from the trips they run. They had a Squarespace website that introduced the DOC Environmental Stewardship Committee. However, the squarespace website will not update the data realtime and it is difficult for non-coding members of the DOC to continue updating the website manually. Also, looking for a way to portray their project in a more interesting way. Also, need a calculator functionality that estimates the amount of carbon emissions so that trip leaders can use as a tool to decided on the trips.

Market & Inspiration Research

  • Environmental infographics

    inspo1 inspo2 inspo3
  • Trendy low-poly environment illustrations and vector art

    inspo4 inspo5 inspo6


Brainstorming

What would the exhibition be like? What will the stations inside the exhibition be like? What are some adjectives to describe such space?

One of the struggles for designing in VR was this - how would I create a mockup and a user flow diagram for VR? To address this problem, I used storyboards to sketch out the key scenes of the VR experience instead of the pages that are layed out for mobile application mockups. Especially, animation storyboards came in handy.




Testing

User Flow Paper Sketch for Testing

Conducting user testing with a storyboard instead of high-resolution mockups was not easy. Key scenes in a sequence did not represent the VR experience. And for some scenes, additional explanation about the intention was needed that some bias was involved.

Feedback
  • need background information on tarsiers: why tarsiers?
  • indication on whether the user's vision is on human or tarsier mode is unclear with the eyeballs icon
  • reading instructions may not be the best idea as it is hard to read in VR Goggles
  • station pillars should display what the inner environments are like
  • overall structure of an exhibition with several stations is intuitive and natural to the user flow


Building While Sorting Out Priorities


Oh No! What Happened?

10 weeks for launching a VR Exhibition on top of school work was a tough schedule even for a five members team. As we aimed for a debut in the Technigala, we decided some features had to be modified or postponed for later development. Thankfully, the project was selected to continue for another 10 weeks that we could pick the four most important features that defined the project.


MVPs
  • Tarsier Vision: toggleable vision feature that flips changes between tarsier and human optics
  • Exhibition
  • Depth of Field Station
  • Brightness Compensation Station
  • Tarsier Forest


Exhibition of the Exhibition



The team was excited to present the Tarsier Goggles at the 2018 Technigala. People from all different ages were interested in testing out the VR experience. Staff members of the Vermont Institute of Natural Science, Professor Lorie Loeb, the Executive Director of the DALI Lab, several Dartmouth students, and even two kindergarteners experienced Tarsier Goggles with great success. We live played the experience on a large screen so as to let other people see how the tarsiers see the world.

Finalized Features
  • Importance of Tutorials: It was a struggle to teach the HTC Vive Controls to all the users every single time. Especially for children of young age. We prepared a small illustration of the controls, but it was not enough. Perhaps an animated tutorial? Or an interactive tutorial may be more effective.
  • Focusing Problem: We figured out a bug in the Tarsier's Vision. The focus was sometimes off and would not adjust automatically.
  • Awe and Excitement: Depth of Field and the Tarsier's Forest were the most popular stations. The visual elements with colors, textures and light seemed to have inspired many of the users.
  • More Feedback



Future

  • I am excited to announce a possible collaboration with the Vermont Institue of Natural Sciences. The team is currently working on customizing the VR experience to make it more fit for the exhibition. We are planning to add an Owl Vision feature as the owls are more local to Vermont.
  • Tutorials! Ever since the User Research stage, the team has felt the importance of having an effective tutorial regarding how VR is not as accessible to the public as other mediums. We wanted to make a proper, effective tutorial and for another next 10 weeks, it will be number one priority.
  • The beauty of this project was the flexible scalability. We can add as much stations we want into the exhibition and we are definitely planning on doing so.


Features and Adjectives

  • Adjectives: clean, engaging, credible, motivating, inspiring and trendy

Evolution and Color

Website that introduces and explains carbon emissions data of the Dartmouth Outing Club with illustrations and fun visuals. Decisions on style and flow are centered on the desire to create an accessible site that is clean, engaging, credible, motivating and inspiring. Key features in

Tools

  • Design: Sketch, InVision, Zeplin
  • Developing: HTML/CSS, JavaScript, Jquery, Chart.js, Google Map API, Firebase, Google Scripts

Lessons

  • important to define the problem clearly beforehand
  • design involves not only front-end but also back-end
  • Priority number one does not necessarily always come first