In an episode of the popular ABC show “Shark Tank” that aired last week, founders of the web-only fashion retailer ranked in the Second ...
Beyond the Rack employs a new approach to designing for mobile devices.
THE COMPANY: Beyond The Rack Inc.
THE PROJECT: Optimize its e-commerce site for rendering on smartphones.
THE REASON: In early 2012, flash-sale e-retailer Beyond The Rack, like most other e-retailers, was facing rapidly growing traffic from smartphones. And it knew that its customers were particularly mobile, using their smartphones to check in on sale events throughout the day from anywhere and everywhere.
There were some big signs that showed it needed to pay attention. Beyond The Rack's smartphone shopper conversion rate was only 0.56% and 42% of smartphone shoppers left the site after trying to view just one page of the e-commerce site on a smartphone. The e-retailer says navigating the full e-commerce site on a small smartphone screen meant shoppers had to pinch, zoom and swipe to read content and view pictures. Beyond The Rack concluded it had to provide a better experience for smartphone shoppers to boost sales.
THE METHOD: Beyond The Rack didn't want to move anything from its already jammed 2012 in-house technology road map, so it used a vendor to build the mobile site. It selected Mobify because the vendor uses a site-building technique that requires only a single tag be added to e-commerce site pages, it could deliver quickly (62 days from contract to live site), and because it could handle Beyond The Rack's speed and load requirements and produce an entirely customized site for the e-retailer, says Richard Cohene, director of marketing at Beyond the Rack.
Cohene, the marketing manager, the creative director, a technology department product manager and design staffers made up the Beyond The Rack mobile team that collaborated with Mobify personnel to design the site. Mobify created mock-ups based on its clients' best practices; the e-retailer's team reviewed the mock-ups and made changes that reflected the brand's design.
One of the tools in Mobify's mobile design toolbox is HTML5, an advanced web programming language that most mobile web browsers can handle and that enables developers to create mobile sites that look and function like their richer counterparts, mobile apps (see story, below). Beyond The Rack's m-commerce site uses HTML5 to play videos across all mobile platforms instead of using Adobe Systems Inc.'s Flash technology, which Apple devices do not render. The site also makes use of HTML5's local storage function, which enables it to cache data on a consumer's mobile web browser to speed page loads.
It also uses HTML5 to speed the new member registration and checkout processes. When a customer touches a data field that requires only numbers (such as credit card or phone), the site displays the telephone keypad instead of the standard alphanumeric keyboard. And when a customer touches the e-mail field, the site displays the e-mail keyboard, which features the "@" symbol and a ".com" key. These keyboards are available through HTML5, but not HTML4.
In addition, members who sign into their accounts can check out with just three clicks. To buy an item, all a customer must do is touch Add To Bag, Confirm Order, then Process Order.
Perhaps the project's most novel part was Mobify's use of a technique called adaptive design to optimize the e-retailer's mobile site. This is different from another mobile design rising star, responsive design. Here's how they differ.
Responsive design enables a retailer to build a single web site that detects the size of a device's screen and formulates a page to fit that screen based on rules written in Cascading Style Sheets, or CSS. The goal of responsive design is to use CSS to create a single web site that works on every imaginable device.
Adaptive design is a methodology that makes use of various technologies, including responsive design. Adaptive design creates versions of a site based not just on screen size, but what the device can do, and how consumers typically use it.
Adaptive design detects not only screen size but the kind of device. That makes it possible to build a site precisely targeted for that consumer. For example, adaptive design enables a retailer to deliver large Retina display images only to consumers on devices with Apple's Retina display, says Kyle Peatt, senior mobile designer at Mobify.
When a consumer on a smartphone accesses any page on BeyondTheRack.com, the Mobify tag recognizes the consumer's device and captures the HTML code before the device has a chance to download any of the page's content. Mobify then optimizes the captured HTML for mobile, calling the retailer's servers only for resources needed to build a page optimized for that device.
"After the HTML is optimized, it loads on screen, resulting in the device receiving the desktop content in a mobile adaptation," Peatt says. "By ensuring the right images and styles are served to that particular device, the download time and page size is dramatically reduced."
Some mobile commerce experts believe more retailers will turn to adaptive design, which can also be used for tablets, in the future.
"We are seeing a trend toward designing for mobile first and then adding layers of functionality for larger devices," says Tom Nawara, vice president of digital strategy and design at consulting firm Acquity Group LLC. He says "progressive enhancement," an adaptive design term that means starting from the minimum and progressively adding to that, will dominate over "graceful degradation," a term associated with responsive design that means starting with everything and removing what is not needed.