NORTON BAY WATERSHED COUNCIL

Promoting donation with improved information hierarchy and content management

Duration
9 weeks
(Feb - Apr, 2023)
Team
Me, UX/Product Designer
Jihye Bang, Front-End Developer
Hal Shepherd, Stakeholder
My Roles
Responsive website design
Brand system
Mockup design
Usability testing
User interview and survey
Design hand-off
Uploading contents training
Tools
Figma
Adobe Creative Suite
Dovetail
WordPress
ChatGPT
Midjourney
Google Analytics
Norton Bay Watershed Council, a non-profit organization in the North Bering Sea region, aims to protect their local water and resources from the impacts of climate change.
To enhance their mission, I collaborated with front-end developer Jihye Bang to revamp the website. Our focus was on facilitating fundraising efforts and providing an easy-to-update platform for the council.
Tribes depend on subsistence hunting and fishing as sources of nutrition and cultural practice.
Costal erosion due to climate change.
Local wildlife die-off
Problem

Climate change threatens Norton Bay locals' sustainable lifestyle, while awareness is limited.

Solution

Engage visitors with ever-updated project gallery, highlighting subsistence tradition's value, and compelling call-to-action.

What I accomplished

Implementation of clear calls to action, resulting in a 30% increase in donation interest

WordPress admin panel with a content management guideline that saves content management time from 2+ hours to 25 minutes

Streamlined and prioritized content, resulting in improved comprehension and increased time spent on the website

Go to the website

Landing Page

Before & After
Impactful intro

Visually appealing hero section showcasing the watershed and subsistence resources

Donate anytime

A sticky donation button for easy access and convenience

Digestible text

A catchy headline to effectively communicate key messages to users

Subsistence explained

Annotations and photos showing the community’s subsistence lifestyle and emphasizing its value

Before

After ✨

Our work

Before & After
Ever-updated project gallery

A visually engaging project gallery that showcases the council's work and allows users to filter by ongoing and past projects

Streamlined content upload process

A user-friendly system for posting and updating projects that makes it easy for the council staff to keep the page current and relevant

Before

After ✨

Get involved

Before & After
Engaging 'Get Involved' instructions

Clear and concise instructions on how to get involved, with brief descriptions, compelling visuals, and a prominent call-to-action to encourage engagement

Minimized maintenance

This solution is ideal for the council as it does not require any website updates, while still motivating users to get involved

Before

After ✨

DESIGN PROCESS
DESIGN PROCESS
DESIGN PROCESS
DESIGN PROCESS
DESIGN PROCESS

User research

My research was to understand the target audience's motivations and behaviors in order to improve engagement and drive action on the website.
Target audience
TARGET AUDIENCE 1

Tribes in the Norton Bay & North Bering Sea region

TARGET AUDIENCE 2

Environmentally-minded individuals

Research objectives
User Interview & Survey

Reach out to the target users to understand their preferences, pain points on the current design, and motivations to take action

Competitive Analysis

Collect patterns and analyze other environmental organizations' websites to identify best practices and areas for improvement

Expert Concultant

Seek advice from a subject matter expert to gain insights into the target audience's motivations and behaviors

Key takeaways
Unfamiliar with subsistence practices

Many users outside of Alaska are unfamiliar with the concept of subsistence fishing and hunting practices.

Text-heavy site causes high bounce rate

The current website lacks of visualized information and contains heavy text, which causes high bounce rate.

Limited impact and transparency info

Users can’t find information about council's impact and transparency, which causes hesitation on donation.

Insufficient involvement details

Details on how to get involved is insufficient, which feels like “there is not much I can do for them”.

High importance of campaign updates

89% of participants answered that it’s important to see updates on current campaigns and events.

Interest in volunteering and donating

26% participants were interested in volunteering and 15% in donation, although some of them showed more interests in local activities.

Technical research

During the research, we focused on identifying feasible solutions that would meet both the needs of our user and the council.
The team reviewing WordPress-based website and discussing problems
Spoiler ⚠️ - Project gallery preview (operated by Semplice, our choice of WordPress editor)
Constraints
Keep WordPress

The website was built in WordPress, and the council didn’t want to switch it.

Budget

We want to find solutions for the council without extra monthly subscriptions for plugins.

Make it easy

After website overhaul, the council staffs should be able to follow up updating.

Minimize Maintenance

The council doesn’t have a designated office or a technical staff to update website everyday.

Our decision
We ultimately chose Semplice as the WordPress editor for the website.

This editor provides easy website editing, customized blog settings, and a project gallery, with affordable lifetime payment options and video tutorials. By choosing Semplice, we provided the council with an affordable and user-friendly solution for updating the website.

Scoping

While there were many great solutions found during the research, it was important to consider the council’s capacity to manage them, as they do not have a designated office or a technical staff to update the website everyday.
After discussing their priorities and capabilities, we decided to focus on solutions that require minimal regular updating and align with the council's advocacy projects.

Logo Redesign

Brand System

To maintain the existing brand identity, we decided to keep the waterdrop symbol, but added elements such as mountains, rivers, and waves to give it a more natural and watershed-inspired look.

Color and Typography

Brand System

The council requested an overall blue color scheme, but we faced challenges in implementing this due to heavy text content on the website. To maintain legibility, we opted for a light grey and light blue background, with blue accents for the branding.
Additionally, we chose neutral, san-serif fonts with a high x-height for optimal legibility.

Mockups

Based on the mood board discussion, we created sketches and high-fidelity Figma mock-ups with 6 screens. Despite limited pictures from the council, we aimed to deliver a scannable structure with catchy headlines.

Usability testing

I conducted moderate usability test via Zoom call with 5 participants who are in our target audience group.
During usability testing, participants were asked to browse the website and think aloud. We sought feedback on the website's effectiveness in communicating and engaging visitors, as well as participants' opinions on the local area and climate change.
Pre-test Script
Usability Testing Questions

Iteration

Landing page

Although visually appealing, the previous landing page lacked clarity in conveying the council's core value of protecting local water resources and Alaskan tribes' subsistence tradition. To address this, we revised the hero section and added more visual and textual cues to emphasize these important aspects.
Furthermore, we improved the button design to make it clearer, enabling better and more effective calls to action.

About us

Despite limited photo resources, we made the council introduction highly visual.
The map now aligns with the website design and offers clear enlarging signs. Additionally, we transformed the description section into organized cards and icons for easy information scanning.

Design handoff

The design handoff was smooth and efficient, facilitated by sharing the Figma design file with clear annotations.
Together with the front-end developer, we established global rules for sizing, typography, and gaps, streamlining the process for different viewpoints.

Uploading contents training

At the end of the project, we provided a manual and a training session with the council staff to demonstrate how to update blog posts and the project gallery.

Go to the website

Stakeholder feedback

Other projects
Other projects
Other projects
Other projects
Other projects
Other projects
Other projects
Other projects
Other projects
Other projects
Other projects
Other projects

Designed an Android mobile app with a focus on helping teachers track daily agendas and student performance with the goal of closing the gaps in foundational skills

Coming Soon
Designed a foundational Android app design system, unifying aesthetics, sizes, and spacing to enhance team collaboration and facilitate streamlined handoff documentation.