It’s the voice that grabs your attention first. “The war started in July ... It was all of a sudden.” These words appear on the screen one at a time—white text on a black background—as they’re spoken with a calm, steady command. Within an instant, you’re dropped into the middle of the story, listening intently to a man you can’t yet see. A few seconds later his face stares out at you from a full-screen photograph, and you start to learn about life in Israel.

The documentary-style approach immediately shows off this website’s (www.mod7.com/portfolio/ujciec) greatest strength: Design never overshadows the story. Instead, Vancouver-based Mod7 approached this project with restraint and an uncanny knack for storytelling. The design firm created the site for United Jewish Communities (UJC) to help the organization raise awareness about the plight of small-business owners in northern Israel. The region’s entrepreneurs are still struggling to get back on their feet after a war in the summer of 2006 brought tourism to a halt.

AUTHENTIC VOICE
When UJC stepped up with substantial support after the conflict first broke out, Mod7 had to figure out how to communicate the ongoing need for donations from Jewish communities in the United States and Canada. The solution? Give small-business owners the chance to speak for themselves. UJC provided Mod7 with hours of audio interviews and thousands of still photographs. This raw material came with built-in authenticity, but still needed to be shaped into a compelling story. A junior designer transcribed the audio interviews, and the firm used this text file to identify the most salient points and begin to shape a narrative. “It was like making a script in reverse,” says Wil Arndt, Mod7 creative director and principal. “I could take the Word document and pull out all the things that popped out to me.”

Eventually, these audio clips became the backbone for a refreshingly simple Flash presentation: A slide show cycles visitors through a series of portrait photographs that show people in everyday environments. The images change in tandem with the audio quotes, giving users the chance to look each speaker in the eyes as compelling testimonials unfold. In fact, the still images make it easier to connect with the voices than if the design team had pushed the client to shoot actual video. Without movement and body language, the focus remains on what each person actually says, rather than how they deliver the words.

A picture of a chiropractor, for instance, flashes onto the screen as he begins speaking: “I didn’t work for five weeks. I had absolutely no income coming in.” His words cut straight to the point and make it easy to imagine how a similar setback would affect your own life—especially after other speakers, from an icecream shop owner to a tour guide, echo similar sentiments. Arndt believes the slide-show approach provides a more meditative environment than a video. There’s a stillness that gives visitors head space to process the rich emotional quilt woven together by the speakers’ powerful life experiences.

UNIVERSAL APPEAL
Overall, the site creates an immersive environment with the depth and emotional heft of a typical PBS documentary. In fact, the site design makes it possible to sit back and watch the presentation unfold as you might a TV program. If you do nothing more than type the site’s address into your browser, you’ll move through the entire four-chapter story seamlessly, discovering why these business owners need your help. This makes the site friendly to any web user, including older, less tech-savvy browsers who might be inclined to donate. It also helps ensure the most important messages come across, regardless of where else you click on the site.

DESIGNING FOR CONTEXT
Arndt’s inspiration for the project came from the powerful spreads in National Geographic magazine. He wanted to translate that approach—large photos paired with informative sidebars—to an interactive environment. As a result, he packed all the background information about the war and its effects into sidebars that slide out from the right-hand side of the screen. You can click on “Read & Explore” to browse articles that relate to each chapter or choose “View Map” or “View Timeline” for additional context. The sidebars scroll out about halfway across the screen on a translucent background that blurs the main photo underneath just enough to make the text readable.

This approach helps integrate these information-packed sidebars with the main presentations. You can still make out the faces of the people talking as you dive deeper into the subject, while the slide show and audio keep playing. Each user chooses how deep to dig into the topic, and the brief articles for each chapter are designed to be read in the same amount of time the slide show runs. While the sidebars add depth, they also keep users from being overwhelmed by the amount of content on the site.

Perhaps the only drawback is that some sidebar entries take a history-book tone—a sharp contrast from the main presentations. Plus, the storytelling and editing in the sidebars don’t always achieve the same level of polish as the main slide shows.

WORDS & PICTURES
But on the whole, the site offers seamless transitions and exquisite detail. As viewers move through the four chapters—starting with “The War Hits Small Businesses” and ending on “Strength and Hope”—brief visual introductions draw them into each piece of the story. The first audio quote in each chapter unfurls across the screen in text as the speaker starts talking, but before his or her picture comes onto the screen.

“If we had just started with a picture, it wouldn’t interest you right away,” Arndt says. “We needed a hook. This disembodied voice with text coming out really reinforces what they are saying.”

IMMERSIVE EXPERIENCE
The site’s navigational elements also make it easy to move through this experience without detracting from the immersive environment. Links appear in yellow, while information labels are in white. The upper-right corner of the screen, for instance, includes text links for chapters one through four. You can tell where you are in the story by which link is white, and you can click on the others to move ahead or back in the story. A white bar at the bottom of the screen unfurls as the audio plays, letting you know how much longer each segment runs. There’s also a pause button that allows you to start and stop at will. All of these elements allow users to control their experience.

Nearly every detail and design decision supports the main narrative. The layout resizes as you change the size of your browser window, so all of the navigation elements are kept on screen. It’s all in service of Arndt’s vision for the site: “I defined the goal as giving these small-business owners a voice to communicate with a wide audience. There’s a lot of hope in these interviews that’s really powerful.” Especially when these hopeful words resonate in a design environment that gets all the acoustics just right.

www.mod7.com