Loading ...

Responses by Ramkumar Shankar, creative developer; and Matt Smith, interaction designer, animator and programmer, SBS Labs.

Background: “When Australia—and the world—went into lockdown, SBS’s The Feed set up a phone line to receive voice memos from all over the country,” says Matt Smith. “Some of the memos played out on the television broadcast as interstitials, and a selection of stories became a documentary. The web version of Story Line takes a more expansive look, presenting both the video material but also a swathe of audio-only material.

“The phone lines are still open and collecting stories, and the project will continue to grow,” Smith continues. “For now, it is a time capsule of the first six months of the pandemic in Australia.”

Design core: “We wanted the site to be spare in design, unguided and exploratory,” Smith explains. “You browse the stories by catching glimpses of imagery or words that may resonate. We wanted the scale of the canvas to feel huge—and almost a little overwhelming.”

Time constraints: “I would have liked to spend more time highlighting the moods of each story in the design,” says Smith. “It was proving a challenge; each story covers a range of sentiments and emotions, and some stories have moods that aren’t easy to describe with a simple emoji. For these reasons, we de-emphasized this aspect of the project, but I think there was still potential in the idea.”

“We reworked this to a system where users could click a particular mood and be taken to a particular story on the canvas,” adds Ramkumar Shankar. “It worked better with the motif of exploration where we could take users to see and listen to different stories.”

“We also spoke about incorporating a recording function directly into the site; however, time concerns—as well as the possibility that we’d be splitting our messaging across the phone line and the online recording function—caused us to scrap the idea,” says Smith. “This probably worked out for the best. The audio quality of a phone line has a certain charm.”

New lessons: “A few of the technologies used in the project—such as React Hooks, our own custom hooks and MobX for state management—were  firsts for me,” says Shankar. "And there was the application of tools I was familiar with but in a different context such as the use of Amazon Web Services (AWS)’s Lambda@Edge to intelligently serve requests to the site and support deep linking in a project that is essentially a 3-D engine. It was a great way to make content shareable on a static, single-page app.

“Lastly—and this isn’t news—the last ten percent of the work takes up the most time,” Shankar continues.

Navigation structure: “We wanted the canvas to feel expansive and almost like the stories are arriving as you scroll them into view—a ‘live’ feeling,” says Smith. “Users can explore stories by human qualities such as mood, or graze on an almost infinitely layered canvas of stories, presented as video, audio and text. The design is spare to let the content shine, but the motion graphics and interactions feel organic and human.”

Technology: “On the front end, we used JavaScript, GLSL, React, React Three Fiber, three.js, React Spring and MobX, among many other libraries,” says Smith.

“The content on the site was ingested using bespoke FFmpeg scripts,” says Shankar. “The website is hosted on AWS using S3 and Cloudfront, with Lambda@Edge to support caching and social sharing.”

Special technical features: “This is our first published project that made use of React Three Fiber, which brings the declarative approach of React to the three.js world,” says Smith. “Once getting over the initial learning curve, the benefits were immediately obvious. Using JSX to describe our three.js scene graph made it relatively straightforward for us to experiment with different hierarchies of three.js objects. It also encapsulates some of the tedious busy work in creating scenes, such as disposing of objects. It’s an awesome project.”

“So much work and polish went into refining the interactions and transitions throughout the site, especially as the browser viewport changes in size,” notes Shankar. “This was particularly important for this site, which adopts a fairly unusual and nonstandard design. The animations and positioning of elements on screen at various sizes is highly considered and intentional. There are examples of this throughout the site: Tooltips move to the left as the mouse pointer approaches the right edge of the screen. Cursors disappear as the pointer moves over other elements on the page. We also use AWS Lambda@Edge functions at the edge to support rich social sharing functionality, depending on who requests the page.”


Browse Projects

Click on an image to view more from each project

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In