x Close
  • Case Study: Yearbook Yourself

    Filed Under: Why Design   Tags: user research, web design
    Recommend (0)
    Client
    Taubman
    Project Title
     YearbookYourself.com
    Duration
    July-October 2009 (back-to-school season)
    Team

    Colle+McVoy

    • Mike Caguin, executive creative director
    • Eric Husband, group creative director
    • Todd Zerger, associate creative director
    • Grant Eull, senior designer
    • Barrett Haroldson, senior designer
    • Nina Orezzoli, art director
    • Tim Blevins, copywriter
    • Lee Hanson, copywriter
    • Jason Striegel, creative technology director
    • Andrew Charon, senior interactive creative developer
    • Bridget Charon, interactive producer
    • Hilary LeBon, interactive account director
    • Aaron O'Keefe, account supervisor
    • Michelle Frys, account director
    • Meagan Kato, account planner
    • Chris Peters, senior art buyer
    • Kyle Phillips, interactive creative developer
    • Julie Kaloides, interactive creative developer
    Taubman
    • Glenda Cole, VP, sponsorship and center marketing
    • Amy Drouillard, manager, center marketing
    • Anna Tschirhart, marketing specialist
    Description

    Introduction and justification

    In 2008, Taubman, an owner and manager of 20 upscale shopping malls across the United States, asked Colle+McVoy to help create a back-to-school campaign with an emphasis on trends and value. So we turned to that famous (or infamous) item that comes to mind when you think of school and fashion: the yearbook. YearbookYourself.com let teens and their parents travel back through the decades while learning about today's trends and back-to-school sales and offers. The site became so popular that we brought it back for the 2009 season. Here's a look at the campaign's sophomore year.

    The Goal

    Back-to-school season is a well-worn path in retail. Beyond creating a fresh, fun experience to break through the morass of traditional back-to-school promotional messaging (“Look cool for school! For less!”), we needed to convince teens and their parents-the ones who are usually footing the bill, after all-that Taubman malls not only have the hottest stores and fashions, but there are great deals to be had. Specific objectives were:

    • Increase traffic to Taubman mall websites over the previous back-to-school time period.
    • Generate awareness of each mall's unique store mix and the deals that each retailer offers.
    • Rely heavily on the power of social media to leverage a modest budget.

    Methodology

    Throughout the creation of the site, we always came back to one strategy: keep it simple and focus on the output. The more realistic the photo, the more likely a user would share it with their friends and family.

    Site design became an exercise in restraint-we embraced the yearbook/high school look, but worked to avoid the clichés. Users were guided down a simple path that easily allowed them to make it look like they were the star of an era, be it the '70s with an afro or the '80s with a feathered hairdo.

    • Links to geo-targeted Taubman content were integrated into the online experience and allowed us to populate relevant store and trend content based on a user's location. For example: someone in Los Angeles would see a Beverly Center version of the site, complete with that particular mall's store mix and offers (read: lots of XML).
    • A webcam option for uploading your picture and a photo lightbox for handling multiple images gave the user simple tools to experiment with and publish numerous images.
    • Calibration tools let users dial in looks with highlight/brightness sliders, rotations and scaling for a surprisingly convincing final product.
    • Facebook Connect made it simple for users to share yearbook photos of themselves, their friends and family, and accounted for millions of visitors.

    Challenges

    On the front end, one of our biggest challenges was finding yearbook photos that not only represented the quintessential looks of a particular era, but also worked well with all sorts of users' faces. We scoured through thousands of photos. And yes, we laughed a lot-especially at the '80s ones.

    Several technical challenges presented themselves around image quality and loading. In order to make photographs work for multiple skin tones, we couldn't just take a “head in the hole” approach. So we created a multi-layered composite with each image by blending a desaturated photo import with a skin tone value that closely matched the tone of the original yearbook portrait.

    Flash CS4 relieved a lot of bandwidth issues. Its new FileReference function made it extremely fast for users to upload a photo into a Flash app while saving it directly to desktops. Previously, we would have relied on uploading and downloading to and from the server, costing time and bandwidth.

    Results

    Yearbook Yourself surpassed all objectives by triple-digit margins. The site produced a 282-percent increase in season-over-season traffic to Taubman mall sites. Of the millions of visitors to YearbookYourself.com, a practically unheard of 49 percent clicked through to the mall websites and retailers' back-to-school sales and offer pages.

    The site became an overnight sensation with PR and media coverage on 45,000 websites and blogs, including USA Today, Tech Crunch, ESPN, VH1's Best Week Ever, The Early Show on CBS and Late Night with Jimmy Fallon. Ev, the founder of Twitter, changed his profile picture to a Yearbook Yourself photo. So did Lance Armstrong and Pee Wee Herman. Overall, 11.8 million Yearbook Yourself photos were shared via email or posted to Facebook. And the Yearbook Yourself Facebook fan page garnered 70,000 fans.

    Finally, we took the experience mobile with an iPhone app that was released shortly after the site launch. It featured new and exclusive photos that weren't online and made the much-coveted list of Apple staff favorite apps.

    Beyond the results

    For us, Yearbook Yourself is a strong example of how we're doing our best work. Involving the entire team-creatives to strategists to developers-right from the get-go. Looking at walls and walls of ideas before landing on one. And once we do, creating an open, collaborative working style that encourages everyone to poke and prod an idea to make it great. Is there a cooler, tastier way to depict a yearbook? How can we integrate conversion points into the content? How are we going to seed this site in the blogosphere and to the media? These were the types questions we continually asked ourselves as a team. Maybe the best part of all this was that our client really was a part of the team. We showed them ideas earlier and more often than usual. They, too, really pushed the site to be better and looked at everything with an open mind. Thanks, Taubman.

    Editor's note: The case study above was submitted by Colle+McVoy at AIGA's request. To contribute your own case study, please contact the editor.

    Recommend No one has recommended this yet
    AIGA encourages thoughtful, responsible discourse. Please add comments judiciously, and refrain from maligning any individual, institution or body of work. Read our policy on commenting.