Inside the Seventeen.com makeover

When your brand values are “crazy, delicious, insane and fun,” you have a license to push the design envelope a bit.

That’s what Hearst’s Seventeen magazine has done with its newly redesigned website. With a heavy emphasis on social integration and video, the site’s makeover is designed to extend the magazine’s “Seventeen everywhere” strategy. “Wherever our girls our, they should be able to access Seventeen,” editor-in-chief Ann Shoket said in an interview.

New social media tools on the site include support for Facebook Open Graph, which enables visitors to share content with their Facebook friends. The site also integrates technology from Meebo that allows visitors to connect and share content with friends on any instant-messaging platform.

Not surprisingly considering its teen-focused content, Seventeen already has an established presence on social networks. With 200,000 Facebook fans and 80,000 Twitter followers, Seventeen’s readers are very much into not just taking one of the site’s seemingly endless supply of quizzes, but openly sharing the results. In other words, acting like teenage girls.

“It’s the next iteration of social activity: girls interacting with the brand and sharing that activity with their friends,” said Shoket.

Promoting the redesign through Twitter

Seventeen is leveraging its own social presence to promote the redesign. Today, the magazine launched a scavenger hunt on Twitter, comprising 10 questions that readers can find the answers to on Seventeen.com. The first user who finds the answer to each question and posts on Twitter will be “retweeted” by Seventeen’s editors – a huge OMG! moment for a teenager.

In addition, editors are posting an hourly “reveal” on Twitter to highlight new elements of the site, such as the celebrity news hub and featured videos, in order to drive more traffic back to the site.

The site itself has been re-architected to be more scannable, with more white space contributing to a cleaner, less busy design (see before/after shots below). The architecture emphasizes the single-click theory – in which most of the content should be “just one click away,” said Ashley Parrish, content director for Hearst’s Women and Teen Networks.

For example, the quiz tool – one of the site’s most popular sections – has been rebuilt so that as soon as a visitor finishes a quiz, the first question of the next quiz appears on-screen. The single-click theory also pertains to the site’s large cache of original video, which has been integrated more contextually with other content.

New design elements include handwritten fonts and “scratchy” graphics that make the design “more spontaneous and fun,” Parrish said. The team also borrowed many graphic elements from the magazine in an effort to better unify the magazine and digital brands.

Keeping an eye on the metrics

It’s not all fun and games in Seventeenland. The Web team will keep a close eye on the metrics to make sure the new design elements are gaining traction. Parrish, who says she spends the better part of her day poring through Omniture analytics, said the team is relying heavily on clickmaps to see how users are interacting with the new navigation.

“We’re finding that because the site is new, visitors are in discovery mode, scrolling through menus, clicking the dropdowns,” she said. “What we’re seeing is good, because we spent so much time on the architecture to make the content accessible.”

Parrish noted several metrics the team will focus on going forward:

• Page views
• Unique visitors
• Time spent
• Video views – “those will be huge for us to make sure the new video templates are working,” Parrish said.
• Facebook Connect signups
• Signups for the “Get Advice” section (based on Hearst’s Answerology platform)
• New fans and followers on Facebook and Twitter
• Referrals from Facebook and Twitter

The post-launch metrics support the testing the team did during the redesign stage, which included a series of in-office focus groups. I asked Parrish what they could have possibly learned from showing mockups to a gaggle of high school girls.

“Teens won’t say, ‘I like the site architecture,’” said Parrish. “But they will tell you, ‘Oh, I know where to find quizzes now, that’s easy.’ ”

Seventeen.com's old homepage:

Seventeen.com's new homepage: