Hudson River Foundation by Sicong Chen

Hudson River Foundation

Table of Contents Overview Discovery Process User Reserach Key Finding Competitive Comparative Design Deliverables

Overview

01 Problem The Hudson River Foundation (HRF) had a 90s style website that contained too much content, and few visuals. The landing page was not engaging and did not encourage further exploration of the site. While the content of the site was all visible on the landing page, the abundance of information confused users as to what the HRF was about. Additionally, clicking on a site link did not alleviate this eye stress, but instead led users to yet another plethora of information. Many of the pages were not well organized and took users a while to navigate through. The data pages were boring at best and the users had no reason to interact with the content. While the HRF did a good job at illustrating that there were opportunities available for funding and research, they did not lay out the data in such a way that encouraged researchers to explore other research topics. The resources given to aid in research funding were also scattered about the page and did not appear to use a particular structure.

The Hudson River Foundation (HRF) wanted a way in which they could attract new visitors to their website, and engage them through a digital experience. In this endeavor, they wanted to be able to share their story, history and work with users in an interesting way. Ideally, they wanted this experience to take place on the home page. Secondly, HRF has a vast amount of data. They came to use seeking a way to organize the data in such a way that it both attracted users to it, and invited them to interact with it. Additionally, the HRF wanted the data to be easy to find, navigate and view. Thirdly, the HRF wanted to encourage and nurture research, and research interests related to the Hudson River. The HRF expressed that they wanted researchers to be drawn to the site, and to be encouraged to apply for grants and funding so that they may pursue their areas of research through the HRF.

Need

Solution To solve the HRF’s problem of low engagement, we introduce an aesthetically beautiful image of the Hudson River that prompts users to click down to further “explore” the river. On click the users are transported onto an interactive map where they are encouraged to click around and engage with the pinpoints. Clicking results in pop up images showcasing interesting images, videos and research from the HRF. These pop ups also include buttons which link the users to other sections of the site.

The data visualization and engagement was a complex issue, which we solved through the increased use of visualization and the introduction of a new tool to encourage user interaction with the data. In our research, we found that users felt overwhelmed by seeing a lot of text on a webpage, and desired a cleaner page with more icons and fewer words. Another thing we found in the research was that users had no real reason to want to use the data. To solve this, we created a tool within our site which allowed users to drag and drop data in order to create their own downloadable visualizations. In this we also sought to make navigation exceptionally easy for users.

Lastly, we wanted to create a more enjoyable experience for the researchers. In this, we again introduce more visuals to the page and reduce the number of words present on the site. To implement our solution, we also restructured the page such that the researchers could easily navigate through grants and easily able to apply for grants within their fields of study.

Our discovery process started with a brainstorm to get some ideas on how we could achieve the goals of interactive, immersive experience, and the datasets sharing and visualization. A lot of ideas came on this step of the process, which were later filtered and refined, to later create the first wireframe we could test with users. After some user testing, the best ideas were selected to become our final solution to our problem, which included: a) the map of the river with interaction points inviting the user to explore the river landmarks, history, and diverse nature, through photos, videos, and texts; and b) the data visualization toolkit, which allows users to generate subsets of the datasets and later create charts based on those subsets, and share publicly the content with the community. After our prototype was developed, we could do some user testing to refine our build, check for heuristics, and generate all the content and design for the website.

Discovery Process

Landing Page

Interactive River

Concept Mapping About

Site Diagram

Landing Page Interactive

Paper Prototyping

Landing Page Timeline

User Sharing Content

Data Visualization Map

Data Visualization Pivot Table

Data Visualization Dashboard

User Research

User Personas

In our research we found that users veered away from pages that were too word heavy. The users expressed an interest in having the data displayed in a more visual way and gave the suggestion that there should be more pictures throughout the site. Interestingly enough, most users expressed interest in having a very modern and interactive site. Users wanted things to be able to click on, they wanted to be able to zoom in and out and they wanted for text and pictures to pop out.

