Designing for Fundraising: The Delightful Tale of Dapper Fox

Mozilla

This November, the Fundraising team began implementing a number of designs for the 2015 EOY Fundraising campaign in order to promote Mozilla’s nonprofit message and draw financial contributions from supporters across many countries. With design direction led by Mozilla Foundation designer, Jordan Gushwa, the visuals of the campaign focused on giving Mozilla’s supporters a playful visual link to our nonprofit mission. To illustrate this, graphics included recognizable Mozilla motifs in the use of hearts and the introduction of our dazzling ‘Dapper Fox’ character, illustrated by fellow Mozilla Foundation designer, Kristina Shu.

An image of the Dapper Fox illustration designed by Kristina Shu of the Mozilla Foundation.

Dapper Fox

The Development of Dapper Fox
Originally illustrated by Kristina a few month prior to the 2015 End of Year kickoff, Dapper Fox has had a mini evolution while spreading across multiple Foundation designs. Initially, the friendly fox illustration was digitally drawn to provide a teaching opportunity for Mozilla’s existing X-Ray Goggles site. From there, he gravitated in both appearance and location to the current EOY designs through Jordan’s design direction.  In regards to the campaign, Dapper Fox provides an evolved take on Firefox designs that harken back to prior Mozilla illustrative explorations with an approachable, friendly, and appreciative spirit. And while the fox across the 2015 campaign was intended to explore an alternative version and use of a recognizable Mozilla motif associated with the existing Firefox visuals, he has now moved on to potentially being continued through future Mozilla Corporation and Foundation projects. Dapper Fox can even provide a parallel to the way the Mozilla Foundation designers are hoping to continue pushing forward within their design work: by experimenting with styles and sharing skills and resources in an open and interdisciplinary design environment. My hope is that Dapper Fox’s use will further inspire the development and use of illustration throughout future Mozilla Foundation projects while having our design team consider how prior, shared work can evolve into something much more than previously thought or expected.

dapperfox_images_blog-06

For the overall campaign, specific design outcomes included directory tiles for the Mozilla tile page (the linked item grid when you open a new tab in the Firefox browser), both social share and post donation graphics for Facebook and Twitter, and an upcoming ‘Spectacular Snippet’ takeover—soon to be seen live at the end of December and housed within the Firefox browser’s search homepage. Dapper Fox also makes his first appearance across multiple designs within the EOY campaign.

Tiles Example

dapperfox_images_blog-03 EOYTilesUpdated_FINAL_v2-6

Content Strategy and Localization
Content strategy—facilitated by Andrea Wood, Erika Drushka, Tim Murray in Brand, and many others from Mozilla’s Marketing Team— across the multiple design materials also played a significant role in the approachability and tone of the campaign’s visual language. It was necessary to reflect the friendliness of the content within the designs, while also considering the factor of localization when designing for multiple supporters at an international scale. Many of the visual design opportunities additionally offered the chance to include copy that promoted an understanding of the relationship between Mozilla and Firefox (particularly for supporters unaware of the connection). Both the content and the subject of localization were visually implemented by the Mozilla Foundation design and campaign team in the finalized EOY designs.

dapperfox_images_blog-07

With the use of Dapper Fox, hearts, and warmer colours, appropriate content strategy, and localization, the EOY designs were intended to be:

  • Visually cohesive across varying platforms (e.g. Mozilla, social media)
  • Simplified in order to be formatted for varying countries and languages (thanks to localization support from Ali Al Dallal and Mozilla’s incredible L10N community)
  • Friendly and approachable across multiple demographics and regions
  • Shareable across social media platforms in order to promote Mozilla’s fundraising efforts
  • Visual communication instead of relying solely on language, which helps to accommodate multiple languages and understanding

With roughly one week remaining in the campaign, Dapper Fox will be making more appearances across Mozilla’s homepage, Facebook, and Twitter. Keep a lookout for him!