February 4, 2013, 11:04 AM

It's a small world

(Page 2 of 2)

"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.



comments powered by Disqus




From The IR Blog


Rochelle Bailis / E-Commerce

Nordstrom vs. Macy’s: a department store showdown

Not only does Macy’s attract more online traffic, more of that traffic comes from mobile ...


Jaysen Gillespie / E-Commerce

Be a smart marketing Cupid in February to maximize sales

Campaigns optimized for smartphones will capture more last-minute sales and keep in mind that shoppers ...

Research Guides