I grew up reading ghost stories. I watch horror movies and sleep with the lights on afterward.
So, when I got a sneak peek of Bing’s 2014 Halloween home page experience, it sent chills down my spine. At the stroke of midnight PT Oct. 31 Bing unveiled its homage to legendary ghost stories. In keeping with the spirit of the holiday, this creepy exploration is all about anxiety-provoking curiosity.
“We’re creating a new, unreal place. We wanted to create a spooky, chilling atmosphere.” says Kristin Dean, the senior editor for the content programming team at Bing, who chooses the daily home page image. She led the sprawling creative team that made the Halloween project a reality. “It also gives our developers a chance to try something new, and for our users, they get to experience something different.”
With this experience, a trio of creepy vignettes emerge, beginning with La Llorona, a ghostly weeping woman, and continues with the Flying Dutchman on high, stormy seas and ends with the Bloody Mary chant in the mirror. At first glance, it looks like a video, but in keeping with Bing’s signature look, they’re photographs expertly layered by an artist in an original diorama-like environment. An audio designer worked on giving the experience an appropriately spooky soundtrack integral to the storytelling.
“When the hair goes up at the back of your neck, you know you’ve hit the mark,” says Phil Rogan, the senior designer who worked with developers on the Halloween page animation design and engineering from concept to finish – as any team would approach a product they’re shipping.
All of the animation is driven by CSS3 and HTML5 in a panoramic motion called parallax for a continuously flowing story – a first for the Bing home page. It was also a strategic move to go away from video to play better on mobile devices and make it more interactive. And with CSS, the motion is randomized, so it doesn’t look like a video loop. Other things that you’ll see on the page are full screen scaling (if you’re on IE11 or 10, hit F+11), mist animations that are occurring on a cycle and diving inside a piece of work.
“This is a lot of fun to do because it’s a puzzle. I had to figure out how to make the ocean look like it’s moving, without video assets. How do I make the ship look like it’s bobbing in the ocean without having realistic physics to rely on? Rogan says. “The best compliment I’ve gotten is one person was feeling a little woozy watching it. That wooziness means it’s working.”
Bing’s content programming team has a history of animated and innovative home pages, especially on holidays like Halloween and April Fool’s Day. Previous Halloween pages included last year’s tribute to classic horror films like “Psycho” and “Poltergeist,” the 2012 version that had ghosts floating by a window and the inaugural scary experience in 2011 that showed a looping six-second gargoyle lit up by lightning. They also created a page that was a love letter to “Star Trek” fans timed to the launch of the last movie reboot. Typing in certain key words like “Beam me up” took you to outer space and inside the Federation’s flagship.
Dean’s team started working on this Halloween page in July, narrowing down ideas and agreeing on universally appealing folk tales. They also conducted background research on each folk tale, the results of which are available via the “info” button on the Bing homepage. The weeping woman story that starts the home page experience illustrates the remorseful spirit of a woman named Maria who’s destined to walk the earth looking for her children. Next on the page is the ghost ship, which may be familiar to fans of “Pirates of the Caribbean,” was piloted by the Flying Dutchman, who commanded his crew to their deaths. According to legend, Dean says, it portends doom is coming and you should turn back. On this special home page, lightning illuminates the fact that the ship isn’t actually on the horizon. Bloody Mary concludes the experience as a legend that has evolved into a parlor game for those who are brave enough to say her name three times while facing a mirror. Ideally, you’re supposed to see the face of your future spouse, but if you’re destined to die before you marry, you’ll see the grim reaper instead. On the home page, death is in store for the woman in the mirror.
Then came sketches on Rogan’s Surface Pro, photo selection and meticulous overlaying, writing code, testing it for quality assurance and international editors tailoring the page for their audiences. (Outside the U.S., Bing users in Germany, France, the U.K., Brazil, Australia, China and Canada will see this special Halloween experience. But in Japan, they won’t, as ghost stories are associated with summer holidays there.)
By mid-October, they were in fit-and-finish mode, and tweaking things like turning pulsing chevrons into glowing skull and crossbones that invites viewers to move forward on this eerie journey.
“I like to say that sometimes user interface design is a lot like fishing. If you throw something in the water and it lays there, no one sees it. But if you jiggle a little bit, boom,” says Rogan, snapping his fingers. “Everybody wants it. So this is a good example of the softest jiggle you’ll ever see.”
“We are always trying to do something surprising,” says Michael Kroll, a principal UX design manager, who leads the UX Content Team and the UX Research Team as part of Bing Studios. “If you’re using Bing, it’s because you want to look at things differently than other people. And that’s a philosophy we carry into the home page all the time and throughout the product, which is how do we take this thing that you’ve seen before and show it to you in a way that you maybe haven’t seen before. There’s always this push to take a different angle on this from everybody else.”