Who doesn’t like bubbles? They’re round and clean and fun to watch. Turns out they make for a great-looking retail web site design, too, one that increased the conversion rate on mobile devices by 300% in only five months.
Bubbles, in this case, would be the layman’s terms. The bubbles on AeroLife.com are actually meant to represent particles, like the nutrient-filled particles of air delivered by devices sold by AeroDesigns Inc., a subsidiary of Quantum Designs LLC. The AeroLife technology delivers big sensations in tiny amounts, the company says. Tiny dry particles of natural food, nutrients, and soon, medications, follow the air into the mouth and land on the tongue. They are then swallowed to give immediate taste and quick nutrient delivery to the body, the company explains.
AeroLife sought outside help to build the innovative responsive design site, hiring Growth Spark, an e-commerce and m-commerce design and consulting firm. AeroLife briefed Growth Spark on its unusual product and how it worked, and presented the Growth Spark design pros with the air particles design concept.
“Growth Spark took that idea and made it better, which is what any good agency should do,” says Eric Freedman, vice president of sales and marketing at AeroLife. “They leveraged the particle concept to act as a content hierarchy system that enables us to use the particles as containers for differ content. The content-filled particles tell the AeroLife story in an orderly fashion from top to bottom. A customer can select an aspect of the story and the site will automatically reorder the particles, which include testimonials, social media, shopping and more.”
Growth Spark took the particle, a simple, elegant design concept, and made a novel user experience that remains aligned with AeroLife’s brand aesthetic, Freedman says. The responsive design site launched in November 2013. Since then, the mobile conversion rate has shot up from 1% to around 4%, Freedman says.
He adds that testimonials are crucial to the success of AeroLife because the product is so new and unusual.
“We normalize this new behavior through customer testimonials,” he says. “We found power users across a broad range of lifestyles and occupations, interviewed them, and now tell ‘day in the life’ stories about them online. The stories highlight people just like the shoppers on the site and people who shoppers aspire to be like.”
One particle floating near most of the different types of particles on all forms of the responsive design site (desktop, tablet, smartphone, other) is a hard-to-miss, hot pink bubble offering a free trial of AeroLife products.
“Once people learn about our products and have some intent to try some products out, we give them a highly visible and very easy way to start a free trial,” Freedman says. “I’ve been telling the AeroLife story for two years now, but this site really tells the story well, and on any device.”
AeroLife chose responsive design in part because its customers are “nomads,” Freedman says, meaning they are highly mobile. Further, the retailer’s customers expect the same shopping features and functions regardless of the device they’re using to shop, Freedman says.
“We needed a cohesive experience across all computers and not have a robust desktop site with a lighter version for tablets and smartphones,” Freedman says. “That seems silly to me. Our culture is on the go, and our products are highly portable and convenient. Building a single, holistic site that is responsive to all devices seemed to be the wisest move from strategic and technical perspectives. Responsive is the easiest mobile solution to manage, because when you make a change it automatically changes the site for every device. And our business is incredibly dynamic, we’re constantly changing products and messaging.”
There are a variety of forms and flavors of responsive design. AeroLife uses the original, called pure responsive. This is where the retailer collects everything needed to build a desktop version, tablet version and smartphone version of a site into one huge data package and sends that package whenever the site is requested, regardless of the device. The web browser on the client device extracts what it needs for that device. So page load times on high-speed landlines for desktops and high-speed Wi-Fi wireless links for tablets typically are fairly speedy. But sending that jumbo package over slower and inconsistent 2G, 3G and 4G wireless networks to smartphones typically results in very slow load times. This is complaint No. 1 from responsive design critics.
Freedman says AeroLife has taken steps to ensure good mobile performance, including using “lazy loading” techniques, where content loads as it is needed while a consumer scrolls through pages. And if AeroLife detects slow page loading, it immediately displays the highly recognizable circular animated GIF icon that stands for “loading, please wait.” Freedman says that at least assures consumers that the whole shopping experience they’re seeking will indeed be available in just a few more seconds. Freedman says Google Analytics shows AeroLife.com’s average page load speed is 3 seconds, but it does not break out performance by device.
Another complaint about responsive design is that it does not take into consideration details surrounding context; in other words, it does not create a shopping experience designed especially for a tablet shopper or for a smartphone shopper but merely shifts around desktop content to fit smaller screens in what the retailer hopes will be an appealing fashion.
“We’re very big believers in thinking about context first when it comes to mobile commerce design,” says Ross Beyeler, founder of Growth Spark. “Why is someone viewing your site at that moment on that device? If a store retailer comes to us and wants to bridge store shopping with online shopping via mobile technology, then that interplay using mobile, that context, comes to the forefront. But AeroLife is a web-only merchant, though its products are available at select chain stores. Our No. 1 focus for a web-only merchant is: How do we make it more money? And going responsive is the best way to make the biggest impact on a web-only business because that business immediately sees improved conversion rates across all devices, as has been the case with AeroLife.”
AeroLife.com and Growth Spark decline to reveal what it cost to build the pure responsive design site. Growth Spark does say, however, that responsive design site builds can cost a retailer from $30,000 for a no-frills version integrated to a single back-end commerce platform to $100,000 for more involved designs linked to a variety of systems.
Favorite