The Problem

The Canopy Awards is Casey Trees’ annual fundraiser that pays tribute to urban forestry leaders and brings in new volunteers, partners and donors. This year’s theme was Roots to Rivers, emphasizing the symbiotic relationship between trees, waterways and people. In previous years, information about the event was spread among various pages on their main site – diluting the message and impact. Casey trees needed a microsite with its own bold branding, colors and tight focus to boost ticket sales and increase sponsorships.

Users & Audience

This is Casey Trees’ way of thanking current volunteers while bringing in fresh support from professionals of all ages in the D.C. area who may or may not have an interest in getting dirty and spending time outdoors.

Research

First I asked Casey Trees to list 5-10 event microsites to get a sense of the style and layout they were looking for. Afterwards we did a couple rounds of user and cross-browser compatibility testing to ensure the site was user friendly and responsive across all devices.

Challenge

The design had to stand on its own but also relate to the Casey Trees overall brand. This project had a quick turnaround time of a little over two weeks.

To create continuity I used the same typeface as the Casey Trees website and maintained the dimensions and logo of the main navigation so that users could easily navigate between the two sites. To speed up the development process I used bootstrap as our front-end component library.

Concepts

Based on our research and requirements I created three wireframes that included lightboxes and modules that provided quick access to extra content detailing the honorees, sponsor benefits and ticketing information. The first iteration put the honorees front and center – encouraging the user to learn more before delving into ticket details. The second put the tickets closer to the top of the page for those who were already familiar with the event or had seen photos on social media. The third elevated the highlight reel to give first-time users a powerful visual.

User Interface Design

The objective of the interface was to keep the microsite current and unique to an urban forestry fundraiser. This was accomplished through the use of rounded corners, vibrant colors and sleek but playful icons. Color transitions and subtle wave movements allude to the interconnected processes that sustain D.C.’s natural ecosystem.

Outcome

The microsite was well received internally and Casey Trees hit a record for highest attendance rate for any event. Sponsorships and in-kind donations were up, as were page views and video views.