Key Findings

Some tacit knowledge we picked up along the way was that users really wanted a search bar on the front page. A few went as far as to say that the site needed a search bar. The users expressed strong opinions about things being grouped, as it helped them better navigate the site. Many users felt as though they did not know what the HRF was about.

Though our user testing we found that things need to be overly obvious. Despite the fact that we felt that the user experience was intuitive, when given the prototype users did not know that they could click on the icons along the river so that something would pop up. The other thing users expressed to us was that they wanted to see the main point of the site, in words, right away. Prior to talking to users, we had felt a logo on the front page with an engaging experience would have sufficed.

Comparative

Here we show our biggest sources of inspiration to come up with our solution to Hudson River Foundation's website.

From InnoViz (http://www.innovizsolutions.com/) we got some ideas of data visualization.

Here we show our biggest sources of inspiration to come up with our solution to Hudson River Foundation's website.

From Tableau Software (http://www.tableau.com/) we got the idea of creating beautiful and meaningful data visualizations based on huge datasets. From Clever Franke (https://www.cleverfranke.com/ - no longer available) we got the idea of a awesomely beautiful website, with a cool video introduction, and lots of user interactions. From the crowdsourcing concept, we got the idea of users generating and sharing content, creating a community around the datasets available.

Wildlife Conservation Society http://www.wcs.org/ Saving Wildlife and Wild Places - WCS.org The Wildlife Conservation Society saves wildlife and wild places worldwide through science, conservation action, education, and inspiring people to value nature. A beautiful and interactive website, nicely designed, calling the users to interact with the website, and explore the website's content.

Passaicriver.org is a leading New Jersey environmental organization dealing with water quality issues. Their website looks like even older than HRFâ&#x20AC;&#x2122;s, with design elements typical from a 1990s website, like blinking and moving objects. However, at least their menu is more organized, and they have a donate button right on the homepage, calling users to action and engage with the website.

Passaic River Coalition NJ environmental organization

Marine Conservation Institute is a tax-exempt nonprofit ocean conservation organization working to identify and protect vulnerable ocean ecosystems worldwide. A simple, yet beautiful website, with minimal menu, simplifying the user experience, and intuitive to explore.

Marine Conservation Institute https://marine-conservation.org/

Comparative

Design Dliverables

SiteMap Iteration

User Flows

enter site

High Fidelity Prototype

+ HomePage

+ Data w

+ Funding w

+ Programsw

+ Press and Contact

Mobile

Kathleen Bryan

Anna Bialas

Kathleen is a front-end developer, designer and privacy advocate. She earned her bachelor’s degree from Louisiana State University in Digital Advertising, minoring in advanced visualization and technology research. She is currently pursuing her Masters in Integrated Digital Media from New York University, focusing on UX design. Kathleen has worked both as developer and designer, and is currently a technology

Anna is a junior pursuing a B.S. in Media, Culture, and Communication with a focus on Technology and Society at NYU Steinhardt. She worked as content writer and editor before transitioning to web design, and is now a front-end development intern at The Governance Lab @ NYU. In her studies, Anna explores the relationship between bodies and data by making maps and tracing the history of data visualization and tracking technologies.

intern at Ogilvy & Mather.

Bruno Mannato Angius Bruno is a senior pursuing a master’s degree in Management of Technology at NYU Tandon. Over the last couple years, he has worked at multiple companies in the areas of logistics, operations, and management of information systems. Bruno decided to transition into UX to diversify his skills set which centers on strategic planning and performance and project management. In his free time, he likes to venture outdoors to take landscape photographs, and brew his own beer.

Sicong Chen Sicong is a creative UX and web designer. Before coming to NYU Steinhardt to pursue a master’s degree in Digital Media for Learning, she studied advertising and graphic design at Michigan State University. Sicong’s other interests include game and industrial design, as well as product development. In the future, she hopes to channel her skills into a career in the UX world, and to take her passion for photography to the professional level.