Better Templates for Visual Journalism Scrollytelling: 7 Protips

To us, telling visual stories always meant utilizing different types of media–text, pictures, graphics, videos–and intertwining them like threads to create one coherent narrative. There was only one problem: Like most content management systems (CMS) out there, our publishing platform wasn't capable of supporting this concept just like that. So we set out to build a story template from scratch: A "Snowfall" style parallax effect page that would be refined and enhanced over time, with different stories handled by different newsrooms. We wanted to build a framework that doesn't require our users to click on anything, but rather one that uses swiping/scrolling only to gradually build up a story (incl. layered graphics).

We launched a minimum viable product in July 2019, then followed up with an advanced version in December (featuring "real" parallax, multiple backgrounds and soft-coded subs).

To get their complex scrollytelling content up and running in a sustainable way, DW's visual journalism unit had to make a huge effort–and start from scratch. In yet another guest post, Gianna-Carina Grün explains what her team learnt from building and improving a minimum viable product.

To us, telling visual stories always meant utilizing different types of media–text, pictures, graphics, videos–and intertwining them likeCoding everything from scratch granted us a lot of creative freedom: We weren't limited by the CMS anymore–only by our own imagination, skills, time and budget. However, this freedom also turned out to be a challenge in some respects. Which is why we wanted to share what we've learnt along the way. Here are seven protips on how to create better templates/MVPs for your organization:

1. Make a good project plan

It might be the most boring thing to start with, but it's essential: Make a project plan that outlines every step of the process and documents all due dates. Here's an idea: Start with the go-live–then work your way backwards to what could be square one. Don't fortget to list all the people responsible and create an overview of who is available when; this helps prioritizing tasks and assign responsibilities. Although a plan never works out 100%, it's good to have one. You immediately see if you're still on track–or if (and how much) you're off. Once the organizational stuff is out of the way, it's a good idea to sit down with all team members to exchange ideas. Make sure everyone is able to have their say on how to tell the story and how to produce it. If possible, have more meetings like this throughout the process.

2. Name your baby well

What should your template/tech product be called? When communicating with other departments, it helps a lot if you don't have to refer to your product as "the thing we're creating". Furthermore, you should pick a name that's unambiguous. At first, we didn't discuss the issue and just called the project "OnePager"–until some people raised concerns that this term is already used in other contexts and will most likely lead to misunderstandings. Eventually, we settled on Scrollytelling Article or StAr ? (we like it for the sparkles). However, introducing the new name to all stakeholders took quite a bit of time (that surely could have been used more efficiently).

3. Use paper prototypes

Sometimes it's hard to wrap your head around technical ideas–or to convey them to your colleagues. If time is limited and digital sketches are difficult to create, just get a couple of pens, a stack of paper, and a pair of scissors.  To make sure everybody had the same idea and understanding of one specific scrollytelling picture effect, we created a simple paper prototype–and that worked just fine.

4. Start simple, refine later

Estimating project complexity and calculating the time needed for creating certain features is crucial for managing the line-up of work packages (don't forget to discuss priorities with your developer team, so everyone is on the same page). If a feature is fancy, but difficult to build, consider starting with a basic version. If there's enough time later on, you can still refine and elaborate.

5. Set up a proper testing environment

It's important to thoroughly vet your project early on. Make sure to set up a testing environment that's easily accessible and able to properly display all media types. Don't work with browser simulations only, but also a get a couple of real devices, so your developers and testers catch all the bugs. Find out what kind of devices and browsers your target audience is using–and what your product looks like to them.

6. Cater to the needs of specific markets

Not everybody has access to or can afford an exhaustive mobile data plan. If you're producing for developing markets, find out about typical mobile web usage–and create low-bandwidth alternatives if needed. For example, our story on African megacities features sophisticated drone footage in looped video clips with scrollable overlay text boxes. A less-data intense alternative would be to just use photos and text.

7. Build a network

Even if it takes time and energy: Involve "outsiders" in your project. Other departments may be more interested than you think, both in the content and the technical solutions you're creating. Get their feedback as early as possible and increase their agency in the project. Gain their support–and the chance to promote your product/story from a different angle.

Photo by Nigel Tadyanehondo/Unsplash threads to create one coherent narrative. There was only one problem: Like most content management systems (CMS) out there, our publishing platform wasn't capable of supporting this concept just like that. So we set out to build a story template from scratch: A "Snowfall" style parallax effect page that would be refined and enhanced over time, with different stories handled by different newsrooms. We wanted to build a framework that doesn't require our users to click on anything, but rather one that uses swiping/scrolling only to gradually build up a story (incl. layered graphics).

We launched a minimum viable product in July 2019, then followed up with an advanced version in December (featuring "real" parallax, multiple backgrounds and soft-coded subs).