All Caps Prototype
UX Researcher & Designer
All Caps is an experimental model for visual-first, digitally native longform journalism. It is a lightweight, interactive platform designed for the web using the usual suspects (HTML/CSS/JS), but makes use of new libraries such as WebVR and Three.js too.
It is both an exciting and deeply unsettling time to work in media. Storytelling has never been more fun and interactive: you can design whole video games, publish interactive cartoons, and host 360 degree animations — all in a browser! Tools get more technically advanced and accessible every year. 
The problem is that most media organizations have done a bad job at keeping up. Newspapers and TV ignored the internet for too long. This led to all kinds of problems: an unsustainable business model in dwindling print subscriptions, a stranglehold on content distribution from social media companies, and the rise of small, hyper-partisan “news” outlets to fill the gap. We can sit around arguing all day about whether the mess social media turned out to be was inevitable, but I’m willing to bet my student loans that if every paper in North America had a robust early web presence, we’d have a much better-informed electorate.
If we want to stop seeing newsrooms across the country making further layoffs and pay freezes, we’ve got to give people meaningful reasons to click off social media and onto the site. I believe the best way to do this is by offering a distinct and interesting design experience.
We have to spend just as much time on how we publish online media as we do what we’re publishing. Social media is dominating in part because we’re making it really easy for them to scrape and repackage the typical media formula: hed, dek, photo, body. This works for some things, like short news pieces, but not for feature-style journalism.
There is no good reason for a longform feature to be a block of black text on a white background. Features online should be as they are in print: carefully crafted multimedia experiences. It shouldn’t distract from the writing — you don’t want to mess with a lede from a writer like Kathryn Schulz — but if done thoughtfully, the design experience will advance the narrative while engaging younger audiences who increasingly tend to absorb information in different ways.
Which brings us to All Caps, a new vessel for visual-first journalism. One that is a creature of its medium:  alive, fluid, enveloping and beautiful. It attempts to blur the boundaries between different kinds of media. By splitting up sentences, manipulating them, and integrating them alongside graphic components, it is changing the way the reader experiences the story in a manner that makes sense for the web.
I'm choosing to look at the Isabella Stewart Gardner heist for my prototype, to show even the most exhausted of stories can feel fresh if we change the way we tell them. Besides, it reads like the plot of a film noir thriller. Two men dressed as police officers break into the Venetian palace-inspired museum. They successfully pull off the biggest art heist in history. The 13 artworks, valued at $500 million, remain lost, and a long trail of evidence is slowly being put together by federal agents. The man believed to know the painting’s whereabouts is on his deathbed, and refuses to budge. There's a lot to work with here.
I think the retelling of the narrative consists of four main experiences that all push the envelope in terms of interactive storytelling: 
1. Z-axis navigation (a lot of jQuery or three.js)
2. Nonlinear 3D gallery (three.js)
3. 360 video (WebVR)
4. Interactive video (three.js)

The main All Caps z-axis linear path (beginning). Trying unsuccessfully to reclaim the title "Night at the Museum" from Ben Stiller

1. Main Z-Axis Scroll
Instead of scrolling up and down a flat page, you scrolling in and out — like an mysterious side street, it draws the reader into the story, and beyond that it just feels fresh to have elements flying past you on the screen. It gives the sense that the reader is going on a journey— and that feeling is driven home by the way the reader scrolls into words, goes through archways, opens doors, etc. You’re compelled to finish the story, because you don’t know what’s around the next corner, or beyond that window in the background. The illustrations and text breakdown continues throughout the text body: each paragraph is separated and played with in such a way that should feel fun but not distracting.

Another excerpt from the story. Designed in Illustrator, prototyped in After Effects.

One of the biggest challenges was finding a way to make the website lightweight. A big reason why most websites consist of little else than just black text on a white background is because images (photographs, hi res jpegs/pngs/tiffs) are large in size and are very taxing on browsers. For what I'm doing, I need to have a) a lot of visual elements loaded at the same time and b) make them huge so that when they scale up or “fly past you” they don’t get pixelated. This presented a big problem for me. Luckily, there’s a different kind of file called an SVG that is supported in all modern browsers. This is a vector file that is read by the browser as a text file with certain commands, which means that it is extremely lightweight. It also scales infinitely without pixelating. Its only downside is that it can only support basic lines and blocks of color (and simple gradients) which means that some of the details found in some magazine illustration styles won’t work. For what I did, it worked well overall. And if I was able to do z-axis designs like this as a lowly college student, just imagine what an artist like Malika Favre could do.
Which only leaves how to go about coding it. The first way, suggested by a developer friend, is to use scaling and perspective animation tools in CSS and jQuery to fake the 3D effect. As the user scrolls, it gives the illusion of depth, but really all that's happening is that certain scale, perspective and positioning effects are placed on 2D shapes. This could work, but it's a painstaking process: you've got to manipulate each individual vector file.
I think there's a cleaner way to do it: three.js, or any of the other 3D JavaScript libraries. Instead of making objects do all the work, you could just arrange them how you want in a 3D scene and make a camera on a linear path do it for you. As the user scrolls, the camera moves in, and eases out the way a natural scroll would. This same setup is how I animated the scene in After Effects. Another advantage is that it would involve much less code. There are web editors that opt for a friendly UX that's not unlike Blender or Maya. They're not perfect – you'd eventually have to script something – but it greatly reduces the barriers for team members like designers and UX researchers. And as these libraries are new, they'll only get faster and easier to use over time. It's an investment in a workflow that will be accessible for everyone on the team.

How the z-axis set up should look from a vertical viewpoint in a 3D editor.

Upon completing the main narrative, you're presented with three options: 3D gallery, 360 video, and interactive video, which are all personal curiosities for me. The Isabella Stewart Gardner story has been covered so extensively that it's allowed me to apply existing, old school media reporting to these new technologies.

The three menu options at the end of the z-axis scroll: The Artworks (3D nonlinear gallery), The Investigation (Interactive video), and The Media (360 video).

2. 3D Gallery
A big draw for any gallery experience, certainly of the Isabella Stewart Gardner, is the freedom to explore in any fashion you like (curators everywhere: "noooooo"). I want to showcase the artworks that have been stolen in an unrestricted, exploratory fashion using a user-directed 3D gallery – a virtual art museum of sorts. The experience consists of the user clicking and holding in the direction in which they want to go, and along the way there will be photographs of the stolen artworks that people can view and read more about. This can be done with three.js.

This is the three.js open-source example that I'm drawing inspiration from. Instead of hundreds of cubes, though, I'm going to have 13 images of the stolen artwork.

A mockup of what that environment might look like.

3. 360 Video
The media coverage of the heist has been enormous, deafening almost, and I wanted to show this through the following 360 video. This prototype that I created in After Effects gives you a sense of what that experience feels like (this can be viewed in Cardboard/Daydream too). Three.js has some VR APIs, but I'd probably push engineers toward developing this in WebVR, which is quickly becoming the standard for 360 content.
4. Interactive Video
I’m interested in having some fun with the traditional video players we see on the web. Below is an interesting three.js candidate: the video is projected onto a wall of cubes that break up and come together upon clicking. It’s a bit much for most publications, but with a few gentler modifications I think it could work well. I could certainly see something like this working for an audio-only podcast. I’m projecting a video of the continuing investigation on top of the model below.
Back to Top