Joe Markovitch traveled outside London once to take his mother to the seaside, and that was the only time he left the city for the 86-and-a-half years he lived in London’s East End. The subject of photographer Martin Usborne’s book, I’ve Lived in East London for 86½ Years, Markovitch lent his time-based perspective to Usborne’s portraits of him in various locations within London’s Hoxton district. London-based digital studio Clubhouse drew inspiration from Usborne’s book and used modern web technologies to create an experience that submerges users into a deeper level of involvement with the story. With eighteen images and fifteen videos, the site tells Markovitch’s story through eye-tracking software, ambient music—composed on an East End pub piano for maximum authenticity—and ambient sounds recorded at the same Hoxton locations shown in the photos, and voiceover narration from Usborne and an actor portraying Markovitch, as he has passed away.
“It was important for us that 86½ Years wouldn’t feel like a website,” says Daniel Coppock, cofounder and director of Clubhouse. “This was a core principle we stuck to with the site’s approach navigation and interaction.” The site uses sensitive eye-tracking technology through visitors’ webcams to detect whether their eyes are open or shut. With each chapter heralded by voiceover narration and the sounds of Hoxton, readers can access the next part of the story either by pressing and holding the spacebar—or touching the screen on mobile devices—or by simply closing their eyes; Clubhouse selected these two methods of navigation as the former gives visitors the control they need to select chapters, while the latter draws them further into the experience. “It was important for us to draw the viewer deeper into the story, so we hoped to achieve this by shutting out any distractions and relaxing the viewer into Joe’s imagination by using their eyes as a cue to begin Joe’s narration,” Coppock says. “At the end of Joe’s narration, the transition into the next section is triggered when we detect that the viewer has opened their eyes again, creating a seamless and fluid movement through each chapter.”
As the book itself is nonlinear, Clubhouse felt that the site’s navigation should be nonlinear as well. “The only fixed parts are the introduction and the final chapter,” Coppock says. “We designed our chapter selector around this premise, which randomises chapters and only selects one when you release your spacebar.” With this randomized function, readers may find different content every time they return to the site—especially on the site’s mobile version, which only shows users five chapters of the book.
The site’s design pulls from both the book’s layout as well as from the raw style of Usborne’s photography. Each chapter features unaltered, full-bleed portraits of Markovitch—as does the book—but applied motion and exposure animations add visual interest to chapter transitions, while simultaneously referencing Usborne’s traditional photography methods. Clubhouse implemented a simple finite-state machine to manage the site’s flow, and used the 2-D WebGL renderer PixiJS to create the site’s animations. “PixiJS is a fantastic library for creating highly performant transitions,” says Coppock. “Unfortunately, it doesn’t render text as sharply as we’d like. So to remedy this, we removed all of the text effects we had built in PixiJS and rebuilt them with custom CSS transitions. CSS delivered the supercrisp text rendering we were aiming for.” The eye-tracking technology came from Visage Technologies’ HTML5 Face Tracking library.
In his book I’ve Lived in East London for 86½ Years, Usborne writes in his prologue, “There is an element of my own loneliness in the photos of Joseph. A good photographic portrait always captures two people: the subject and the person taking the picture.” Clubhouse’s elegant online experience not only captures both Usborne and Markovitch, but also fosters a connection with its visitors with its physical interactivity.