Menu

ChildFund

Growing a flexible web design system for progressive children’s charity
ChildFund – Growing a flexible web design system for progressive children’s charity // Benek
Date
2016
Client
ChildFund New Zealand
Agency
Lushai
Responsibilities
  • Interactive Art Direction
  • UX Design
  • Responsive Web / UI Design
  • Ecommerce Design
  • Interaction Design
UX Design
Matt Gould / Lushai
Development
FourthMedia

A unique design solution for a challenging market

Matt Gould from Lushai got in touch with a unique design challenge for me to tackle. His client, ChildFund New Zealand, was desperate for a new website, but their requirements were far from ordinary. Unlike ecommerce design, selling a charity and capturing donations in an environment competing hard for your philanthropic dollars is more about storytelling than products, features, or specs. You need to capture emotional attention, and convert people to believe in your cause with passion.

To complicate matters, ChildFund was very forward thinking in their approach to website conversions. They didn't want to settle for the best assumptions and common sense solutions, even if those came from respected experts in user experience and interface design. They wanted a flexible design system that would allow them to test, tweak, and adapt their content structures over time as they ran their own A/B tests and continued to learn more about their ideal customers.

My resulting design solution was a comprehensive pattern library and interaction styleguide that laid out a platform for their own editorial design explorations, while maintaining a strong, consistent, on-brand look that would be the first step in a refocus and renewal of their entire communications effort across web, EDM, and print.

ChildFund – Growing a flexible web design system for progressive children’s charity // Benek

Refining the digital brand

ChildFund was going through a bit of a brand identity crisis. Their previous website was a too chaotic, childish, and difficult to navigate. Much of their other marketing material is wildly inconsistent with a mixture of typefaces and styles – without clear branding guidelines and nobody enforcing them. To complicate matters their national and international brand guides didn't always agree.

My first challenge was to adjust and consolidate their digital branding so it better reflected the boldness, tone and voice of their communications. Colours were refined. New typeface pairings were chosen. Imagery guidelines were clarified and icon styles redefined. This set the platform for a successful, flexible web design strategy.

ChildFund – Growing a flexible web design system for progressive children’s charity // Benek

Credible storytelling

Charity is all about storytelling, and establishing trust and credibility. Our design challenge was to create a look and feel that was serious but approachable; representing children, but not looking childish. We used strong imagery combined with bold text in a mixture of adaptable layouts that would give ChildFund refined editorial control over their content presentation and media, so they could find the most compelling ways to tell their life-changing stories.

ChildFund – Growing a flexible web design system for progressive children’s charity // Benek
ChildFund – Growing a flexible web design system for progressive children’s charity // Benek

I worked with Lushai and ChildFund to challenge and refine the user experience design to make this process as enjoyable and intuitive as possible. This involved testing the tweaking the navigation, defining visual styles to distinguish various content types, allowing for searching and filtering to aid deeper exploration, and simplifying the calls to actions and donation process. This resulted in an interface that is very digestible and retains a consistent look and feel while remaining extremely flexible and adaptable.

ChildFund – Growing a flexible web design system for progressive children’s charity // Benek
ChildFund – Growing a flexible web design system for progressive children’s charity // Benek

Authentic and sensitive

Another unique challenge was maintaining the authenticity and sensitivity required when working with disadvantaged children as subjects. Extra care was taken to allow imagery and text to accurately and honestly reflect these children's often dire circumstances without being sensational or exploitive. We wanted to make sure their personality and stories had a voice even when they were disconnected on the other side of the world, as well as ensuring contributors that their donations were being used responsibly.

ChildFund – Growing a flexible web design system for progressive children’s charity // Benek

Mobile optimisation

The mobile experience was a high priority from the start. While my design process was not technically "mobile-first", it considered the implications of each design decision on all potential screen sizes and devices. This generated a very well thought-out mobile experience that many of the team actually preferred over the desktop equivalent due to its forced design simplicity and focus.

ChildFund – Growing a flexible web design system for progressive children’s charity // Benek

Documentation for the unknown

Uncommonly, the user experience and interface design for this project was extremely separated from the web development process. In fact, my work was complete before ChildFund had even chosen a technical provider for the website development – eliminating the option of design iterations based on developer feedback, or close communication and feedback to maintain design quality control and accuracy. This created an unusually strong need for extensive documentation which I provided in the form of a comprehensive design pattern library and interaction styleguide. 

My atomic design approach to the project aided in this type of robust definition and documentation, which included definitions for: column and layout variations; type, heading, list, link, and button definitions; common index list and image grid layout patterns, content styles, and alignment options; comprehensive form input and control guide with interaction states; header and navigation variations for logged in members; sub-navigation and mobile nav options; tags, modals, calls to action, and other common content patterns; and much more.

This precise level of documentation removed as much guesswork as possible, providing a thorough reference for front-end developers to maintain their own quality control when the channels for communication were limited.

ChildFund – Growing a flexible web design system for progressive children’s charity // Benek

More Work