Designing sites for the smartphone screen requires a rethinking from the ground up.
Mobile commerce site designers don't play by the rules. That's not because they're design anarchists, there just aren't any rules to follow because m-commerce is still so new. Crafting an m-commerce site requires a retailer to find a design philosophy.
Ice.com Inc. CEO Shmuel Gniwisch had a clear philosophy in mind for the web-only jeweler's m-commerce site, which launched in November. He didn't have to look far. Gut instinct told him it should look and function as much as possible like Ice.com's successful smartphone app, which launched in 2011 and generated more than $300,000 in sales for the e-retailer in 2012.
"There is no standard mobile guideline that says this is the right or wrong way to design," Gniwisch says. "We're still in the very early stages of what mobile commerce should look like." Ice.com's m-commerce site today is rooted in the look and feel of the app, but can be easily changed to fit what Ice learns along the way, he says.
Mobile commerce is an open frontier with few design "best practices" or established rules. M-commerce is not e-commerce and the constraints of small–sized screens demand a rethinking of design, mobile merchants say. Retailers must make a host of design choices, small and large, always bearing in mind the mindset and capabilities of the mobile consumer. Among these choices is how to handle images, which merchants in m-commerce are finding hold more weight than text in the highly visual mobile realm. To guide the way, retailers need a coherent philosophy.
"Users expect and demand a mobile-specific experience," says Tom Nawara, vice president of digital strategy and design at e-commerce and m-commerce consulting firm Acquity Group LLC. "You have to think of it from the ground up. It's not just about making larger buttons, it's about thinking of the context of why a user is using a mobile site versus a desktop site, thinking through where and when the users are and the interactions they will have, thinking through all this as part of the ground-up design you need."
Culling what works
When it designed its m-commerce site that launched in November, e.l.f. cosmetics, operated by JA Cosmetics Corp., used a design approach that cobbled together what it believed worked best on its e-commerce site and on the m-commerce sites and apps of other retailers.
The m-commerce site, built in collaboration with the retailer's e-commerce platform provider BlueSwitch, features a large banner of rotating hero shots on the home page that highlight current promotions (see image). Atop the rotating banner is a site search box. Below the banner is a grid with nine icons for Shop, Best Sellers, New, Videos, Tools, Gifts, Purchases, My Account and Stores.
"We studied a lot of mobile sites out there in our category and other iconic brands we wanted to emulate," says Cory Pulice, vice president of e-commerce at e.l.f. cosmetics. "We took the best of what is working on our e-commerce site; sections like Best Sellers and What's New are where people go most and convert most. It is a blend between everything we had seen, and the non-commerce aspects such as making sure people could check on orders, contact customer service and access their accounts." Pulice cites beauty products chain retailer Sephora USA Inc.'s mobile efforts as a particular inspiration.
30% to 40% of all web traffic today at e.l.f. cosmetics stems from smartphones, Pulice reports.
At Ice.com's mobile site, perhaps the most noticeable app-like design element is the navigation bar that anchors the bottom of every page (see image). It mirrors the app's navigation bar; similar navigation bars are commonly found in retail smartphone apps. Ice's version contains five buttons: Home, Shop, Bag, Wish and More. A narrower navigation bar appears at the top of the screen.
"The bar is an easy way for people to navigate through the site and the functionality that is most used on our e-commerce site," Gniwisch says. "You can't do pull-down menus, so we did a Shop button to get a customer to categories. The Bag you want to make as accessible as possible. I put Wish List there to test it. All the other things on the top navigation bar like Featured, New and Gifts are nice things but they are not the biggest drivers on the e-commerce site."
A look at web analytics for the site's first two months of operation shows the bottom navigation bar is a success, Gniwisch says.
"The Shop button is the highest visited button on the site besides the Home button," he says. "Home is No. 1, then Shop, More and Bag. I'm very pleased customers are using the bottom navigation bar." Shoppers are using buttons in the bottom bar four times more often than buttons in the top bar, he adds.
Both Ice and e.l.f. cosmetics had many choices to make as they designed their m-commerce sites. They both stress that decisions must be made through the eyes of a smartphone user—what will work best for a consumer given a smartphone's size constraints?
Ice made all of its buttons bigger on the m-commerce site compared with their counterparts on the e-commerce site so there is plenty of room for a finger to touch. It also made windows bigger, so, for example, when a customer enters an e-mail address into a window she can clearly read it. Ice also cut images from the mobile checkout page to speed page loads.
"It's not like shrinking something. It doesn't work that way. The objective is about simplicity," Ice's Gniwisch says. "What do we want to highlight when the customer arrives; then deeper into the site, how do we want them to check out? All of these things have to be thought of from the ground up."
Ice designed the mobile home page to include four boxes stacked vertically, filled with content that changes on a regular basis.