The Story of Sarga: an epic journey of scrollytelling proportions

I’ve just wrapped on a completely epic project - a giant scrollytelling page all about the American Eel.

Scrollytelling projects are interactive web pages, where the elements move and react as the user scrolls down. They’re very engaging and great way to tell a story.

I can’t wait to work on more projects like this (get in touch if you’ve got ideas!)

But let’s start at the beginning.

A few months back I was approached by CarolAnne Black to create a scrollable story explaining the migration and life of the American eel … they swim thousands of miles from home in the Sargasso Sea (which itself is fascinating … look it up), and back again over many years. They’re pretty incredible.

A few things interested me about this project:

1. I would get to work with a content editor / writer - in this case CarolAnne Black

2. I would be working alongside a very talented illustrator Amberlea Williams

3. CarolAnne was open to anything .. and we played with the traditional scrolly format considerably.

4. I got to revisit my favourite tool Vev - and really play with the functionality.

More about the project below.

More about the Project

Workflow

It’s the first time I had worked with both a content editor AND an illustrator, so a solid workflow was crucial.

Step 1: planning

Our team engaged in extensive three-way discussions to set the direction and approach. CarolAnne shared her vision for the project, while Amberlea and I brainstormed visual strategies for each stage of the story.

Knowing that Vev would be our primary tool for visualization, I was excited to share early concepts and outline the possibilities and limitations of the platform.

Step 2: The story

CarolAnne wrote a beautiful narrative explaining the journey of the eel, with notes on additional text (e.g. when Sarga speaks). We initially tried to build the story in Excel, with columns for different information (e.g., copy, visual approach, links, etc.), but we realized that none of us naturally worked that way.

CarolAnne’s story was so inspiring and perfectly captured the tone and voice of Sarga, making it the ideal starting point.

Step 3: First scrolly draft

Using Vev, I created a first draft of the scrolly, using placeholder graphics and icons. This rough draft served several purposes:

• It allowed us to see the story in full, checking for length, pace, and clarity.

• It enabled us to edit and move items easily without having to relocate large illustrations or elements.

• We were also more likely to edit a section if we were only using filler graphics - we would become more invested in final illustrations and be less likely to make smart editorial decisions. It would also be a shame for Amberlea to spend time illustrating if the element was then cut.

• It gave Amberlea a clearer idea of the size and scale of the illustrations needed, allowing her to create them in a way that could be easily slotted into place.

Step 4: Addition of illustrations

As I continued developing and polishing the story, Amberlea began illustrating her beautiful elements. These were hand-drawn, scanned, and provided as layered Photoshop files, allowing me to remove, manipulate, and duplicate elements as needed and import them into Vev.

Step 5: tricky sections and revisiting

Once the story was mapped out and we started adding the graphics, I began tackling some of the trickier elements such as the eel ladder, dam, and river sections. These presented different challenges, each solved through extensive experimentation within Vev and consultations with their technical team and user community. It’s always worth speaking to the software makers and other users if you’re stuck!

I also revisited earlier sections (e.g., the starting screen and Sargasso Sea element) to improve interactions. Scrollytelling is all about timing, and even slight changes can make a huge difference.

Step 5: proofreading and minute tinkering

CarolAnne was a fabulous copy editor, and Amberlea was an eagle-eyed consistency and design maven, so I had two people giving the project the once-over. After several rounds of tweaks and changes, we were ready to launch.

Step 6: launch

The scrolly was made live, and CarolAnne actually launched it in person at a school in Ottawa, using it as a storybook to tell an immersive story. Apparently, the kids all cheered for Sarga at the end … yayyyyyyyy!

Final thoughts

I meant what I said, I would desperately love to work on something like this again … get in touch if you have a story to tell.