Puget Soundkeeper Alliance Website Design
Puget Soundkeeper
Puget Soundkeeper
Puget Soundkeeper
Puget Soundkeeper
Website Redesign
Website Redesign
Website Redesign
Website Redesign
TIMELINE: 10-WEEKS
ROLES: UI + UX DESIGN, USER RESEARCH, INFO ARCHITECTURE, PROTOTYPE + WIREFRAME
TOOLS: ILLUSTRATOR, FIGMA, SKETCH, MIRO, OPTIMAL WORKSHOP
TIMELINE: 10-WEEKS
MY ROLES: UI + UX DESIGN, USER RESEARCH, INFO ARCHITECTURE,
PROTOTYPE + WIREFRAME
TOOLS: ILLUSTRATOR, FIGMA, SKETCH, MIRO, OPTIMAL WORKSHOP
TIMELINE: 10-WEEKS
MY ROLES: UI + UX DESIGN, USER RESEARCH, INFO ARCHITECTURE,
PROTOTYPE + WIREFRAME
TOOLS: ILLUSTRATOR, FIGMA, SKETCH, MIRO, OPTIMAL WORKSHOP
TIMELINE: 10-WEEKS
MY ROLES: UI + UX DESIGN, USER RESEARCH, INFO ARCHITECTURE,
PROTOTYPE + WIREFRAME
TOOLS: ILLUSTRATOR, FIGMA, SKETCH, MIRO, OPTIMAL WORKSHOP
DRINKABLE, SWIMMABLE, FISHABLE WATER FOR ALL
Puget Sound's uncommon natural beauty, with its sparkling water makes it an awesome place to live for humans and creatures alike… but not when it's polluted.
Puget Soundkeeper is a Seattle-based, non-profit organization that focuses on protecting the marine environment of Puget Sound and its tributaries. They monitor and mitigate pollution through prevention, advocacy, and enforcement programs.
DRINKABLE, SWIMMABLE, FISHABLE WATER FOR ALL
Puget Sound's uncommon natural beauty, with its sparkling water makes it an awesome place to live for humans and creatures alike… but not when it's polluted.
Puget Soundkeeper is a Seattle-based, non-profit organization that focuses on protecting the marine environment of Puget Sound and its tributaries. They monitor and mitigate pollution through prevention, advocacy, and enforcement programs.
DRINKABLE, SWIMMABLE, FISHABLE WATER FOR ALL
Puget Sound's uncommon natural beauty, with its sparkling water makes it an awesome place to live for humans and creatures alike… but not when it's polluted.
Puget Soundkeeper is a Seattle-based, non-profit organization that focuses on protecting the marine environment of Puget Sound and its tributaries. They monitor and mitigate pollution through prevention, advocacy, and enforcement programs.
DRINKABLE, SWIMMABLE, FISHABLE WATER FOR ALL
Puget Sound's uncommon natural beauty, with its sparkling water makes it an awesome place to live for humans and creatures alike… but not when it's polluted.
Puget Soundkeeper is a Seattle-based, non-profit organization that focuses on protecting the marine environment of Puget Sound and its tributaries. They monitor and mitigate pollution through prevention, advocacy, and enforcement programs.
DRINKABLE, SWIMMABLE, FISHABLE WATER FOR ALL
Puget Sound's uncommon natural beauty, with its sparkling water makes it an awesome place to live for humans and creatures alike… but not when it's polluted.
Puget Soundkeeper is a Seattle-based, non-profit organization that focuses on protecting the marine environment of Puget Sound and its tributaries. They monitor and mitigate pollution through prevention, advocacy, and enforcement programs.
PUGET SOUNDKEEPER GOALS
• To inspire people to take action, volunteer, become a member, and donate
• Showcase the entire scope of work to illustrate their wide reach that extends beyond Seattle and King County
• Better organize of information in categories to reflect current programs
PUGET SOUNDKEEPER GOALS
• To inspire people to take action, volunteer, become a member, and donate
• Showcase the entire scope of work to illustrate their wide reach that extends beyond Seattle and King County
• Better organize of information in categories to reflect current programs
PUGET SOUNDKEEPER GOALS
• To inspire people to take action, volunteer, become a member, and donate
• Showcase the entire scope of work to illustrate their wide reach that extends beyond Seattle and King County
• Better organize of information in categories to reflect current programs
PUGET SOUNDKEEPER GOALS
• To inspire people to take action, volunteer, become a member, and donate
• Showcase the entire scope of work to illustrate their wide reach that extends beyond Seattle and King County
• Better organize of information in categories to reflect current programs
PUGET SOUNDKEEPER GOALS:
• To inspire people to take action, volunteer, become a member, and donate
• Showcase the entire scope of work to illustrate their wide reach that extends beyond Seattle and King County
• Better organize of information in categories to reflect current programs
PAIN POINTS
• The current 50 – 60% average visitor bounce-rate must be reduced. Visitors have to stay on the site to understand Soundkeeper’s work, and make online donations to support it. This is critical because Puget Soundkeeper relies heavily on donations both through financial form and volunteer action.
• Better organization of information is needed to improve user experience
• Information should be presented in a more engaging, visual way
• They need a way to handle the current amount of information and archive older content.
• They need to make technical information more accessible for community members.
• The current Puget Soundkeeper site doesn’t convey the passion or energy reflected in the organization or people who work there.
PAIN POINTS
• The current 50 – 60% average visitor bounce-rate must be reduced. Visitors have to stay on the site to understand Soundkeeper’s work, and make online donations to support it. This is critical because Puget Soundkeeper relies heavily on donations both through financial form and volunteer action.
• Better organization of information is needed to improve user experience
• Information should be presented in a more engaging, visual way
• They need a way to handle the current amount of information and archive older content.
• They need to make technical information more accessible for community members.
• The current Puget Soundkeeper site doesn’t convey the passion or energy reflected in the organization or people who work there.
PAIN POINTS
• The current 50 – 60% average visitor bounce-rate must be reduced. Visitors have to stay on the site to understand Soundkeeper’s work, and make online donations to support it. This is critical because Puget Soundkeeper relies heavily on donations both through financial form and volunteer action.
• Better organization of information is needed to improve user experience
• Information should be presented in a more engaging, visual way
• They need a way to handle the current amount of information and archive older content.
• They need to make technical information more accessible for community members.
• The current Puget Soundkeeper site doesn’t convey the passion or energy reflected in the organization or people who work there.
PAIN POINTS
• The current 50 – 60% average visitor bounce-rate must be reduced. Visitors have to stay on the site to understand Soundkeeper’s work, and make online donations to support it. This is critical because Puget Soundkeeper relies heavily on donations both through financial form and volunteer action.
• Better organization of information is needed to improve user experience
• Information should be presented in a more engaging, visual way
• They need a way to handle the current amount of information and archive older content.
• They need to make technical information more accessible for community members.
• The current Puget Soundkeeper site doesn’t convey the passion or energy reflected in the organization or people who work there.
PAIN POINTS
• The current 50 – 60% average visitor bounce-rate must be reduced. Visitors have to stay on the site to understand Soundkeeper’s work, and make online donations to support it. This is critical because Puget Soundkeeper relies heavily on donations both through financial form and volunteer action.
• Better organization of information is needed to improve user experience
• Information should be presented in a more engaging, visual way
• They need a way to handle the current amount of information and archive older content.
• They need to make technical information more accessible for community members.
• The current Puget Soundkeeper site doesn’t convey the passion or energy reflected in the organization or people who work there.
“What does 66,000 lbs. even mean? It’s nice to have facts if you can put them into context.”
“What does 66,000 lbs. even mean? It’s nice to have facts if you can put them into context.”
“What does 66,000 lbs. even mean? It’s nice to have facts if you can put them into context.”
“What does 66,000 lbs. even mean? It’s nice to have facts if you can put them into context.”
– COLLEEN C.
– COLLEEN C.
– COLLEEN C.
– COLLEEN C.
Research Question: How might we make Puget Soundkeeper’s website more engaging and easier to explore?
Research Question: How might we make Puget Soundkeeper’s website more engaging and easier to explore?
How might we make Puget Soundkeeper’s website more engaging and easier to explore?
How might we make Puget Soundkeeper’s website more engaging and easier to explore?
HATCHING A STRATEGY
Our team analyzed the existing site to understand how it was failing. Why weren’t visitors getting beyond the landing page? As a team, we hypothesized:
• There’s a daunting amount of information on the homepage.
• The home page content lacks thoughtful hierarchy and organization.
• Past and present content are mixed. Older content should be archived.
• The visuals are not interesting.
• Navigation on the site does not follow best practices, so content is difficult to find.
HATCHING A STRATEGY
Our team analyzed the existing site to understand how it was failing. Why weren’t visitors getting beyond the landing page? As a team, we hypothesized:
• There’s a daunting amount of information on the homepage.
• The home page content lacks thoughtful hierarchy and organization.
• Past and present content are mixed. Older content should be archived.
• The visuals are not interesting.
• Navigation on the site does not follow best practices, so content is difficult to find.
HATCHING A STRATEGY
Our team analyzed the existing site to understand how it was failing. Why weren’t visitors getting beyond the landing page? As a team, we hypothesized:
• There’s a daunting amount of information on the homepage.
• The home page content lacks thoughtful hierarchy and organization.
• Past and present content are mixed. Older content should be archived.
• The visuals are not interesting.
• Navigation on the site does not follow best practices, so content is difficult to find.
HATCHING A STRATEGY
Our team analyzed the existing site to understand how it was failing. Why weren’t visitors getting beyond the landing page? As a team, we hypothesized:
• There’s a daunting amount of information on the homepage.
• The home page content lacks thoughtful hierarchy and organization.
• Past and present content are mixed. Older content should be archived.
• The visuals are not interesting.
• Navigation on the site does not follow best practices, so content is difficult to find.
HATCHING A STRATEGY
Our team analyzed the existing site to understand how it was failing. Why weren’t visitors getting beyond the landing page? As a team, we hypothesized:
• There’s a daunting amount of information on the homepage.
• The home page content lacks thoughtful hierarchy and organization.
• Past and present content are mixed. Older content should be archived.
• The visuals are not interesting.
• Navigation on the site does not follow best practices, so content is difficult to find.
The original Puget Soundkeeper landing page was confusing. Main navigation is at the middle of the home page making it difficult to find. There is too much to figure out before even understanding what Puget Soundkeeper does.
The original Puget Soundkeeper landing page was confusing. Main navigation is at the middle of the home page making it difficult to find. There is too much to figure out before even understanding what Puget Soundkeeper does.
The original Puget Soundkeeper landing page was confusing. Main navigation is at the middle of the home page making it difficult to find. There is too much to figure out before even understanding what Puget Soundkeeper does.
The original Puget Soundkeeper landing page was confusing. Main navigation is in the middle of the home page making it difficult to find. There is too much to figure out before even understanding what Puget Soundkeeper is/does.
The original Puget Soundkeeper landing page was confusing. Main navigation is at the middle of the home page making it difficult to find. There is too much to figure out before even understanding what Puget Soundkeeper does.
MIGRATION OF DISCOVERY
The client identified several nonprofit sites that share a related mission: https://www.seashepherdglobal.org/ and https://theoceancleanup.com/rivers/. We used these two in our interviews as standards because they met the majority of the client’s benchmark goals.
We asked people in the Puget Sound area to evaluate the Puget Soundkeeper website and the other two sites and recorded their “thinking aloud” responses as they browsed them.
Regarding Puget Soundkeeper site:
1. When referring to technical information, context is necessary for understanding. 50% of participants said statistics are difficult to understand when you don’t have a context.
2. The home page is text-heavy, lacks variation in structure, and takes too much effort to figure out. Users don’t want to work to access information.
3. 47% found the page and site design to be unintuitive, cluttered, and confusing. 53% found the information unclear.
MIGRATION OF DISCOVERY
The client identified several nonprofit sites that share a related mission: https://www.seashepherdglobal.org/ and https://theoceancleanup.com/rivers/. We used these two in our interviews as standards because they met the majority of the client’s benchmark goals.
We asked people in the Puget Sound area to evaluate the Puget Soundkeeper website and the other two sites and recorded their “thinking aloud” responses as they browsed them.
Regarding Puget Soundkeeper site:
1. When referring to technical information, context is necessary for understanding. 50% of participants said statistics are difficult to understand when you don’t have a context.
2. The home page is text-heavy, lacks variation in structure, and takes too much effort to figure out. Users don’t want to work to access information.
3. 47% found the page and site design to be unintuitive, cluttered, and confusing. 53% found the information unclear.
MIGRATION OF DISCOVERY
The client identified several nonprofit sites that share a related mission: https://www.seashepherdglobal.org/ and https://theoceancleanup.com/rivers/. We used these two in our interviews as standards because they met the majority of the client’s benchmark goals.
We asked people in the Puget Sound area to evaluate the Puget Soundkeeper website and the other two sites and recorded their “thinking aloud” responses as they browsed them.
Regarding Puget Soundkeeper site:
1. When referring to technical information, context is necessary for understanding. 50% of participants said statistics are difficult to understand when you don’t have a context.
2. The home page is text-heavy, lacks variation in structure, and takes too much effort to figure out. Users don’t want to work to access information.
3. 47% found the page and site design to be unintuitive, cluttered, and confusing. 53% found the information unclear.
MIGRATION OF DISCOVERY
The client identified several nonprofit sites that share a related mission: https://www.seashepherdglobal.org/ and https://theoceancleanup.com/rivers/. We used these two in our interviews as standards because they met the majority of the client’s benchmark goals.
We asked people in the Puget Sound area to evaluate the Puget Soundkeeper website and the other two sites and recorded their “thinking aloud” responses as they browsed them.
Regarding Puget Soundkeeper site:
1. When referring to technical information, context is necessary for understanding. 50% of participants said statistics are difficult to understand when you don’t have a context.
2. The home page is text-heavy, lacks variation in structure, and takes too much effort to figure out. Users don’t want to work to access information.
3. 47% found the page and site design to be unintuitive, cluttered, and confusing. 53% found the information unclear.
MIGRATION OF DISCOVERY
The client identified several nonprofit sites that share a related mission: https://www.seashepherdglobal.org/ and https://theoceancleanup.com/rivers/. We used these two in our interviews as standards because they met the majority of the client’s benchmark goals.
We asked people in the Puget Sound area to evaluate the Puget Soundkeeper website and the other two sites and recorded their “thinking aloud” responses as they browsed them.
Regarding Puget Soundkeeper site:
1. When referring to technical information, context is necessary for understanding. 50% of participants said statistics are difficult to understand when you don’t have a context.
2. The home page is text-heavy, lacks variation in structure, and takes too much effort to figure out. Users don’t want to work to access information.
3. 47% found the page and site design to be unintuitive, cluttered, and confusing. 53% found the information unclear.
“I want to read this, but I don’t want to work at it.”
“I want to read this, but I don’t want to work at it.”
“I want to read this, but I don’t want to work at it.”
“I want to read this, but I don’t want to work at it.”
— ANNA J.
— ANNA J.
— ANNA J.
— ANNA J.
We learned in general that:
1. People are attracted to visual images and videos to help convey information quickly.
2. Typographic contrast and visual hierarchy aid in comprehension, allowing for quick scanning. 83% liked large headers, making content “scannable” for quick browsing.
3. Users want control over their experience, to come back to larger articles later.
4. 100% of them said they liked large, bold images, especially with motion. They said it kept their interest and made them want to dig deeper.
5. People want to be able to choose how much time they invest in articles. They want to scan articles by headers, and get just enough information to decide whether to read the rest, and when.
In general
1. People are attracted to visual images and videos to help convey information quickly.
2. Typographic contrast and visual hierarchy aid in comprehension, allowing for quick scanning. 83% liked large headers, making content “scannable” for quick browsing.
3. Users want control over their experience, to come back to larger articles later.
4. 100% of them said they liked large, bold images, especially with motion. They said it kept their interest and made them want to dig deeper.
5. People want to be able to choose how much time they invest in articles. They want to scan articles by headers, and get just enough information to decide whether to read the rest, and when.
In general:
1. People are attracted to visual images and videos to help convey information quickly.
2. Typographic contrast and visual hierarchy aid in comprehension, allowing for quick scanning. 83% liked large headers, making content “scannable” for quick browsing.
3. Users want control over their experience, to come back to larger articles later.
4. 100% of them said they liked large, bold images, especially with motion. They said it kept their interest and made them want to dig deeper.
5. People want to be able to choose how much time they invest in articles. They want to scan articles by headers, and get just enough information to decide whether to read the rest, and when.
In general
1. People are attracted to visual images and videos to help convey information quickly.
2. Typographic contrast and visual hierarchy aid in comprehension, allowing for quick scanning. 83% liked large headers, making content “scannable” for quick browsing.
3. Users want control over their experience, to come back to larger articles later.
4. 100% of them said they liked large, bold images, especially with motion. They said it kept their interest and made them want to dig deeper.
5. People want to be able to choose how much time they invest in articles. They want to scan articles by headers, and get just enough information to decide whether to read the rest, and when.
In general:
1. People are attracted to visual images and videos to help convey information quickly.
2. Typographic contrast and visual hierarchy aid in comprehension, allowing for quick scanning. 83% liked large headers, making content “scannable” for quick browsing.
3. Users want control over their experience, to come back to larger articles later.
4. 100% of them said they liked large, bold images, especially with motion. They said it kept their interest and made them want to dig deeper.
5. People want to be able to choose how much time they invest in articles. They want to scan articles by headers, and get just enough information to decide whether to read the rest, and when.
The new and improved Puget Soundkeeper navigation uses three concise categories to organize everything that the organization offers: Who we are, What we do, and Resources.
The original Puget Soundkeeper landing page was confusing. Main navigation is at the middle of the home page making it difficult to find. There is too much to figure out before even understanding what Puget Soundkeeper does.
The original Puget Soundkeeper landing page was confusing. Main navigation is at the middle of the home page making it difficult to find. There is too much to figure out before even understanding what Puget Soundkeeper does.
The original Puget Soundkeeper landing page was confusing. Main navigation is in the middle of the home page making it difficult to find. There is too much to figure out before even understanding what Puget Soundkeeper is/does.
The original Puget Soundkeeper landing page was confusing. Main navigation is at the middle of the home page making it difficult to find. There is too much to figure out before even understanding what Puget Soundkeeper does.
SPAWNING SOLUTIONS
This is how we addressed these issues:
1. Distinct hierarchy. We structured a stronger hierarchy within the website with type and image, size contrast, typography, and color.
2. Simplify. We used the topics of importance from the client brief to create categories and subcategories. We started with 3 general categories. We then created 3 sub-categories for each of those. Content starts generally and gets more specific as the user continues.
SPAWNING SOLUTIONS
This is how we addressed these issues:
1. Distinct hierarchy. We structured a stronger hierarchy within the website with type and image, size contrast, typography, and color.
2. Simplify. We used the topics of importance from the client brief to create categories and subcategories. We started with 3 general categories. We then created 3 sub-categories for each of those. Content starts generally and gets more specific as the user continues.
3. Easy search. We created a prominent search bar with query suggestions and auto-complete to help visitors locate articles. People who sign up can save their articles by bookmarking. To prevent information crowding, we created an archive for older articles.
4. Scannability + user control. Articles are designed to be scanned. The user has control over their experience. They can just look at images and scan larger headers. They can read more in the moment or save for later.
5. Showing, not telling. We integrated friendly images to help explain technical information. This way technical information is made more accessible to the community.
6. Browsing beyond landing page. We created a visual narrative to draw in visitors. We also want to represent the passion and energy of Puget Soundkeeper.
SPAWNING SOLUTIONS
This is how we addressed these issues:
1. Distinct hierarchy. We structured a stronger hierarchy within the website with type and image, size contrast, typography, and color.
2. Simplify. We used the topics of importance from the client brief to create categories and subcategories. We started with 3 general categories. We then created 3 sub-categories for each of those. Content starts generally and gets more specific as the user continues.
3. Easy search. We created a prominent search bar with query suggestions and auto-complete to help visitors locate articles. People who sign up can save their articles by bookmarking. To prevent information crowding, we created an archive for older articles.
4. Scannability + user control. Articles are designed to be scanned. The user has control over their experience. They can just look at images and scan larger headers. They can read more in the moment or save for later.
5. Showing, not telling. We integrated friendly images to help explain technical information. This way technical information is made more accessible to the community.
6. Browsing beyond landing page. We created a visual narrative to draw in visitors. We also want to represent the passion and energy of Puget Soundkeeper.
SPAWNING SOLUTIONS
This is how we addressed these issues:
1. Distinct hierarchy. We structured a stronger hierarchy within the website with type and image, size contrast, typography, and color.
2. Simplify. We used the topics of importance from the client brief to create categories and subcategories. We started with 3 general categories. We then created 3 sub-categories for each of those. Content starts generally and gets more specific as the user continues.
3. Easy search. We created a prominent search bar with query suggestions and auto-complete to help visitors locate articles. People who sign up can save their articles by bookmarking. To prevent information crowding, we created an archive for older articles.
4. Scannability + user control. Articles are designed to be scanned. The user has control over their experience. They can just look at images and scan larger headers. They can read more in the moment or save for later.
5. Showing, not telling. We integrated friendly images to help explain technical information. This way technical information is made more accessible to the community.
6. Browsing beyond landing page. We created a visual narrative to draw in visitors. We also want to represent the passion and energy of Puget Soundkeeper.
SPAWNING SOLUTIONS
This is how we addressed these issues:
1. Distinct hierarchy. We structured a stronger hierarchy within the website with type and image, size contrast, typography, and color.
2. Simplify. We used the topics of importance from the client brief to create categories and subcategories. We started with 3 general categories. We then created 3 sub-categories for each of those. Content starts generally and gets more specific as the user continues.
3. Easy search. We created a prominent search bar with query suggestions and auto-complete to help visitors locate articles. People who sign up can save their articles by bookmarking. To prevent information crowding, we created an archive for older articles.
4. Scannability + user control. Articles are designed to be scanned. The user has control over their experience. They can just look at images and scan larger headers. They can read more in the moment or save for later.
5. Showing, not telling. We integrated friendly images to help explain technical information. This way technical information is made more accessible to the community.
6. Browsing beyond landing page. We created a visual narrative to draw in visitors. We also want to represent the passion and energy of Puget Soundkeeper.
Once the user accesses the menu from landing page, it opens to reveal the three main categories: Who we are, What we do, and Resources.
Once on a category page, main categories open to a drop-down menu that reveals sub-categories.
The user can access all threee main categories from any page using a “bread crumb” menu at the top.
3. Easy search. We created a prominent search bar with query suggestions and auto-complete to help visitors locate articles. People who sign up can save their articles by bookmarking. To prevent information crowding, we created an archive for older articles.
4. Scannability + user control. Articles are designed to be scanned. The user has control over their experience. They can just look at images and scan larger headers. They can read more in the moment or save for later.
5. Showing, not telling. We integrated friendly images to help explain technical information. This way technical information is made more accessible to the community.
WHAT WE DO / OUR WORK
1. Main menu is referenced through this “bread-crumb” style. This means that the user is always connected to the main menu.
2. Each main menu has a corresponding drop-down sub-category: “What We Do” opens to “Our Work,” which opens to three more organizational categories. It highlights pertinent sub-categories with a white box when clicked.
3. “What we do” also opens the other two sub-categories: “News + Archives,” “Policies + Engagement.”
4. Donate button is always prominent and accessible at the top of the page.
5. Get Involved button is also prominently displayed at the top next to the Donate button.
6. Our Work > drop-down revealing: “Monitoring + Enforcement,” “Education + Stewardship,”and “Policies + Engagement.”
7. Visitors are prompted to scroll down via an arrow that states: “Dive Deeper.”
8. Individual articles are highlighted through provocative imagery that opens the story. Users can scan and book-mark to read later. Above the title is categorization words linking each story to the corresponding category (ie: policies + engagement, etc.)
9. Each sub-category section starts with intro textand then the rest of the section contains more stories and videos that belong in that sub-category (ie: Monitoring + Reinforcement).
10. A short factoid having to do with the category subject
11. This is how the sections are divided on the entire webpage. Show here is Monitoring + Enforcement.
12. This is the introduction to the section: Education + Stewardship.
13. This section is Education + Stewardship
14. This is the introducation to Policies + Engagement
15. Policies + Engagement section
16. The footer allows the visitor to access menu items without scrolling all the way to the top.
17. Videos of Puget Soundkeeper volunteers are sprinkled throughout and placed in the corresponding categories.
WHAT WE DO / OUR WORK
1. Main menu is referenced through this “bread-crumb” style. This means that the user is always connected to the main menu.
2. Each main menu has a corresponding drop-down sub-category: “What We Do” opens to “Our Work,” which opens to three more organizational categories. It highlights pertinent sub-categories with a white box when clicked.
3. “What we do” also opens the other two sub-categories: “News + Archives,” “Policies + Engagement.”
4. Donate button is always prominent and accessible at the top of the page.
5. Get Involved button is also prominently displayed at the top next to the Donate button.
6. Our Work > drop-down revealing: “Monitoring + Enforcement,” “Education + Stewardship,”and “Policies + Engagement.”
7. Visitors are prompted to scroll down via an arrow that states: “Dive Deeper.”
8. Individual articles are highlighted through provocative imagery that opens the story. Users can scan and book-mark to read later. Above the title is categorization words linking each story to the corresponding category (ie: policies + engagement, etc.)
9. Each sub-category section starts with intro textand then the rest of the section contains more stories and videos that belong in that sub-category (ie: Monitoring + Reinforcement).
10. A short factoid having to do with the category subject
11. This is how the sections are divided on the entire webpage. Show here is Monitoring + Enforcement.
12. This is the introduction to the section: Education + Stewardship.
13. This section is Education + Stewardship
14. This is the introducation to Policies + Engagement
15. Policies + Engagement section
16. The footer allows the visitor to access menu items without scrolling all the way to the top.
17. Videos of Puget Soundkeeper volunteers are sprinkled throughout and placed in the corresponding categories.
6. Browsing beyond landing page. We created a visual narrative to draw in visitors. We also want to represent the passion and energy of Puget Soundkeeper.
This also addresses a couple of the client’s desires. 1) They want content to be more engaging and inspire people to take action quickly and easily. 2) They want to illustrate their wide reach extending beyond Seattle and King County.
This narrative tells Puget Soundkeeper’s story and asks the viewer to “imagine yourself here with us.” We used six compelling images that correlate to the copy overlay. They depict the Puget Sound area and feature beautiful landscapes, volunteers on the job, and underwater scenes.
The text unfolds over the images through vertical scrolling. In the last image the text box moves to reveal three navigation buttons that take the user directly to the main navigation page.
This also addresses a couple of the client’s desires. 1) They want content to be more engaging and inspire people to take action quickly and easily. 2) They want to illustrate their wide reach extending beyond Seattle and King County.
This narrative tells Puget Soundkeeper’s story and asks the viewer to “imagine yourself here with us.” We used six compelling images that correlate to the copy overlay. They depict the Puget Sound area and feature beautiful landscapes, volunteers on the job, and underwater scenes.
The text unfolds over the images through vertical scrolling. In the last image the text box moves to reveal three navigation buttons that take the user directly to the main navigation page.
This also addresses a couple of the client’s desires. 1) They want content to be more engaging and inspire people to take action quickly and easily. 2) They want to illustrate their wide reach extending beyond Seattle and King County.
This narrative tells Puget Soundkeeper’s story and asks the viewer to “imagine yourself here with us.” We used six compelling images that correlate to the copy overlay. They depict the Puget Sound area and feature beautiful landscapes, volunteers on the job, and underwater scenes.
The text unfolds over the images through vertical scrolling. In the last image the text box moves to reveal three navigation buttons that take the user directly to the main navigation page.
This also addresses a couple of the client’s desires. 1) They want content to be more engaging and inspire people to take action quickly and easily. 2) They want to illustrate their wide reach extending beyond Seattle and King County.
This narrative tells Puget Soundkeeper’s story and asks the viewer to “imagine yourself here with us.” We used six compelling images that correlate to the copy overlay. They depict the Puget Sound area and feature beautiful landscapes, volunteers on the job, and underwater scenes.
The text unfolds over the images through vertical scrolling. In the last image the text box moves to reveal three navigation buttons that take the user directly to the main navigation page.
This also addresses a couple of the client’s desires. 1) They want content to be more engaging and inspire people to take action quickly and easily. 2) They want to illustrate their wide reach extending beyond Seattle and King County.
This narrative tells Puget Soundkeeper’s story and asks the viewer to “imagine yourself here with us.” We used six compelling images that correlate to the copy overlay. They depict the Puget Sound area and feature beautiful landscapes, volunteers on the job, and underwater scenes.
The text unfolds over the images through vertical scrolling. In the last image the text box moves to reveal three navigation buttons that take the user directly to the main navigation page.
View of the entire terrain: How would it feel to know you've helped preserve one of the world's most unique waterways?
How would it feel to know you've helped preserve one of the world's most unique waterways?
How would it feel to know you've helped preserve one of the world's most unique waterways?
How would it feel to know you've helped preserve one of the world's most unique waterways?
How would it feel to know you've helped preserve one of the world's most unique waterways?
View closer to the city: Puget Sound is the 2nd largest estuary in the U.S. with 1,332 miles of shoreline affecting 4.2 million lives.
Puget Sound is the 2nd largest estuary in the U.S. with 1,332 miles of shoreline affecting 4.2 million lives.
Puget Sound is the 2nd largest estuary in the U.S. with 1,332 miles of shoreline affecting 4.2 million lives.
Puget Sound is the 2nd largest estuary in the U.S. with 1,332 miles of shoreline affecting 4.2 million lives.
Puget Sound is the 2nd largest estuary in the U.S. with 1,332 miles of shoreline affecting 4.2 million lives.
View still above the city but getting closer to the water: Puget Soundkeeper actively patrols & monitors our waterways, enforcing clean water standards through legal action.
Puget Soundkeeper actively patrols & monitors our waterways, enforcing clean water standards through legal action.
Puget Soundkeeper actively patrols & monitors our waterways, enforcing clean water standards through legal action.
Puget Soundkeeper actively patrols & monitors our waterways, enforcing clean water standards through legal action.
Puget Soundkeeper actively patrols & monitors our waterways, enforcing clean water standards through legal action.
View of volunteer out on patrol: We collaborage with local businesses to ensure the future of fishable, swimmable, drinkable water.
We collaborage with local businesses to ensure the future of fishable, swimmable, drinkable water.
We collaborage with local businesses to ensure the future of fishable, swimmable, drinkable water.
We collaborage with local businesses to ensure the future of fishable, swimmable, drinkable water.
We collaborage with local businesses to ensure the future of fishable, swimmable, drinkable water.
View just below the water line: We're on the water every week. Imagine yourself here with us.
The final written narrative (below) reveals three buttons connecting directly to inside content. (Deeper underwater view): Feels pretty good, right?
– Who we are
– What we do
– Get involved
We're on the water every week. Imagine yourself here with us.
We're on the water every week. Imagine yourself here with us.
View just below the water line: We're on the water every week. Imagine yourself here with us.
The final written narrative (below) reveals three buttons connecting directly to inside content. (Deeper underwater view): Feels pretty good, right?
– Who we are
– What we do
– Get involved
We're on the water every week. Imagine yourself here with us.
We're on the water every week. Imagine yourself here with us.
OUTCOME
Our team presented to the client, instructor, and SVC Director. The client said that our passion on this subject showed through the work, but they didn't adopt our recommendations. However, I did notice that Puget Soundkeeper recently updated their site. It is now more simplified and less text-heavy. It has better organization, a stronger hierarchy, and has more interesting imagery. It's nice to think that maybe our team’s work made a positive impact for such a worthy organization.
OUTCOME
Our team presented to the client, instructor, and SVC Director. The client said that our passion on this subject showed through the work, but they didn't adopt our recommendations. However, I did notice that Puget Soundkeeper recently updated their site. It is now more simplified and less text-heavy. It has better organization, a stronger hierarchy, and has more interesting imagery. It's nice to think that maybe our team’s work made a positive impact for such a worthy organization.
OUTCOME
Our team presented to the client, instructor, and SVC Director. The client said that our passion on this subject showed through the work, but they didn't adopt our recommendations. However, I did notice that Puget Soundkeeper recently updated their site. It is now more simplified and less text-heavy. It has better organization, a stronger hierarchy, and has more interesting imagery. It's nice to think that maybe our team’s work made a positive impact for such a worthy organization.
OUTCOME
Our team presented to the client, instructor, and SVC Director. The client said that our passion on this subject showed through the work, but they didn't adopt our recommendations. However, I did notice that Puget Soundkeeper recently updated their site. It is now more simplified and less text-heavy. It has better organization, a stronger hierarchy, and has more interesting imagery. It's nice to think that maybe our team’s work made a positive impact for such a worthy organization.
OUTCOME
Our team presented to the client, instructor, and SVC Director. The client said that our passion on this subject showed through the work, but they didn't adopt our recommendations. However, I did notice that Puget Soundkeeper recently updated their site. It is now more simplified and less text-heavy. It has better organization, a stronger hierarchy, and has more interesting imagery. It's nice to think that maybe our team’s work made a positive impact for such a worthy organization.
“Beautiful narrative approach that brings the issue back down to water.”
“Beautiful narrative approach that brings the issue back down to water.”
“Beautiful narrative approach that brings the issue back down to water.”
“Beautiful narrative approach that brings the issue back down to water.”
— DONIELLE STEVENS
Communications Manager, Puget Soundkeeper
— DONIELLE STEVENS
Communications Manager, Puget Soundkeeper
— DONIELLE STEVENS
Communications Manager, Puget Soundkeeper
— DONIELLE STEVENS
Communications Manager, Puget Soundkeeper
— DONIELLE STEVENS
Communications Manager, Puget Soundkeeper
FURTHER DOWNSTREAM
• With the tight timeline, and despite our best efforts, we weren't able to test the final design.
• Our team kept mobile in mind as we developed the site. Because of this, it would easily adapt to mobile.
• Due to the archive-heavy aspect of the site, a metadata tagging filter would be helpful to speed user search.
• With more time, I would create an interactive timeline/map that would showcase legal action stories, and show the connection of the lawsuits and grants benefiting communities. The timeline/map could reference grant details, results, and location of communities benefiting. This would be an engaging way for visitors to learn Puget Soundkeeper’s story and the positive impact they’ve made over the years.
FURTHER DOWNSTREAM
• With the tight timeline, and despite our best efforts, we weren't able to test the final design.
• Our team kept mobile in mind as we developed the site. Because of this, it would easily adapt to mobile.
• Due to the archive-heavy aspect of the site, a metadata tagging filter would be helpful to speed user search.
• With more time, I would create an interactive timeline/map that would showcase legal action stories, and show the connection of the lawsuits and grants benefiting communities. The timeline/map could reference grant details, results, and location of communities benefiting. This would be an engaging way for visitors to learn Puget Soundkeeper’s story and the positive impact they’ve made over the years.
FURTHER DOWNSTREAM
• With the tight timeline, and despite our best efforts, we weren't able to test the final design.
• Our team kept mobile in mind as we developed the site. Because of this, it would easily adapt to mobile.
• Due to the archive-heavy aspect of the site, a metadata tagging filter would be helpful to speed user search.
• With more time, I would create an interactive timeline/map that would showcase legal action stories, and show the connection of the lawsuits and grants benefiting communities. The timeline/map could reference grant details, results, and location of communities benefiting. This would be an engaging way for visitors to learn Puget Soundkeeper’s story and the positive impact they’ve made over the years.
FURTHER DOWNSTREAM
• With the tight timeline, and despite our best efforts, we weren't able to test the final design.
• Our team kept mobile in mind as we developed the site. Because of this, it would easily adapt to mobile.
• Due to the archive-heavy aspect of the site, a metadata tagging filter would be helpful to speed user search.
• With more time, I would create an interactive timeline/map that would showcase legal action stories, and show the connection of the lawsuits and grants benefiting communities. The timeline/map could reference grant details, results, and location of communities benefiting. This would be an engaging way for visitors to learn Puget Soundkeeper’s story and the positive impact they’ve made over the years.
FURTHER DOWNSTREAM
• With the tight timeline, and despite our best efforts, we weren't able to test the final design.
• Our team kept mobile in mind as we developed the site. Because of this, it would easily adapt to mobile.
• Due to the archive-heavy aspect of the site, a metadata tagging filter would be helpful to speed user search.
• With more time, I would create an interactive timeline/map that would showcase legal action stories, and show the connection of the lawsuits and grants benefiting communities. The timeline/map could reference grant details, results, and location of communities benefiting. This would be an engaging way for visitors to learn Puget Soundkeeper’s story and the positive impact they’ve made over the years.
REFLECTIONS
One of the most interesting things I learned during this project was that initially, our team was focused on how to get people engaged in this site by reaching them emotionally. We went way down the rabbit hole on how to get people to care about the environment. In the end I realized that perhaps my own feelings on the subject were creating an influencing bias. I care deeply about the environment, and definitely so does the client. But our objective in this project was to get visitors into the site and browse.
This project also made me realize I enjoy working in smaller groups. The only thing is that the team must be extremely organized and communicative in order to stay on schedule.
One of my teammates told me that I had impressive persistence, that I will address a problem straight on, even if it's a terribly daunting one.
REFLECTIONS
One of the most interesting things I learned during this project was that initially, our team was focused on how to get people engaged in this site by reaching them emotionally. We went way down the rabbit hole on how to get people to care about the environment. In the end I realized that perhaps my own feelings on the subject were creating an influencing bias. I care deeply about the environment, and definitely so does the client. But our objective in this project was to get visitors into the site and browse.
This project also made me realize I enjoy working in smaller groups. The only thing is that the team must be extremely organized and communicative in order to stay on schedule.
One of my teammates told me that I had impressive persistence, that I will address a problem straight on, even if it's a terribly daunting one.
REFLECTIONS
One of the most interesting things I learned during this project was that initially, our team was focused on how to get people engaged in this site by reaching them emotionally. We went way down the rabbit hole on how to get people to care about the environment. In the end I realized that perhaps my own feelings on the subject were creating an influencing bias. I care deeply about the environment, and definitely so does the client. But our objective in this project was to get visitors into the site and browse.
This project also made me realize I enjoy working in smaller groups. The only thing is that the team must be extremely organized and communicative in order to stay on schedule.
One of my teammates told me that I had impressive persistence, that I will address a problem straight on, even if it's a terribly daunting one.
REFLECTIONS
One of the most interesting things I learned during this project was that initially, our team was focused on how to get people engaged in this site by reaching them emotionally. We went way down the rabbit hole on how to get people to care about the environment. In the end I realized that perhaps my own feelings on the subject were creating an influencing bias. I care deeply about the environment, and definitely so does the client. But our objective in this project was to get visitors into the site and browse.
This project also made me realize I enjoy working in smaller groups. The only thing is that the team must be extremely organized and communicative in order to stay on schedule.
One of my teammates told me that I had impressive persistence, that I will address a problem straight on, even if it's a terribly daunting one.
REFLECTIONS
One of the most interesting things I learned during this project was that initially, our team was focused on how to get people engaged in this site by reaching them emotionally. We went way down the rabbit hole on how to get people to care about the environment. In the end I realized that perhaps my own feelings on the subject were creating an influencing bias. I care deeply about the environment, and definitely so does the client. But our objective in this project was to get visitors into the site and browse.
This project also made me realize I enjoy working in smaller groups. The only thing is that the team must be extremely organized and communicative in order to stay on schedule.
One of my teammates told me that I had impressive persistence, that I will address a problem straight on, even if it's a terribly daunting one.
NEXT PROJECT
NEXT PROJECT
NEXT PROJECT
NEXT PROJECT
NEXT PROJECT