project case study

Terra Centre Website Design & Development



The Challenge

Terra Centre’s Communication’s Department came to Paper Leaf frustrated with the content management experience of their existing website. As well, the feel of their site didn’t communicate the values of the non-profit, and didn’t translate well across all devices. We were tasked with solving all of these problems: how can we design a unique site that reflected the brand, while empowering them with an enjoyable and powerful content management experience?

The Solution

Through close work with their talented SEO agency (and our pals), Bluetrain, we identified who Terra’s audience was, in what context – both emotional and technical – they’d be accessing the site, and what the site would need to do to help them. This user-focused approach helped pave the way for a custom, responsive website built on WordPress – one with custom social media integration, a unique “Campaign Mode” to drive fundraising, and much more.

Key Project Features

  • User Personas
  • Content Strategy
  • Wireframing
  • Website Design
  • Responsive Design [View]
  • Customized WordPress CMS
  • Custom Social Media Integration
  • Multiple Unique Page Templates
  • Custom Campaign Mode
  • Search-Friendly Implementation

The Details

Often, the reason we’re pulled in to projects is to solve two connected problems: a poor project management experience, and a subpar or off-brand visual experience on the front end. We say “connected problems” because, often, the quality of the content management implementation – they’re not all equal – informs the quality of the front end experience. That’s where Terra Centre’s old website was at when we were brought into the mix. If we could solve these two main problems, and work with Terra & their SEO partner (Bluetrain) to further expand the awareness & understanding of Terra’s services in the community, the project would be a success.

Understanding the Audience

Every proper website redesign starts with understanding, on a deep level, the site’s audience and users. Terra Centre’s audience is a unique one – they’re a non-profit that works with teen parents. Further to that, they have municipal and organizational partners; the site needed to speak to them too. Overall, we needed to communicate the services Terra offers, the stories of their success, and drive more donations. Considering the core audience – teen parents – social media integration and mobile performance & presentation were of utmost importance. We captured all of this information through our user personas and content strategy efforts. These efforts, in turn, helped solidify and further the great site architecture work Bluetrain provided.

website prototyping

Having gone through the discovery portion of the project, the next stage was to start outlining the various display patterns we could potentially use within the site, while copy was being finalized. The site had a large variety of content types – news, events, campaign data, donation content, Instagram feeds, services, and much more. That meant a flexible and wide-ranging system needed to be designed, then integrated intuitively into WordPress to make for an enjoyable content management experience.

A variety of wireframes, potential page layouts, and display types were produced, discussed, and improved through iteration. Informed by content along the wireframing process, we moved into visual design and development. Visually, we followed Terra’s brand guidelines where they existed, bringing in their bold green & orange colour palette, and supplementing it with impactful photography – images of the people Terra’s services have positively affected.

non profit responsive website

Once we iterated through the visual layer with the team, it was time to move on to development.

Customized Content Management

Terra’s new site runs on a customized WordPress install. What does this mean? Terra gets all the strengths WordPress brings to the table when it comes to simple-but-powerful content management, but improved for their specific, custom needs. No wrangling HTML through a post editor; automated styling through the CMS; a modular approach to design to account for highly flexible content; customized post-editing screens for complex page layouts; and more.

One of the more unique elements in the build is what we dub Campaign Mode. In the discovery stage, we learned that while we needed to clearly state what Terra does and for whom (and quickly direct those people to where they needed to be), there was also a frequent use case for the donation campaigns Terra runs. These donation campaigns are somewhat infrequent – they happen a few times a year, so they don’t warrant a permanent spot on the home page. However, they’re hugely important when running. How could we balance these two needs in a unique fashion, given limited screen real estate?

That’s where Campaign Mode comes in.

campaign mode

Campaign Mode is a feature we’ve built within WordPress, unique to this project, that allows content managers to select one of two unique visual presentation models. By selecting “Campaign” mode, the entire top half of the home page changes in layout, content, and presentation, to a version of the home page better designed to communicate campaign-specific content. This way, Terra Centre can have their cake and eat it too: they have a version of their home page that’s suited to their standard communication needs 80% of the time, and the ability to change it up for the all-important other 20% – when it’s fundraising time.

On top of Campaign Mode, there are a bunch of other noteworthy development items within Terra’s website. A dynamic Instagram grid was developed to show Terra’s ongoing efforts in real-time; contact forms that use Ajax for easy & accurate tie-ins to Analytics Goal tracking; a variety of custom post type development for simple content management, and much more. As per usual, modern web languages & practices were used, from version control through performance optimization and more.

Wrapping it Up

The site launched in late summer 2015, to much positive feedback and increased engagement. Post-project launch, we continue to work with Terra on their new site – building in extra features requested by their audience as well as the in-house content team. It feels good to do good work for good people who also do good work, and that gets compounded when the overall project is a success.

When Terra began looking into a complete website redesign, we realized we would need a site tailor-made for our unique needs. As an organization with a wide range of services and multiple target audiences, we required a website that could meet a spectrum of uses while maintaining user friendliness and functionality. Paper Leaf took the time to understand our organization and the people we wanted to connect with. They took a major project and broke it down into clear, coherent steps that helped us visualize the end product before we could see it. They offered extensive experience in WordPress, mobile-friendly site design, and social media integration, which were determining factors for Terra in choosing a web designer. Throughout the entire process, the Paper Leaf team was collaborative and interactive – providing options, welcoming feedback, and keeping open dialogue. We couldn' be happier with the final product & our choice to work with Paper Leaf!

Danielle Higdon

Coordinator Public Relations and Communications, Terra Centre

contact us

Let's make something amazing together.

Interested in working together, or maybe just having a conversation? We’d love to hear what you have in mind, and answer any questions you might have. Let’s make whatever’s rolling around in that brain of yours happen.

Onwards to view The Next Project →