Between summer 2011 and summer 2012, traffic to the e-commerce site of Browns Shoes stemming from smartphones and tablets grew by 200%. 20% of all shoppers on BrownsShoes.com are on mobile devices. Something had to be done to cater to mobile shoppers, says Richard Sejean, director of e-commerce.
The chain retailer could have built a mobile commerce web site and optimized a version of its e-commerce site for tablets, and perhaps created a smartphone or tablet app, too. Instead, it worked with its e-commerce platform vendor, Demandware, and used responsive web design techniques to construct a new e-commerce site that renders differently depending on the size of the screen of a device. All of the site content, features and functions are the same, but they are displayed in a fashion that best suits the dimensions of a screen, be it on a computer monitor, a tablet, a smartphone or even a television via a game console Internet connection.
“We needed a great web site in line with the great experience we provide in-store,” Sejean says. “Responsive web design seemed the logical way to do it so we didn’t have to develop all these different apps and silos.”
Browns Shoes worked with design firm Le Site, which created wireframes—the foundational design schemes—for desktop, tablet, smartphone and large-screen versions of the web site. Demandware personnel helped with the programming.
“Responsive design didn’t present a barrier, it wasn’t too complex for the team to implement,” Sejean says. “It was easy for them to do. From a design perspective, you just have to make sure you are paying attention to the experience in all these different views.”
Sejean declines to reveal the cost of the responsive web design project, but says it’s the less expensive route compared with creating separate web and mobile sites and mobile apps.
“To get up and running the incremental cost was not huge. It was less expensive than having a mobile site or app built,” he says. “From a design perspective, though, it is a lot more work. You now have several versions of your site to design and test. Even though the materials are the same for one main site, the way it plays out on each device is different, and the amount of work from a strategy perspective is as much as if we had designed these sites in silos.”
During the new site’s first week up and running last week, 50% of mobile traffic came from iPads, 37% from iPhones and the balance from other mobile devices. The bounce rate on mobile—where a consumer lands on one page and then leaves without viewing any others—has decreased and time spent on site has increased, Sejean reports.
“Responsive web design is not a one-size-fits-all thing,” Sejean adds. “Someone needs to be thinking about different experiences on each of these devices. We’re just getting our feet wet. We know we need to be in mobile. That’s where a lot of our growth is coming from. And our first step was accomplished, and from there we will test, analyze and tweak. For now working with responsive web design will teach us a whole lot and we’ll take it from there.”