A tense story that was turned into a suspenseful experience for readers.

For this OnStar Cover Story, I was fortunate enough to be given near free rein to push the content to the next level. After reading the story and looking through the photos available to me, I decided to keep the content front and center. Rather than add a ton of interactive toys, it was more effective to use scroll based animations and triggers to emphasize the tension.

While for the mobile experience the content mostly is allowed to stand alone, the extra space available to a user on a desktop sized device allowed for some neat visual effects.

Design as Emphasis

There are a few tricks I used to accomplish this. The most obvious one is the large countdown. Timed to coincide with the pace of the story, even stopping at points where a specific number is mentioned, this number keeps the reader constantly aware of the time limit and impending danger. More subtly, it also grows slightly in size and opacity, commanding more of the user's screen as they go.

Adding to the feel, the background slowly transitions in color. When the user begins, it's a dark grey. Not a friendly color in context, but not an especially threatening one, either. But as they continue, the color shifts to a deep red. This evokes further emotion and suspense, but is just subtle enough not to distract from the story itself.

Spacing is Pacing

Another key aspect of the design is the large gaps between segments of the story, along with the occasional line being locked to the user's screen. This instantly informs readers that a transition has happened, usually that a portion of the limited time has passed. And the locked text ensures they get the key points of the story, so that even if they're skimming, they can grasp the basics of what's going on.

This spacing is also used to add one final misdirect of sorts. The screen flashes to white, and the next section is far enough that the color is all the user sees for a moment. Doing this causes just a moment's hesitation in most readers as they wonder if Alice is ok, despite knowing on some level that we wouldn't tell the story if she weren't. Finally, the reveal in the more peaceful palette used on the rest of the site returns things to normal. It's a nice way to cap off the story and come back down from the suspense that had been built.

The final call for organ donors helps involve the reader, and humanizes the whole situation. Despite being on an OnStar marketing site, the story is about a person and their experience. The design is used to emphasize that.