2012 was the year of emerging technologies for Fathead, a web retailer of life-size wall graphics of athletes and stars and custom-made wall graphics of a consumer’s family or friends. In the spring the e-retailer launched a mobile commerce app for smartphones that uses augmented reality technology to transfer the image of a wall graphic onto a consumer’s wall via her smartphone camera view. And in November Fathead launched a completely redesigned e-commerce site built using responsive web design so it automatically reformats the design on the fly to fit the size of the screen of any device accessing the site, be it a desktop computer, tablet, smartphone or TV.
Mobile traffic as a percentage of total traffic at Fathead has grown from 10% in 2010 to 25% today, and Fathead had to respond to this steadily growing group of shoppers to make shopping as easy and enjoyable as possible on smartphones and tablets, says Michael Layne, director of Internet marketing at Fathead.
Adopting the responsive web design technique for its web site was the big play. Responsive design is a relatively new concept that enables a retailer to maintain one code base and one set of web content to create a site that rearranges itself to fit any screen. It’s an alternative to creating an e-commerce site, a separate site optimized for tablets and a separate m-commerce site for smartphones.
“We had a separate mobile site we built in 2010,” says Tom Smith, a web engineer at Fathead. “We set that up when we were looking at increasing mobile traffic on the old site, which was hostile to mobile users. When the time came around to re-evaluate our e-commerce site design, enough of the media query/responsive-capable web browsers were out there that we could move forward into the future of responsive design.”
Media queries allow the presentation of web content to be tailored to a range of devices without having to change the content, a key to responsive web design. Internet Explorer 9 and up, Chrome, Firefox, Opera, Safari, and most mobile phone browsers can handle responsive design and media queries.
Fathead web and design staff members designed a grid with five columns as the foundation of web pages. Smartphones receive the narrow one-column display, some tablets the two-column display, standard desktop computer monitors and some tablets the three-column display, and extra-wide desktop monitors and laptops the four- and five-column displays.
“Once they had the framework built and the five columns, template and sizing in place, I went through with our CIO and built a document that instructed every page type what the content would be for each of the different column width layouts and what went where,” Layne says. “It’s a joint effort between marketing and technology staffs to build a responsive design site. Having those guidelines and framework in place and being able to plug assets into spaces was a very helpful way of doing it.”
The one-column view (smartphones) accounts for 16% of traffic, Layne reports. The two-column view (tablets) 6%, three-column (tablets and desktops) 54%, four-column (widescreen desktops or laptops) 17%, and five-column (widescreen desktops or laptops) 7%.
“The conversion rate varies depending on how many columns are viewed,” Layne explains. “The more columns visible, the higher the conversion rate and the lower the need for searching. Average order value is different, though. The two-column view, which is largely tablets, has a significantly higher average order value. The bounce rate is lowest in five-column view.”
Layne declined to reveal exact figures. However, the benefits of responsive design are plenty, and, so far, there is no downside, Layne and Smith say.
“Having a single code base and one set of content lets us roll out content across all devices at once, which means we’re that much faster to market with things,” Layne says.
“From a design perspective, the branding and consistency across the mobile and desktop and tablet platforms is a lot more consistent when you have the same code base to follow,” says Tim Edwards, web designer at Fathead.
“Another way to look at it is, four years ago we focused on two web browsers, Internet Explorer and Firefox, they were 90% of our base,” Smith says. “Nowadays, with all the desktops and phones and tablets, you have to start working on something that can adapt to everything. There is so much to keep up with now.”
Building the responsive design site took 1,500 staff hours over three months, with 10 people actively working on it, Layne says. The cost? $250,000. Has Fathead achieved a return on its investment? It’s not terribly concerned about ROI, as it believes it had to successfully respond one way or another to the increasingly mobile consumer.
“We had a good year and a great holiday period. Would we have had as good a holiday season without the new responsive design site? Probably not,” Layne says. “With the responsive site we have a higher conversion rate, more page views per session and higher time spent on site. But we don’t look specifically at that kind of ROI. We know we have the resources to do this kind of thing, so we do it.”
The same applies to Fathead’s Big Shot smartphone app. The iPhone version has been downloaded 32,000 times, the Android version 5,000 times. Fathead built the app with Detroit Labs, a sister firm under an umbrella company owned by Quicken Loans creator Dan Gilbert. A consumer prints off a target and tapes it to her wall in her home, then opens the app, selects the Fathead graphic she wants to see on her wall, then snaps a picture of the target from eight to 10 feet away. The target is needed so the app can properly scale the large graphic to the wall. She then has a picture of the graphic in her home that she can share with friends and family via Facebook.
Fathead promotes the app in a box on the responsive site and in product packaging. “Any time we ship products to a customer we include the target and instructions so when they get their Fathead they get the sheet with the target on one side and instructions on where to go for the app on the other side,” Layne says.
Augmented reality is about previewing products, it gives a consumer context, Smith says. “It’s one thing to see something on a page in a catalog and another to see it in your house,” he says.
To purchase a graphic, the app sends the consumer to the responsive site. Commerce within the app may come later. Layne will not reveal exact usage figures for the app, but says the tens of thousands of people who have downloaded the app are using it.
“We wanted to see how many downloads we would get first and what kind of usage it got. Phase two would include commerce if we decide to take that route. It’s been used a lot, but it’s not a big driver of commerce,” Layne says. “We didn’t know whether it would be or not, but that wasn’t why we did it. We wanted to engage people and get them to socially share it. To secure the ongoing resources to maintain the app, it will be a combination of how many downloads, how many social shares, and revenue associated with it. The app is less than a year old; we’re still learning about it.”
Favorite