Not long ago, Radish Lab launched a new website for American Promise (AP) which we built using NationBuilder, our favorite cause-oriented CMS. Chris, one of Radish Lab’s awesome web developers who was in charge of building the new site, has the lowdown on how he harnessed NationBuilder to make a website that offers so much to its visitors:
Why we chose NationBuilder to power the American Promise
The Radish team could tell from the start that NationBuilder was the ideal CMS solution for this project. NationBuilder comes loaded with a host of features designed for cause-based organizations, including donation page templates, crowdfunding integrations, and smart data management to safely control membership information.
We took advantage of these tools to develop an integrated user experience allowing for multiple touchpoints and ways for visitors to get involved: signing the American Promise petition, signing up for a newsletter, connecting on social media, becoming a monthly or annual member, and logging into an external AP Citizen portal.
The bells & whistles
We did a significant amount of back-end work to maximize NationBuilder's capacity as a CMS. For example, we created three separate team sections, overrode NationBuilder's directory listing structure to customize the order in which each person was displayed, and pulled in different information for each person using custom fields and people tags. This method allowed us to dynamically display selected profile elements from the NationBuilder dashboard so that the client could edit someone's profile and see the change on the site immediately.
We oversaw content strategy as well as photo, art, and animation sourcing and retouching. The challenge with the information architecture of the site was how to convey what the aim of the project was as succinctly as possible and highlight the immediate actions the user could take to join the cause.
We had to distill the message, bring the goal to the forefront, and polish the language for clarity and urgency.
How does the AP staff intuitively manage all of this?
We provided extensive instruction, guidelines, and explanations on how the site is structured in the back-end, as well as how AP's staff can modify the site for any change they might want to make.
By using custom Liquid calls, NationBuilder's theme language, we separated out main page elements and inserted placeholder calls within the NationBuilder content sections. This allows AP to have maximum control over what appears on each page without having to dive into the code. As a result, the content section in the NationBuilder dashboard of any given page can include all of the text on that page, editable by the AP staff, regardless of where on the page it is displayed.
The News page has some especially fancy implementation. It displays the most recent post on the homepage, the five most recent posts in a News preview section on the About page, and the full blog index on a stand-alone News page. The News page itself also dynamically pulls in updated content from the blog page in NationBuilder, as well as press releases and media coverage. Each is editable on its own separate page in the NationBuilder dashboard.
The icing on the cake
We extensively modified the base theme with user interface interactions to allow for tailored slider transitions, call-to-action image hover effects, customized responsive blockquote treatments, and smooth scrolling from the subnav.
By implementing these changes, we anticipate the redesigned website will help American Promise’s appeal for a more perfect democracy to be heard by all citizens of the internet.