Paddle of the Century
Interactive design and development
Project Overview
Summary
“Paddle of the Century” tells the incredible true story of Canadian Don Starkell and his teenaged sons, who in 1980 set out from Winnipeg to paddle 20,000 kilometres to the mouth of the Amazon River that was later recognized in the Guinness Book of World Records. The producers requested to include a map but a stationary map wouldn't be as visually appealing so I came up with an interactive storytelling solution. It won an “Honourable Mention” at the Digital Publishing Awards in the “Innovation in Digital Storytelling” category.
Client
CBC Radio | The Doc ProjectResponsibilities
- Concept Design
- Web Development
- User testing
Released: September 2020
Status: Inactive
Design and Development
Paddle of the Century was built as a custom . Working in a very tight deadline of about ten days, I proceeded to outline a method to tell this story in a manner that enticed users to keep scrolling down the page. This was another map idea. Part of the challenge is the journey started in the south, the bottom of the map, so the map had to be fixed in one place.
The interactive was created to be fluid allowing it to fit any size screen.
Working from an svg map created by Ben Shannon, I edited the code of the map to include major points outlined in the content. The path is highlighted on scroll so users get a sense of the distance, direction and overall scope of the 20,000 km journey.
Audio narration from the documentary and photos were added to enhance the story and visual appeal of the interactive in the tradition of CBC long form interactive web content.
Wireframes
To ensure the user experience was positive, extensive paper wireframes were created for both mobile and desktop versions. At this point, the content was not yet complete so outlines and symbols were used.
Development
Working closely with producers, and after reviewing the wireframes, I created a version they were happy with, I created HTML prototypes to move forward. From there, it was only the interactivity to complete which I had
Video Captures
These are video captures from a reconstruction of the page. Note: The audio clips have expired and are not visible.
The Mobile version presented some challenges as the map would be too small to fit on the vertical with the text. The solution was to create the content as an overlay which was one of the proposed layouts for both formats. The opacity was extensively user tested and users found the visibility of the red path on the map acceptable.
Impact
Won “HONOURABLE MENTION” for “INNOVATION IN DIGITAL STORYTELLING” by the Digital Publishing Awards
Posted within the top 5 CBC stories for the week.
