Pioneers.org
Non-Profit Website Redesign

Pioneers.org

Project
Non-Profit Website Redesign
services
Web Design, Design Systems, Information Architecture, Art Direction, Webflow Development
Pioneers.org

Pioneers needed a new website that addressed its multiple user groups and reflected its current brand voice.

Problem

While working as Art Director for Pioneers’ Marketing Team, we identified that our website (Pioneers.org) had a two-fold problem:

  1. Thousands of visitors per month, but only a very small portion were actually in our targeted user group of “goers”
    1. Most fit into other user groups not addressed on the site
    2. There was no clear user journey for these other groups of “learners” and “supporters”

  2. We had an abundance of great media and content, but not even our own workers were able to find it.
    1. Navigation was over-simplified to put forward just a single CTA: apply
    2. The search functionality was limited and didn’t deliver an efficient way to access all of the content.
    3. There were no small or intermediate steps of engagement opportunities

Additionally, the brand had evolved since the last iteration of the website was launched, so a refreshed design was necessary to convey a richer and more cohesive brand experience.

Solution

We needed to re-envision our website as a full-fledged marketing tool instead of a brochure for people to join our organization.

  1. Mega-menu-style navigation that features all facets of our media and resource library
  2. Multiple, clear on-ramps for engagement

To address these issues, we created a plan:

Review and categorize all content

Various collections of content grouped into categories

We conducted a content audit to identify all of our existing content as well as where potential new content could help fill holes and garner some quick wins with users. Trends quickly emerged related to actions and user groups.

Define all user groups

Learners, Supporters, Goers

The content audit helped us understand that users who visit our website can be divided into three groups of action-takers (these are not mutually exclusive groups): Learners, Supporters, and Goers. From here we created a content strategy and information architecture that guides users to the relevant content that can move them toward greater levels of engagement with Pioneers.

New Website Design System

Thoughtful, purposeful color palette.

A color system with three color groups as a subtle nod to the three primary groups of action that users can take.

  1. Blue: Learn (learn about Pioneers, learn about missions, etc.)
  2. Yellow: Support (pray, give, partner)
  3. Red: Go (become a missionary)
Example of how color helps categorize content and actions

Updated typography

Updated typography with clearer hierarchy that better reflects Pioneers’ brand voice and tone.

Iconography

A versatile icon set that can appear as 1 color or duotone depending on usage and context.

Navigation

Exponentially expanded navigation as a “mega-menu” to present key resources by category and help users realize their purpose for visiting.

Example of a menu panel

Simplified menu on product pages that only presents a primary call to action, but also offers user the option to return to main navigation.

Simplified navigation on a product page. Clicking the grid icon on the right of the navigation toggles the navigation between regular nav and simplified product nav.

Rich search feature with filtering capabilities.

Customized, reusable components and resource templates.

Call to action component with slots to change text, photos, and links.
Form component with various fields and and options.

SEO

Focused effort to interlink content for greater SEO performance and more time spent accessing helpful content.

Sidebar component on articles and other resources that points users to key content
Next Steps component on articles, videos, photo essays and more that provide deliberate action steps for users.

Sub-Brands

A sub-brand system for key products and categories of information. Sub-brands are color-coded and help clearly identify various offerings and products for users.

Homepage

Homepage hero section

We created a new homepage design and strategy that guides user toward action, presenting different paths. The updated header section of homepage features clear, direct language and video reels from around the world to help set the mood of our brand and add eye-catching motion.

To check out the entire website, visit Pioneers.org.

Interested in working together?

Let's chat.

get in touch