"[This] new NationBuilder website will revolutionise the way we can interact with our voters and supporters." –Nick Clegg, Leader & Deputy PM

Our redesign of the Liberal Democrats Federal Site goes far beyond simply skinning NationBuilder's core functionality. Built from the ground up, it's the result of a deep collaboration between Liberal Art and the LibDem Digital team. Despite being over 1000 pages, this isn't a brochure site with a few signups and content that lays there; it's designed from the ground up around action.

It has almost 2 dozen simultaneous campaigns based on supporter affinity and past interaction. It's built to constantly manually and automatically update its calls to action based on user data. Within 36 hours of launch, the LibDems had already created a new cycle of asks based on breaking events and had rolled them out across the site as actions, content, and a social media campaign.

Introducing the Dynamic Engagement Ladder

Rather than shot-gunning users with random rotator asks and buttons, the main hero is a curated engagement ladder that adjusts based on user data. Asks are managed by the Digital Team to shepherd users up successive rungs. Below are three steps shown as a user progresses.

Easily updatable data-driven content is possible because of NationBuilder's combined CRM/CMS. In this case, after signing onto the debate petition, users are pushed to a debate-specific donate ask and then a follow-up that acknowledges their earlier donation.

e-ladder-1.jpg
e-ladder-2.jpg
e-ladder-3.jpg

Fully Responsive not just dumbed-down Mobile.

Mobile users get the full site experience and more importantly, the strategic needs of the organization aren't hobbled on some devices. This degree of responsiveness was previously almost unattainable, but the design was one of the first major sites optimized using Adobe Reflow to live design across breakpoints. 

Below is one of the 15 landing pages in its native viewing frame for desktop, tablet, and phone. These aggregate content, news, and actions for both issues and campaigns. Each of these issue or campaign pages also has its own engagement ladder for list-building and fundraising as well as a feedback channel for constituents.

issue_1280.jpg
issue_768.jpg
issue_320.jpg

The most dynamic content on NationBuilder

ld_agg_page_ex.jpg

This was also the first project to incorporate the ability to cross tag large numbers of pages into any number of aggregated displays as the functionality was added at our request. A single page for a campaigns could exist as an email/social landing pages, an action page under Get Involved, and a breaking news issue page. Several of these customizations would be easy in a CMS like Drupal but required significant workarounds in Nationbuilder. But others leverage NationBuilder's unique advantages as a combination CRM & CMS and aren't possible on any other platform.

a. Hero images and separate page preview images.
b. Tag-based subnav for multi-parents pages.
c. Freeform main body for a range of content.
d. Latest aggregated from news, press, etc.
e. Page-specific multi-step engagement ladder.
f. Featured actions vary per page.
g. Feedback mechanisms per issue/campaign.

libdems-tags-1.jpg
libdems-tags-2.jpg

Content creation and maintenance is eased by allowing hundreds of items, such as people profiles, campaigns, news to appear in multiple categories. For example, an MP might also be a Cabinet Member, Minister of State, of Committee Chair but have a single profile shared across categories.

Powerful Functions for Members

The site includes a large members only section that includes specialized news, resources, and training materials. There are more than 30 training courses alone segmented by platforms, goal, and user type.

Building these courses out as NationBuilder surveys enabled testing knowledge of the materials, monitoring interest, and crediting user's profiles for module completion.

members-1.jpg
oskar-1.jpg
oskar-2.jpg
Hero Image: