Washington’s National Park Fund

website redesign

project role

SVC student 

UX designer

Visual designer

process

Client interview
Competitive analysis
 Personas
User journey
Site map
 Wire frames
Mood board
Style board
 UI library 
 Prototype

TOOLS

Sketch App
 Invision

BACKGROUND 

Washington’s National Park Fund (WNPF) is a non-profit that raises money to support the three largest national parks in Western Washington. They are the official philanthropic partner of Mount Rainier, North Cascades, and Olympic National Parks. The money raised by WNPF helps fund 50-75 projects annually in these parks.

business problem 

WNPF needs a website redesign. Their current site is outdated and not mobile friendly. In order to encourage users to engage and donate, they need to make it easier for users to understand the organization’s purpose and its activities.

AUDIENCE

At present the audience for the WNPF website is current donors, potential board members, corporations, foundations, volunteers, Washington state visitors, and out-of-state visitors to the three parks, and people who love the parks and enjoy their experiences. WNPF would like to attract a younger audience who shares information on social media.

PROCESS

RESEARCH

Client interview to find out pain points, goals, and history behind the current website.
Competitive analysis of other non-profits and national parks to compare visual language and content.

personas and user journey

Personas to learn an individual’s motivations, goals, and pain points on the WNPF website.
User flows (user journey) to learn users’ wants and needs on each page/screen based on their goal or task on the website.

approach

proposed SITE MAP

Redesigned and simplified to answer the WHO, WHAT, WHERE, HOW, WHY questions up front. The home page’s top navigation was rearranged to say “What We Do,” “Get Involved,” “News,” and “About Us.”
Created individual pages for each national park and each area of focus WNPF supports.
Moved the donate button to the upper right corner of the home page to stand out and help secure donations.

mood Board

Collected images that show Washington’s National Parks at both a distance and up close. They represent the experience of being there. Handwritten font is used to illustrate personal stories shared on the website.

Style Board

Cards: modular and easy to reorganize on pages based on content. They offer flexibility on the site and make it easier to add and subtract content.
Colors: WNPF’s green logo colors plus blue to balance out the color palette, which is based on nature. Yellow and bright green are the accent colors and are used for buttons and to motivate action.
Google fonts: Source Sans Pro and Merriweather were chosen to offer access to free fonts.

solution

design GOAL: inspire visitors to donate

Built a case on each page with facts, images, and quotes showing why WNPF needs donations.
Placed a “Support your parks” CTA (call to action) button at the bottom of every page to encourage donations.

visual elements: engage the user

Used progressive disclosure to simplify the presentation of information to the viewer. In other words, users are offered a small amount of text and a link to more text so they can decide if they want to read more about that topic.
Added three new sections — “Your Dollars at Work,” “Success Stories,” and “Why I Donate” — to showcase completed projects that could not have been possible without donor support.
Created a filter to help a user find projects, stories, and blog posts based on their own personal interests.
Included current projects that need funding by giving each one a page with a description and how much money is needed to fund that project.
Designed a color-coded filter with the option to select stories and projects based on the completion status, location, and area of focus.
Created an opportunity to personalize the communication from WNPF to website users to sign up for email alerts about projects, blog posts, news, events, and volunteer opportunities based on individual interest.
Included in the footer of every page an opportunity to sign up for newsletter.

home page scroll: desktop + mobile

3 MOBILE SCREENS = 1 DESKTOP PAGE: MOUNT RAINIER, FILTER, AND RESULTS