CHALLENGE

Just about the worst thing you can do to a successful Web site is to launch a complete revamp.

Your loyal visitors will be upset, plus you can't reliably compare apples-to-apples to figure out how well elements of the new site are working compared to the old one. In direct response terms, there's no "control".

However, sometimes outside forces require you to ignore best practices.

Last year marketers at LEGO found themselves in that situation. The Company's offline research showed brick and mortar retail shoppers had a tough time finding products on store shelves because LEGO's product lines weren't organized into branded groupings that made intuitive sense to consumers.

So, LEGO decided to reorganize its products into easier-to-shop- for branded groupings. And everything from product packaging to the Web site content had to follow suit.

"The Web site was working very well up until then, but oh, my gosh, I thought, how can I organize it now?" says Margaret Conley, LEGO Market Research Director. The revamped site would not only have to match offline packaging and product groupings, it also had to be very easy for three different types of consumers to navigate:

1. Parents seeking product information and/or buying online
2. Young teens (kids aged 13-14) who are sophisticated surfers
3. "Tweens" (kids aged 7-12) who are less sophisticated

"It wasn't an easy challenge," says Conley.

CAMPAIGN

The LEGO site gets several million monthly visitors, and is a key part of the brand's marketing. Therefore, just as the Company would never air a radical new TV commercial without pre-testing, they also would never put up a revamped site without consumer testing.

First Conley decided to use focus groups to get big picture input on the overall direction the new site should go in.

While kids' opinions were important, if the site didn't work for parents it wasn't worth building at all. So the focus groups were two groups of eight parents each. Each session went through two stages:

-> First half of focus group session: Drawing home pages

The parents were split into two teams of four and given butcher block sheets of paper and markers. They were asked to design a home page, focusing not on the art but on what they'd call things and how they would bucket information. (In other words, navigation.)

Then each group talked about what they liked about the other group's design.

-> Second half of focus group session: Reviewing two samples

Next, these parents were asked to vote on screen shots of two radically different home page prototypes. (Link to samples below.)

One prototype's navigation buttons were focused around LEGO's new product group brand-names "Explore", "Make & Create", "Stories & Action", and "Next". LEGO called this their product site.

The other prototype's navigation buttons were focused on activities that visitors go to LEGO's site for, "Products", "Play", and "Shop". LEGO called this their experiential site.

The focus group results gave Conley's team a good overall feeling for where the site revamp should go. Next the team conducted three waves of testing and tweaking to nail down the specifics.

Again, Conley didn't want to go live until she was very sure she had the best possible site. So, all testing took place in a usability lab instead of on the Web. This time all three target demographics were invited (separately) for each of the three waves of design changes, including:

o One-on-one usability tests with eight parents per wave,
looking for the parents' expectations and watching how they
navigated through the site.

