This case study is brought to you by Tectonica - a certified Agency based in Buenos Aires, Argentina. Be sure to visit their website and see their previous NationBuilder work.
Many people do not realize the full potential of NationBuilder designs. We often hear prospective clients say: “You built that on NationBuilder? It looks nothing like a NationBuilder site!” The fact that people often think a NationBuilder site has to look a certain style is an indicator that few people using NationBuilder are exploring the platform’s full design potential, rather than a reflection of the system’s limitations. (Websites should be based on design standards, so there will always be similar features, but vast customization is possible.)
Complementing NationBuilder’s native functionality
In this article, we will look at an advanced technique that we frequently use to maximize the impact of a NationBuilder site: Narrative. This is a powerful approach that carries enormous potential for engagement beyond the usual engagement options: requests for donations, volunteering, attending events, social media, recruiting friends, etc. Having opportunities for engagement on your site is not enough. You should also convince your visitors that your organization is worthy of giving to in some way - time, money, their ongoing interest - in order to have them accept those opportunities. Telling your organization’s story is key to complementing NationBuilder’s built-in features.
There are many different ways to convey narrative. This article will be focus on one method: storytelling through parallax scrolling. This technology has enabled us to tell truly engaging narratives online.
A picture speaks a thousand words
Let’s look at four examples of NationBuilder projects where Tectonica used narrative to achieve key client goals:
Defense for Children International - Palestine Stories
DCI - Palestine is an amazing organization advocating for children’s human rights in the Palestinian Occupied Territories. The goals were to document human rights violations of children and to engage an audience that might support the growth and sustainability of the organization. What struck us during our initial consultations were the stories of individual children as examples of different issues they faced. Suddenly, we understood the reality and inhumanity that numbers alone did not convey - especially for an audience so distant from their everyday life.
We wanted to take full advantage of recent web technologies that could convey the suffering and violations of human rights in the six areas of the organization’s charter. We did so by creating online documentary-style video narratives.
The correct mood was essential. We worked with art directors, designers, coders to create a visual language that would convey the serious tone of their stories. We addressed every sensory element to create an environment and experience for users, including video inserts, video loop backgrounds, a typewriter effect for displaying text, and ambient sounds effects.
We placed the stories on a separate page to maintain user engagement on the main site, but provide easy accessibility from the homepage. We also hosted the stories on a separate site to minimize potential performance issues from large video files.
You can see the full case study here: DCI - Palestine Featured Project
When we built our second company website (while migrating to NationBuilder) we tried to represent ways that our work is significantly different, deeper and broader than other studios. All our sites are built from scratch and developed to achieve specific goals for our client’s organizations.
The “show-don’t-tell” approach is always the optimal for websites. In the case of our own studio’s website this meant not just displaying the results of our work with our clients, but showing the process. Though a standard web portfolio is a great reference, and shows off our ability to create beautiful sites, it lacks key element of our work: more than just pretty designs the sites are custom-crafted tools to achieve our client’s objectives. We decided to explain this with a long scroll story animation on our homepage, highlighting with three areas of our experience.
We placed the narrative section at the bottom of our homepage after a video, key information, and calls to action, to minimize the loss of users who might not stay through to the end.
When Argentina came under attack by US-based vulture funds, we were aghast at how little information our North American friends knew about the injustice of the case. So we thought, who better to take action? Of course, complicated legal proceedings on economic issues do not usually grab the average person’s attention. So we created a narrative explanation of the situation with hand-built illustrations to create tone, context, and interest, ending with a petition that serves as a call to action.
For political parties, the narrative is often the message that they use to connect with constituents. The SNP wanted to build a site to visually explain their platform. We highlighted various policies with custom illustrations that complemented summaries of the party’s main political issue areas. We presented these with parallax scrolling and fades to transition between the issues.
Telling the story
Storytelling on the internet is no different than around a campfire. There are basic plot conventions to make the story compelling - just as in every medium from movies to novels. Keeping your audience interested depends upon crafting a story that relates to the human experience and harkens to conventions understood since ancient Greece.
Every story should be carefully planned and structured around the standard five act plot arch.
Each narrative should include context, conflict, rising action to climax, explanation/broader meaning, and ‘denouement’ - a fancy french word for resolution.
For web narratives, the resolution is the opportunity to ask the visitor to take the next step - to become engaged in some way. This is when your audience is going to be most emotionally ‘sold’ on the worthiness of your project. This is the point when key calls to actions should appear, either to volunteer, attend an event, make a donation, sign up as a supporter, or - as a fallback alternative - read other material if they are not yet ready to make the jump to giving.
Process for building
We learned the hard way that making animated stories does not follow the standard web design procedures. The old wireframes-design-revisions-code process simply doesn’t cut it. You must also deal with the element of time.
No matter which process you use, be prepared for many rounds of edits. You are adding a dimension - time - to the web world. You are moving metaphorically from painting a picture to creating a movie.
While there are many ways to approach this work, movies are the process we found to be the best model. As in movies, we rely upon scripts and storyboards to transform concept to animated narrative.
Just like a movie, expect many more hours of editing after the work is coded. Because all the elements on parallax have to be careful timed, one edit impacts all of the other elements. If this is your first time, prepare yourself for painstaking work and patience to reach perfection.
Mobile considerations
Everything on the web was not built with mobile devices in mind.
Phones and tablets differ in the size of their screens and also in functionality. Most operate with touch screens which rarely play well with parallax.
But if we limit ourselves to the potential of our iPhones, our innovation is constrained. Rather than trying to use parallax on mobile, we recommend that you create alternative views of narrative pages for mobile devices.
We built most mobile alternative narrative sections with static-image slides. That let us tell the story, but without all the flashy dynamic components of parallax scroll, videos, etc.
Video loops
Video loops make compelling and powerful backgrounds. They have very specific technical requirements, however, since they are small loops and the client side must be loaded via code.
Consider video loops as backgrounds, or small illustrative parts of the story, or as an introductory snippet of a longer video.
Video loops are not anything like normal videos. The video should not be intended to convey significant narrative elements (for that you can use insert or pop-up display videos). They should be used to create effect. Think of them as moving images rather than a short video.
Framing is particularly tricky. Choose footage that does not depend on everything being shown. Viewer sizes for videos are rarely standard on the web, so select footage where you don’t mind losing part of the frame. Anything important should appear towards the center of the frame.
Since the video loads on the client side, with all of the other code, it must be extremely lightweight or it will not load well. Avoid videos that are long or high resolution - the shorter, the better. We have discovered a few tricks to make videos present well at lower quality - including addition of a design-appropriate semi-transparent pattern on top of the video so it appears as an effect instead of poor video quality.
Since it is a loop, use material that ends fairly close to where it starts. Ideally, only some objects will be moving in the video. A nice smooth loop can be made by creating fades in and out. The fade does not need to start at the beginning, since that will be frozen while the video loads. A better choice is to put the fade in the middle of the loop - which won’t be noticed as the loop is continual.
Technical reqs
Each of our narrative projects had slightly different technical requirements. The common elements are a mix of HTML5, CSS3 and Javascript. There are many available libraries and it is essential to use the right one. Before beginning, test your libraries to ensure they have the functionality you expect and that they are stable:
Skrollr: For the Tectonica and SNP sites, we decided to use Skrollr. Skrollr is described as: “a full-fledged scrolling animation library.” You can do stuff while the page is being scrolled, independent of which device you’re using. A key advantage of Skrollr is that it has no dependencies, such as jQuery, making it more lightweight and better-performing than the alternatives.
CSS3: This version of CSS has been a huge improvement over its predecessor for many reasons, but particularly because of the greater options for CSS Animations/Transitions. As a side note - thanks to CSS3, Flash is finally headed into oblivion. This is an advantage for security and performance on browsers and HTML elements can be manipulated as needed.
fullPage.js: The DCI-Palestine stories had slightly different needs. We were really keen to make a particular effect that would have the tone and feel that we were seeking. In order to do so, we had to choose a library that would have a particular feel to the transitions between slides and create the feel of a report. After testing various libraries, we went with fullPage.js and several plugins to create the typewriting effect and sound effects.
Narrative is powerful
Websites over the past few years have made an incredible jump to being highly dynamic spaces. NationBuilder perhaps is the best technology to really jump-start engagement as a fully integrated community organizing system. Partnering the cutting edge technology of the platform with other new technologies to create incredible narratives to tell your organization’s story can produce some stellar results. We at Tectonica continue to learn, design, and construct ever-more effective websites using these techniques.