Chat with us, powered by LiveChat
Menu Search

PennFuture

Rebranding, Logo Design, Custom Website Design & Development

PennFuture came to our team with a dated website that housed a wealth of information but lacked intuitive organization and design. Our Blue Archer team worked through a digital strategy, complete rebranding including logo redesign and print marketing, custom website design, and the development of functionality to engage audience and stakeholders. 

www.pennfuture.org

nonprofit website personas

Project Strategy Foundation

Our strategy phase began with a meeting in PennFuture’s downtown Pittsburgh headquarters where we reviewed their organization, value-proposition and differentiators, business and website goals, 12 month strategic plan, and more.

One of the most important focuses in the initial phase of the strategy was to establish and develop site-user personas. This helps our team to ensure the information architecture, design, and functionality are user-centered. Our marketing team developed several key personas including the Millennial Enthusiast, Seasoned Environmental Activist, Policy Maker, and more. We defined demographics, interests, website content interests, website goals, and other variants that helped to build a clear picture of PennFuture’s audience.

One of the biggest challenges of the project strategy was overhauling the sitemap. The original sitemap was not only confusing but also lacked clear user-journeys and goal funnels. Our marketing team conducted a closed card-sorting usability activity with the PennFuture team. This activity involves the interactive organization of topics into categories and sub categories. This activity builds the initial framework of the sitemap before we ultimately use the personas, user-journeys, competitor research, and additional analysis to define the final information architecture.


Prototypes and Content Direction

Once we established the architecture and audience, our team moved on to developing layout wireframes and prototypes. This step allows our team to establish content areas and map user-journeys and clear paths for users to complete unique website goals. Our team created prototypes of the homepage as well as all of the internal pages including priorities, news, blog, and more. Building a wireframe for each template facilitates the design phase because all of the content needs and areas are already defined.

non profit website wireframes

Logo Redesign

The first step for our team to visually rebrand PennFuture was to completely redesign the logo. Unlike many other environmental organizations, the name PennFuture does not communicate the type of organization to people who are unfamiliar with the brand. Therefore, it was important that the logo include a visual logo mark to help contextualize the environmental space in which the organization works.

The initial concepts included universal symbols for the environment including leaves, water, plants, and the sun. Although the marks were visually strong, we determined that the marks did not adequately differentiate them from other environmental organizations.

Searching for a way to fluently communicate energy, we transitioned to a whimsical mark concept that illustrates a fluid spiral of abstract leaves. The spiral shape of the mark resembles both a rain drop and a wind mill, helping to manifest the theme of energy.

Style Guide Development

When an organization rebrands, it’s extremely important to establish design guidelines to ensure a cohesive presence across all platforms – both on and offline. We created a style guide so the PennFuture team would have a standard reference that explains how the new brand works in varying applications. It clearly defines logo use, color palette, typography, imagery, imagery, and more.

Website Design

The design needed to convey the organization’s accomplishments related to issues of the energy economy and environmental justice in Pennsylvania without alienating users who may not fully support a progressive clean energy agenda. Our team of designers utilized the comprehensive persona profiles to help guide the look and feel of the site.

On the homepage, our design team worked to create a masthead image slider that would highlight rotating, key messages and a static featured announcement without overshadowing the photography. Once a user scrolls they are provided with a very clear overview of PennFuture’s four core priorities, evidence of legal and policy work, opportunities to engage with social media and explore the blog.

Blue and green hues from the logo dominate the color scheme throughout the site. However, the contrast of the warm coral-orange color for link buttons and other calls-to-action helps to draw the eye towards engagement entry points.

Balancing Imagery

The varying levels of site-user sophistication revealed in the development of personas proved that the design needed to initially captivate users with imagery. The website incorporates beautiful views of pristine, seemingly untouched Pennsylvania landscapes. However, PennFuture also needed to clearly communicate the devastating effects of pollution, dirty energy, and climate change. Ominous, paradoxically stunning imagery of environmental destruction juxtapose the healthy landscape views.

bill and legal tracker on website

Interactive Bill and Legal Trackers

In showcasing PennFuture’s work on the website, it became clear that we would need to design and program an interactive bill tracker. This bill tracker, available on the policy section of the site, enables site visitors to learn about current bills and regulations. It educates users with a brief description overview, the origin of the bill, the status, and PennFuture’s official position. Through the content management system (CMS), PennFuture employees can easily update existing bill information or add new bills.

PennFuture also needed a tool to communicate their legal work. Similar to the bill tracker, the legal case tracker enables individuals to review case descriptions and updates for current cases, victories, and archived cases. The case tracker is equally simple for the PennFuture team to manage and update in real-time using their CMS.

Donor Management Integration

PennFuture knew they wanted to switch donor management platforms when they originally came to Blue Archer. We provided consulting services to assist with the decision making process and transition to a new management platform. Once the new donor management platform was selected, we integrated the platform with the new site, allowing for seamless form submission and monetary donation functionality.

Resources Database

For PennFuture’s target audience, education and developing a deeper understanding of issues facing PA ignites action. Therefore, one of the largest goals for the site was to better educate PennFuture site users. Our developers created a resource library to allow site visitors to filter resources by category including reports, videos, fact sheets, and more.

PennFuture staff can add new resources at any time by uploading a new file or content and associating it with a category and tag. Admin can also encourage additional user engagement by adding related resources at the bottom of each resource page by simply selecting similar resources in the multi-select database within CMS.

The new site also includes a custom blog that enables users to filter by category and tag, review featured posts, explore specific topics using a search bar unique to the blog.

resources database nonprofit

Conclusion

Following the rebranding and website redesign project, PennFuture is now equipped with a captivating visual brand presence and a website that highlights the core areas in which the organization works, communicates the measurable work and progress, and most importantly engages users to help build a sustainable future for Pennsylvania.

Questions?

We're always happy to hear from you. Use our contact form, or just give us a call: 412-353-1050

Start a Project

If you have a project in mind and would like a proposal, we'll need a few specific details. Head over to our project inquiry form.

Request a Proposal
How to Choose a Web Design Company

How to Choose a Web Design Company

How do you know you’re selecting the right web design vendor? This guide will help you navigate the vendor selection process, ask the right questions, and select a strong partner for your digital marketing efforts. 

Download Ebook