o Usability tests with four pairs of kids per wave aged seven
to 12 ("Because kids that young tend to be nervous, we
interviewed two of them at once," Conley says.)

o One-on-one usability tests with eight kids per wave ages 13-14

Key design tests included:

1. How to make navigation names ultra-clear

Aside from the obvious tweaks of where to put navigation buttons and how big to make them, Conley's team had to overcome a critical problem with LEGO's new product grouping names. While group brand-names like "Next" may be fine on retail packaging, they were highly confusing online for obvious reasons.

One test - when icons were scrolled over up popped further descriptions and images of what could be found there.

2. Dominant home page image

Should the home page be dominated with a general brand statement photo such as kids playing with a variety of toys? Or should it be dominated by one single "hero" toy of the month?

3. Visuals vs. text for navigation

Conley also wanted to test whether text was necessary to describe products or whether visuals would be enough. For example, she knew that it could be difficult to indicate with labeled buttons on a page whether a "game" was a LEGO product or a game that you play online.

4. Overcoming kid-specific navigation challenges

Kids made up 75-80% of the site's traffic, so Conley's team had to take that into account when they tested navigation.

On the products page, they tested scrolling speeds for the product search. "If you're going to mess with a basic feature like the scroll bar, you have to test very carefully," says Conley. "It had to do with how you start and stop the scrolling, how fast it should scroll."

5. Handling kids browsing vs parents buying

"We wanted to create a section for kids to look at products and explore without being bombarded with sales messages," Conley says. Although parents also use the site to review products, LEGO was hoping to convert some into online buyers.

Therefore, Conley's team tested keeping the shopping and browsing areas of the site far less integrated than they would be on a traditional eretail site. They decided against a shopping cart in the product information area.

Instead, they tested adding a "wish list" option. If a kid liked a particular product, he or she could add it to a wish list to be printed out to hand to a parent, or to be emailed to a parent.

The team tested giving kids total control over messages versus a pre-set group of messages the email could contain (such as "Here’s what I want for my birthday" which would arrive in the parent's inbox with the subject line, "Do you know what Dan wants for his birthday?")

Conducting the three waves of redesign and usability-lab testing took from March 2002 to March 2003. Then Conley held her breath as the new site launched live.



RESULTS

"As soon as the site was launched in February 2003, everything jumped dramatically," says Conley. "Business increased, we got great press, the Wall Street Journal endorsed us as Best on the Web for kids."

Although LEGO didn't promote the site in any significant way more than it had in the past, traffic increased from 2.2 million unique visitors in May of 2002 to 3.5 million unique visitors in May of 2003.

Plus, metrics show these new visitors adore the site. The new site's average time spent per visit is 38 minutes, and visitors return an average of seven times a month.

More results:

o The second prototype -the experiential model with buttons labeled based on the activity visitors were on the site to accomplish (Products, Play, and Shop)- was the most popular with both focus groups.

This shows clearly that consumers are more interested in their own surfing goals than in your product line designations.

o Adding bulleted text points to the main navigation buttons helped with adult navigation, but images were important, too -- especially for kids.

"For kids in the tween range, their navigation is focused on images, they don't always read the words," Conley says.

o Playful navigation buttons - where you had to scroll your cursor over a navigational icon to prompt pop-up bubbles with explanations - bombed with both parents and kids. "People told us they want to get where they're going and then play. They don't want to play around finding where things are."

Lesson learned, when your Web designer tries to get you to do ultra-neat stuff with navigation, just say "no."

o As predicted, parents and kids alike had difficulty understanding two of the four new LEGO product group brand-names in an online context.

"When they saw 'Next' on a page they were thinking 'next page,' and when they saw 'Explore', they thought of exploring the site," Conley says. "It was a challenge because we could not change those words."

The solution -- adding representative product images gave visitors a clearer understanding of these buttons meant.

o The large hero shot of a single LEGO product and kid on the home page worked better than a shot of many products and kids. "Boys and girls both thought that was very cool."

o Speed of the scroll bar had to be very slow to accommodate kids' eye-hand coordination.

o Kids loved the option to email their wish lists to relatives.

The remarkable thing, about all the lessons LEGO learned on the way to a highly successful revamp, is that just 96 consumers total (48 parents, 24 tweens and 24 young teens) were involved in the focus groups and usability studies.

LEGO didn't risk showing a non-optimized site to masses of consumers before "getting it right."

"If you haven't done usability work, one of the things you think is, gosh, it's only so few interviews, how can we make a decision based on that?" says Conley. "But that was my biggest surprise -- how much you can learn at the end of the day. You can really learn where people are stumbling and what needs to be fixed."

By the time of the launch, she says, "It was perfect in my eyes."

Useful links related to this article

Samples of various LEGO design tests, including losers:
http://www.marketingsherpa.com/lego/ad.html

Sachs Insights, the team that conducted LEGO's usability study
http://www.sachsinsights.com

WebSideStory's HBX, the analytics software LEGO uses to conduct tests and improve the site on an ongoing basis:
http://www.hbxondemand.com

LEGO's current site
http://www.lego.com