It's a small world

Designing sites for the smartphone screen requires a rethinking from the ground up.

Bill Siwicki

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.

Design choices

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.

"The home page is clean and simple and follows the content we have on the e-commerce site," Gniwisch explains. "When you see a marketing campaign from us you will typically see a campaign that includes a web push and a mobile push."

Hero saves the day

Like Ice, e.l.f. cosmetics wants its promotions pushed out on both the web and mobile simultaneously, and it also is using the home page of its m-commerce site to highlight special deals. But rather than have a vertical stack of boxes like Ice, e.l.f. uses rotating hero shots at the top of the page. This enables every promotion to get the top spot on the home page and doesn't require a consumer to swipe down to see more, e.l.f.'s Pulice says. Web and mobile promotions are handled in an integrated fashion using a single content management system.

"We are for the most part a value brand and we run a lot of promotions," Pulice says. "That hero banner is there to let customers know what promotions we are doing this week, anything new and relevant. We feel like it is a big part of our strategy and success on our main site so we wanted that to translate to the mobile site."

Many beauty brands come out with new products on a seasonal schedule, but e.l.f. cosmetics routinely has new products—which it manufactures—and offers. That requires a design approach that prominently features new products, says Lesley Klein, director of e-commerce at e.l.f.

"These rotating banners give us space to show the exciting, new items, what's special for us this week," Klein says. "The banners allow us to easily manage marketing. They're like the front window of a store."

A ubiquitous ticker

Promotions affected another design element: a thin bar with a running ticker that describes current promotions. This ticker appears near the top of every page but the home page.

"Whatever our big promotion is for a period, it will follow you throughout the mobile experience," Pulice says. "No matter where you are or where you enter the site from, you will know we have this promotion running."

Another deviation from the e-commerce to the m-commerce site appears on the home page. Unlike the e.l.f. e-commerce site home page, the m-commerce site home page features the aforementioned nine-icon grid of buttons (see image, page 14). This design choice was made to keep things simple.

"In a mobile setting you only have so much space you can fit into the screen, so things have to be easy and quick," Klein says.

In addition to the buttons, a site search box appears at the top of the page, just under the company logo.

"We know that people want to move quickly in the mobile world and searching is the quickest and easiest way to find what you are looking for," Pulice says. "Our visits with a search convert two-and-a-half times better than without a search. We want it to be easy when they know what they want to buy."

Picture this

Like site search, imagery is very important in the mobile world, which relies more on visuals than text. Both Ice and e.l.f. cosmetics feature large product images throughout their mobile sites. Large images have the biggest impact on shoppers because they showcase a product within the constraints of the small screen of a smartphone, the retailers say.

"A lot of consumers want to see the details of the earrings or necklaces before they purchase," Ice's Gniwisch says. "Nine times out of 10 when they are purchasing something on the e-commerce site they zoom in on the image. The picture, the Add to Bag, and the Ice price—those are the three things we want to see pop when you hit that mobile product details page. If the image was much smaller it would be a tougher sell for the customer."

Plain and simple, images trump text, says e.l.f.'s Pulice. "Web commerce is evolving to a more visual world so we wanted to make sure the product image was big enough that it made enough of an impact," he says, adding that incorporating video to tell product stories is next on his m-commerce to-do list. "We're moving toward the image and video world, which we think translates better than trying to read a bunch of copy."

E.l.f.'s mobile design choices are paying off. "In the first 20 days we have taken 3,300 orders for $100,000," Pulice says. "We know the site and the design are working, people are transacting on it."

Mobile commerce site design is all about meeting the unique needs of the smartphone user who is shopping on a very small screen. And that means keeping things simple, clear and usable. Mobile designers who look through the eyes of a smartphone shopper can build successful sites that please mobile consumers and sell.




Acquity Group, Acquity Group LLC, Cory Pulice, e.l.f. Cosmetics, February 2013 magazine, Ice.com, Ice.com Inc., Lesley Klein, m-commerce site, m-commerce site design, mobile commerce, mobile design, Shmuel Gniwisch, smartphones, Tom Nawara