Explore the Duwamish River and Engage in Its Cleanup
Explore the Duwamish River
Duwamish iMap is an interactive website-based map of the lower Duwamish river in Washington designed for the University of Washington SRP project lead by Duwamish River Cleanup Coalition (DRCC).
BJ Cummings, a head of Duwamish River Cleanup Coalition (DRCC), approached the School of Visual Concepts (SVC) with the request of creating a website template and branding for a new website of the Duwamish river that would be collaborated with University of Washington Superfund Research Program (UW SRP). This responsive web template includes an interactive map, history and cleanup information about the river while giving users a virtual tour of the river itself.
UI Design
Interaction
Branding
Prototype
Design System
Jan - March 2020
10 weeks
Sketch
Principle
Photoshop
Illustrator
Procreate
DRCC
U of W SRP
Co-opted by:
School of Visual Concepts
Published by University of Washington SRP
The Duwamish river is the part of the Green Duwamish watershed in Seattle, Washington which is about 12 miles long. Not only are the history and culture of the Duwamish tribe embedded in this place, but also this river has remained as an important habitat for wildlife such as geese and salmon. However, since 2001 the Environmental Protection Agency (EPA) has listed the Duwamish as a Superfund site, making it one of America’s most toxic sites due to industrial contamination coming from factories on its banks and floating raw materials that come from shipping airplane parts, cement, and steel.
Regardless of the fact that it requires serious clean up, the Duwamish river has not gotten enough attention from people. Most Seattleites don't even don’t know about this river. One solution is to provide a digital map of the river with informative and educational resources and make this digital map a connection link to other community partners that support the Duwamish river and tribe.
BJ Cummings is the founder of the Duwamish River Cleanup Coalition (DRCC) and previously served as executive director of Sustainable Seattle. Cummings is currently the manager of community engagement for the Superfund Research Program at the University of Washington.
University of Washington Superfund Research Program (UW SRP) works with multiple stakeholders to develop intervention strategies to reduce community exposure to hazardous substances and improve public health. It has long supported community partners invested in environmental health and justice on the Duwamish River.
01. Lack of familiarity
02. Lack of knowledge
03. Need of digital sources
04. Low awareness of other partners
"E" statements
From all the research I gathered, I came up with the following “E” challenge statements:
…educate users about the current and historic Duwamish River to increase their empathy?
…make users explore the river for both the beauty of nature and history, and the pollution problem?
…encourage users in support for cleanup and restoring the river?
…engage other Duwamish community partners to increase their level of awareness?
Since this website is for anyone who wants to know the story flowing through both Seattle and Duwamish river, or who cares about the future of our urban waterways, the target audiences were prioritized into three groups.
01. Seattleites who do not know the river
02. People with an interest in history, environment, and culture
03. National audience for visiting the site online
The target user I created was Jake, a Software Engineer who recently moved to Seattle with no background knowledge of the Duwamish river. Under the premise that this is his first time to visit the new website, I specified his challenges, each corresponding to specific "E" statements.
with lo-fi wireframes and user flows
Based on the solutions I conducted, I sketched a sitemap of the website for bringing clarity to concept decisions and contents.
01. Story of Duwamish
Helps users overall understanding of the Duwamish river and tribe by managing six topics including:
History, Culture, Wildlife and their habitats, Seattle industries, Cleanup and restoration plans of river, and Activities that users can experience
02. Interactive Map of Duwamish River
Provides four topics:
Legends, Tour, Events and CleanUp
03. About the Product
A brief summary of the product's mission and introduction to related community partners
04. Support Duwamish
List of activities that support Duwamish culture and history, and restoration of the river
I wanted to ensure the sitemap and functions were clear and intuitive to use, therefore I started to build low fidelity wireframes of both mobile and desktop versions and integrate them in user flows.
Classic and modern museum that conveys the value of the Duwamish river and tribe
The visual design principle for the Duwamish iMap was “museum”, which is the best way to deliver historical information and relics. The goal of this concept was to convey the value of history and to draw out the sympathy of the user at the same time by combining both classic and modern visual assets.
A serious and minimal atmosphere reflects the weight of history and increases the focus on exhibition. Therefore, I limited the use of color by choosing a dark theme to emphasize serious vibes for the museum.
I paired modern san serif with classic serif fonts to represent the museum theme. Each font supported a variety of weights for headers and body through the page layouts.
The red, white and black are the primary colors which can be discovered from Duwamish artworks. Black color was used for overall tone in order to emphasize seriousness ,and white color was used as the font color. Red was used for accent components such as CTA, buttons, and borders. I also included vibrant accent colors to sort information on the map.
Meaning of product logo and name
01. What does "Duwamish iMap" stand for?
"i" word in "iMap" stands for interactive and it could be an abbreviation of "Interactive Map". A combination of "Duwamish" and "iMap" gives a clarity of product function to users.
02. Symbolic vs. Simple
I sketched the first logo of the map (location) icon and of the Duwamish artworks in order to represent the function of the product, but the decorative logo did not blend with the modern design well. For the final logo, the rectangle frame (the shape of a map) wraps the letter of "D" , "I", "M" which are picked from each word of Duwamish, interactive, and map.
Monochrome design systems and artworks
Since most of the design assets were a black tone, I controlled the brightness, opacity and gaussian blur of each assets for increasing accessibility.
When comparing the product with the museum brochure, the landing page can be considered like a table of contents page which lists out what the product includes. Therefore, the hero images have an important role in my design since they will gives users a roadmap to the each topic. To give the museum an artifact look, I created monochrome hero images using photos provided by our client.
Hover on pictures to discover the original images.
For the unity of design, I integrated several maps collected by types and topics into the minimal and monochrome style maps.
01. Legends
Listing the public access points and featured sites around the Duwamish river while showcasing the many community amenities
02. Tour
Tour routes that take users to the historical and featured locations along the Seattle waterline
03. Cleanup
Environmental conditions and restoration plans that show the degree of environmental health, and the restoration plan with timeline
04. Events
Information of cleanup volunteer, art and cultural events provided by Duwamish community partners
Bring the product into reality
I created the high fidelity wireframes with Sketch and animated them with Principle. I focused on developing natural and functional animation flows to enhance user experience.
There were many benefits to creating a consistent design system. Even though it was my first time to create a dark theme design, I enjoyed creating this product language. Overall it increased the professionalism and avoided inconsistency of design.
A sitemap not only provided a snapshot of the design concept, but also helped me clarify what my final goals were before I started designing and creating content. I could ensure what design solutions I should develop by deciding exactly what I wanted from the product and then mapping it out.
This capstone project concluded with a 15-min client presentation where I explained my design solutions. The client expressed interest in the interactive maps, especially the Cleanup part since it could increase users' understanding of the Duwamish Valley, and could clearly lay out the areas with disproportionate health impacts and environmental injustices where more actions, projects, and investment are needed to address health inequities.
