M-commerce designers borrow from e-commerce to create sites and apps that sparkle and pop.
Most mobile commerce sites and apps let consumers navigate by category tabs and by entering terms into a search box. But when executives at apparel and accessories retailer Bluefly Inc. set out to design an m-commerce app, they wanted to be able to merchandise products in a more powerful way, and to make shopping by mobile feel familiar for consumers used to shopping at Bluefly.com.
The result is a mobile app design that stands out in the growing crowd. Below the colorful Bluefly logo atop the home screen is a large area devoted to six hero images that slide left to right and back. Each image is vivid and presents a special promotion. Below the hero shot gallery is a sliding bar with five images that define categories; a touch on a category takes a shopper to product pages. And below the sliding bar are five small buttons that let shoppers go to areas of the app including Browse, Search, Bag and My Account.
This is not a run-of-the-mill m-commerce experience.
"We were looking at different apps and most of them were fairly mechanical—browse, search, buy. We wanted a little more of a merchandising feel," says Martin Keane, senior vice president of e-commerce at Bluefly. "When you come into our app, you can scroll through different promotions on the home screen, and at the bottom you can browse through a number of categories."
While still working on making the app faster, he says, "We've done a good job of replicating the merchandising and browsing of Bluefly.com."
Bluefly is among a handful of mobile retailers that are going beyond the functional but conventional approach of offering text navigation and a search box. These retailers are dressing up their mobile sites and apps with design elements common in e-commerce but uncommon so far in m-commerce. That includes rotating hero shots, bars that slide products from left to right and back, and personalization.
The goal is to create a rich, more visual mobile shopping experience that's still fast. The challenge is to do it without hurting performance.
Like Bluefly, The Golf Warehouse's mobile app greets consumers with large imagery. The home screen presents, one at a time, five images, each reflected as if it were sitting on a mirror. One image is of equipment, and is labeled as such. Slide to the right and an image depicts the apparel/shoes category; further slides go to accessories, home/office/gift, multimedia and team logo. A touch on any image takes a customer to a screen that enables him to narrow by product type and quickly get to the product he is looking for.
The imagery offers large visual cues as opposed to navigation based on numerous text boxes that can create a dull, repetitive look and feel, Livingston says. Usability concerns drove the design, he says.
"Rather than try to shrink the site down to fit on a smaller screen, we took into account the nature of mobile, thinking about how the mobile app would look and feel and be used before getting into the aesthetics," says Patrick Livingston, director of user experience and new ventures at The Golf Warehouse.
A very different look
Usability also drove the look and feel of Amazon.com Inc.'s m-commerce site and app. Both start with site search just below the logo at the very top. Because of the vast number of products Amazon offers, it considers site search a crucial tool in enabling mobile shoppers to find what they want quickly.
By encouraging consumers to search, Amazon, like The Golf Warehouse, gets away from navigation by a series of text boxes. Once on a search results page, a shopper can click to a product detail page to view larger images and customer reviews. Then, if he has an Amazon account, he can buy with a single click. (Amazon's mobile sites and apps, like its e-commerce site, recognize returning shoppers without their logging in.)
"This is a great example of how the design had to be simple and 'glanceable' at first view, but still offer a path to more detailed product information," says Sam Hall, director of Amazon Mobile.
Another familiar feature from its e-commerce site that Amazon has brought to its mobile site and apps is personalized recommendations. On the site a customer presses a button to see more recommendations without the need for a page refresh; on the app a shopper slides images from left to right and back.
Few mobile retailers devote real estate to personalization, but Amazon relies on the Recommendations For You element to cross-sell additional items. As such personalization has become a key part of Amazon's mobile design scheme.
"Our goal in surfacing Recommendations For You is to provide an immediate recognition of your relationship with Amazon," Hall says, "hopefully in a way that allows you to discover products of interest."
Elements like personalization areas and rotating hero shots are commonplace in e-commerce, and e-commerce managers have come up with techniques to make sure they don't slow down site performance significantly. But performance is a bigger concern in m-commerce where data is being transmitted over slower wireless connections. Bluefly, The Golf Warehouse and Amazon all say customer feedback and usage shows their designs are heading in the right direction.
Amazon.com, for example, is doing well with its m-commerce site performance, according to January measurements taken by web and mobile web performance management firm Keynote Systems Inc. for Internet Retailer. Amazon's m-commerce site home page downloaded on average in 5.25 seconds and did so successfully 98.96% of the time for a score of 704 out of 1,000 on the Keynote Mobile Commerce Performance Index. Even though it pours on the images and personalization in mobile, Amazon beat the average score of 592 for the 15 representative retailers tracked in the index.