Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

How To Plan Your Next Mobile E-Commerce Website

The O’Neill Clothing store had a nearly 600% revenue increase1 from going responsive, and Skinny Ties saw a 377.6% increase2 in revenue for iPhones after going responsive as well. Even Think Tank Photo’s transactions on smartphones and tablets increased by more than 96%… go figure!

In this article, we’ll walk through all of the vital steps when planning a highly converting mobile e-commerce website. The most important questions you need to ask are:

  1. Who are we building this mobile website for?
  2. How will we measure conversion success?
  3. What design factors affect mobile e-commerce conversion rates?
  4. What is the ideal product page?

Let’s get started.

Further Reading on SmashingMag:

So, Who’re We Building This Mobile Website For? Link

The mobile customer is someone we are constantly learning about as mobile adoption becomes more widespread and filters into everyday life. To plan a mobile e-commerce store, we need to put ourselves in the mindset of the mobile customer and understand their intentions and mood.

Phone Usage Locations Link

The mobile device is a life-invading piece of equipment. We use it in diverse situations:

  • while watching TV;
  • while shopping or on a night out;
  • in bed or in the bathroom;
  • while eating a meal (a pet hate of mine!);
  • when bored or waiting at our desk, at a train station or as a car passenger.

In each situation above, the person’s mind will be in a different state and may or may not be in “purchasing mode.” We also use mobile at different times of the day.

Device preferences throughout the day7
(Large preview8)

How does this help us? Well, for example, you could strategically place different banners on the home page of your mobile e-commerce website, such as price promotions, discounts or coupons, perhaps offering early-morning discounts for commuters, while offering TV dinner viewers something else in the evening (something like “Bored of watching soaps? Grab a DVD bundle now!”).

The Main Types of Mobile Shoppers Link

Columbia Business School identified five types of mobile shoppers9 in showrooms and stores: exploiters, savvys, price sensitives, experience-seekers and traditionalists. I have gone one step further by thinking about how people use their phones outside of the showroom to decide whether to purchase products.

  • The comparer
    The comparer browses products in brick-and-mortar stores while price-checking on their mobile device. They might buy in-store, using the online price as negotiation leverage. However, if the online offer is strong enough and the product is available, they will purchase on their phone there and then or when they get home later.
  • The deal lover
    This person loves a bargain, and when they are in store, they’ll look for an online voucher, a Groupon deal or something to save them from buying at the high street price. They differ from the comparer in that they want to believe they are getting a special deal, a limited offer or an exclusive promotion (think Secret Escapes’s exclusive deals or’s lowest-price guarantee).
  • The social shopper
    Constantly connected to a range of social channels, the social shopper follows celebrities, industry leaders and brands on Instagram, Twitter and Pinterest, seeking out the latest fashion trends, gadgets and the like. Clicking through everything from vintage-filtered photos to heavily liked dresses, they just have to buy to be ready for the weekend.
  • The time passer
    This person just needs to pass the time while waiting for someone or something. They are normally an impulse buyer, browsing stores they already know (a form of direct traffic) for the latest products. They might subscribe to news feeds or email lists and click through from direct promotion in social channels, too.

All of these types of mobile shoppers have high expectations of mobile e-commerce stores.

Customer reactions to brands with poorly performaning mobile sites and apps10
(Large preview11)

Why is this important? You need to ensure that you’re catering to all of the different types of shoppers who might visit your store on a mobile device. You’ve got to identify them, give them the options they seek and present information in a format they are comfortable with. If not, you’ll end up annoying them, rather than increasing your client’s bottom line.

How Will We Measure Conversion Success? Link

We need to define what conversion success looks like. Typically, a conversion falls into one of the following categories:

  • Purchase
    The visitor has completed a purchase transaction.
  • Social promotion
    The visitor might follow your social channel; share, tweet or like your product or brand; write a review; subscribe to a newsletter; etc.
  • Complete a task
    The visitor has completed some task, whether playing a game, filling out a poll, entering a competition, etc.

We then need to set ourselves some SMART goals12 (as defined by Paul J. Meyer) to track and measure our success. These goals will also help us focus on the project and not get carried away with over-spec’ing or over-designing the website. So, what are SMART goals?

  • Specific
    The goal should be unambiguous and should define what we are trying to achieve.
  • Measureable
    How are we going to measure this? By what method? We could go further by saying who will be responsible for reporting this and whom they will report to.
  • Attainable
    How will this goal be achieved? What needs to be done to make this happen? Do we have the budget, skill and time?
  • Relevant
    Is this in line with our overall vision? Is the market ready? Are we the right people to do this?
  • Time-bound
    How quickly can this be achieved? When are we going to start and finish?

Below are three sets of goals we’ve set in the past. These would directly affect how one goes about designing and developing a mobile e-commerce store.

SMART Goals 1 Link

  • Specific
    Increase mobile e-commerce conversions by 35%.
  • Measurable
    Segment sales report in Magento.
  • Attainable
    Do this by creating a responsive e-commerce store.
  • Relevant
    This aligns with our overall conversion targets and goals to adopt mobile technology.
  • Time-bound
    Accomplish it within three months of the website’s launch.

SMART Goals 2 Link

  • Specific
    Increase the average order on mobile by £5.
  • Measurable
    Combine the segmented sales report in Magento to give an average daily order value.
  • Attainable
    Improve upselling and cross-selling on product pages, and recommend complementary products in the shopping cart.
  • Relevant
    This aligns with our overall conversion targets.
  • Time-bound
    Accomplish this within 30 days, and then continually improve through testing and iteration.

SMART Goals 3 Link

  • Specific
    Reduce bounce rates to below 56% for top-level categories.
  • Measurable
    Analyze the report of page visits within a set time period in Google Analytics.
  • Attainable
    Improve loading time to below four seconds on a 3G network, and improve the landing page design.
  • Relevant
    Although not a direct conversion itself, this would improve all other conversion rates by keeping users on the website for longer and increasing the number of pages visited by each user.
  • Time-bound
    Test over a 14-day rolling period, iterating on the design until we hit the target.

Tip: Print these goals in a large font size and put them where the whole team can see them. Ask the team members how their work will contribute to the shared goals. If a task doesn’t contribute at all, then question whether it’s needed.

What Design Factors Affect Mobile E-Commerce Conversion Rates? Link

Let’s go through the factors that affect how customers browse an e-commerce website, from a mobile perspective.

Hierarchy and Navigation Link

Space is at a premium on mobile. We don’t have the luxury of providing mega menus for users to browse multilevel categories. Therefore, we need to prioritize key features and content and provide a search box that’s easily accessible in a consistent location. The adoption of off-canvas navigation13 is becoming widespread as users start to understand how to use it.

Currys’ responsive website does this very well by providing off-canvas top-level navigation, a search drop-down box, instant cart and account access, and a store finder, all in a very small space that remains consistent throughout the customer’s entire journey.

Curry's responsive website14
(Large preview15)

When you scroll further down, the logo area disappears and the five main menu items move up, decreasing the space taken up by the header and giving priority to the content that the visitor is interested in.

Currys’ main menu on responsive website16
(Large preview17)

Trading Usability and Loading Time for Branded Navigation Link

Sometimes you need to make a tradeoff. When we developed Crockett & Jones’ mobile website, our branding guidelines and the company’s heritage and reputation for quality led us to a more pictorial menu system, to reinforce the brand. We experimented with five intuitive navigation methods:

Five intuitive navigation methods18
(Large preview19)

From our research into the leading mobile e-commerce websites, we felt that a fixed menu at the top would offer the best usability. Icons like the ones on Currys’ website wouldn’t be right for Crockett & Jones’ audience. Instead, we used a menu button that expands down to a navigation list, with subpages that load via a matrix menu. This allowed us space to add imagery, to give that look and feel of British heritage.

Navigation on the responsive website of Crockett & Jones’20
From left to right: (1) the expanded navigation; (2) the matrix submenu; (3) the product search results with matrix navigation for finger-friendly tapping, plus another expanding menu for the product filter. (Large preview21)

Fixed Navigation Vs. Non-Fixed Navigation Link

Fixed navigation sits in place, always visible to the user whether they scroll up or down. Non-fixed navigation is the opposite, visible only when user is at the top of the page.

Based on the e-commerce websites of major brands I have followed, the trend is towards fixed navigation, which I think is justified. For me, fixed navigation wins hands down; having to scroll all the way back to the top of the page to find the menu bar is annoying. With fixed navigation, you are only ever a quick finger movement away from accessing deep sections of the website. Achieving this is easy with the MeanMenu22 jQuery plugin or with Bootstrap’s NavBar23.

Imagery and Product Photography Link

We all know that photography can make or break a website’s look and feel. The mobile consumer wants to see imagery that captivates them and inspires them to make a purchase, whether it’s a vacation or a saucepan. The fundamentals of product photography are ever critical here, so make sure to get all of the pictures that a customer requires to make a decision.


  • Individual shot
    This is a shot of the product at its best angle, normally against a white background.


Shot of the product at its best angle24


  • Detail shot
    This is a closeup showing the product’s special features or details of design — for example, the quality of the stitching, the materials used, the label or the handcrafted detail.


Closeup of the product showing more details25


  • Components shot
    If it’s a home cinema system, then take shots of its individual parts, including the DVD player, speakers, remote control and accessories.


Components shot26


  • 360° shot
    This is an animated set of images that allows the user to spin the product through 360° of rotation. It’s normally comprised of 36 shots, each 10° apart. We used this to fantastic effect with the shoes on Crockett & Jones’ website27. We shot with Eme Digital’s Large 360 Photography System, and then writing custom jQuery to control the rotation effect.


360° shot28


  • Group shot
    This is normally used at the category level or for bundle offers. Group shots — whether for a range of saucepans or for a pizza, side and drink — show complementary products and help the vendor upsell to customers.


Group shot29


  • In-use shot
    An important but often forgotten shot is one of the product being used. For example, clothes look very different when laid flat than when shown on a live model. These shots are aspirational and can highly motivate a customer to purchase.


In-use shot30

On mobile, speed is a hurdle, so remember to optimize images to load quickly, without compromising on quality. Of course, a lot of effort is being put into developing a responsive image solution31, but whatever approach you take will only be as good as your photography. Peter Crawfurd goes over how to “Improve Your E-Commerce Design With Brilliant Product Photos32.”

Typography Link

Wondering how to turn off mobile users very quickly? Make them have to pinch and zoom to read text! Having to zoom in to make text legible on a phone is very annoying, so ensure that your typography is readable, contrastive, responsive and well spaced. There are techniques for responsive typography33 that we can follow.

(Large preview35)

We achieved the typography above with a simple CSS media query, based on Bootstrap 3’s breakpoints for device widths, to ensure consistency across all devices.

@media screen and (max-width: 320px) {
  .hero h2 {
  color: white;
  font-size: 2em;
  font-weight: 100;
  font-family: "bebas-neue"; } 

Finger Friendly Link

All of those critical calls to action should be large enough to be pressed by a finger. According to “Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes36,” that’s about 57 pixels wide for a finger and 72 pixels wide for a thumb. The article also notes, “This is consistent with Fitt’s Law37, which says that the time to reach a target is longer if the target is smaller. A small target slows users down because they have to pay extra attention to hit the target accurately.” I would say that most of us have overlooked this fact for many years, especially as we adjust out of our 1024 × 768 mindset.

This is very important for all areas that are common to mobile e-commerce websites:

  • navigation of category tree;
  • search buttons and filters (especially checkboxes that require precise touch);
  • all buttons, including “Add to cart” and “Pay now securely”;
  • form fields to enter billing and shipping details;
  • thumbnail pictures of products;
  • swiping for product photos, instead of tapping left and right arrows.

Contrastive Color and Light Conditions Link

Whatever color palette you choose, strong contrast is imperative for buttons and calls to action. If an object blends in, users will likely miss it.

Consider the lighting conditions of your mobile users and how to accommodate them in the look and feel of the website. Try turning off the lights, going out into bright sunlight and huddling under a reflective lamp to see how your color palette performs. You can adjust the CSS to account for different lighting conditions with what are known as light-level media queries.

@media (light-level: normal) {
  p {
  background: url("texture.jpg");
  color: #333 }

@media (light-level: dim) {
  p {
  background: #222;
  color: #ccc }

@media (light-level: washed) {
  p {
  background: white;
  color: black;
  font-size: 2em; }

Although no browser currently supports these, light-level media queries are a cool feature that will hopefully be adopted soon because mobile devices really are used in different lighting conditions. This sort of technology could improve conversions with mobile usage in dark and bright sunlight. One could even imagine swapping promotional banners for daytime and nighttime!

Tip: Don’t be afraid of red buttons. Conversions have increased on a ton of websites that switched to red for strong contrast. Test and iterate!

White Space and Encapsulation Link

White space gives content room to breathe, aids eye flow and declutters. It can relax the visitor when making a purchasing decision.

Use encapsulation to draw the visitor’s attention to an element, such as an “Add to cart” button. Create a container for the button with a contrasting background color. Unbounce does a great job of explaining encapsulation38.

Copywriting Link

The majority of clients will supply you with copy for their products, categories and generic pages, because we designers and developers don’t always know the products as well as our clients (hopefully!). However, we do know about persuasive wording and how to use it in calls to action. For example, “Pay securely now” is more motivating and instills more trust than just “Check out.”

Long descriptions can be annoying on a small screen. Consider a “Read more” link to reveal more text, or split up a description into a few tabs to allow mobile users to flick through for the information they are looking for.

Tip: If your client is writing the product descriptions, get them to read Craig Anderson’s “E-Commerce Copywriting: The Guide to Selling More39,” which walks through the basics of writing good copy.

Forms Link

Forms slow everyone down. The user has to stop and think about filling it in, provide the right data, scan for accuracy, check and uncheck boxes and so on. Forms can be especially cumbersome on a mobile device, so make sure yours are finger-friendly and legible. Remember to use the right input type (URL, email, telephone, etc.) so that the mobile browser displays the appropriate keyboard.

Indicate to users their position in the checkout process, too, so that they see their progress and see the light at the end of the tunnel. Derek Nelson puts it well in “Designing a Better Mobile Checkout Process40.”

The Ideal Product Page Link

I don’t think you could ever get the “perfect” product page because a lot is left to the eye of the beholder. However, Currys’ product page gets pretty darn close. Let’s break it down.


Currys’ has the following attributes:

  • clear product title, with responsive typography in corporate color palette;
  • price in contrasting color and responsive typography that stands out and is readable above all other pricing information;
  • very clear call to action that stands out above all other links on the page (with simple form encapsulation and finger-friendliness);
  • great photography, with all of the shots a user needs to make a purchasing decision (including individual, component and detail shots);
  • short description giving a quick overview of the product’s features;
  • more detailed information about the product for researcher-type customers;
  • indication of availability, showing where and when the customer can get it (with simple form encapsulation).

Overall, the page is well spaced, with 20 pixels of white space between block-level elements. Corporate branding is present without cluttering the page, and the goal funnel is clearly defined. If the visitor is interested in the product and the price is right, then they would have no barriers to purchasing it.

Is It All Worth It? Link

Crockett & Jones Link

The results for Crockett & Jones were overwhelming, with increased time on pages, increased views of the 360° photos (which we set as a conversion goal in Google Analytics to measure their effectiveness) and a reduced bounce rate for mobile users, which I strongly believe is due to the quality of the content, images and videos. The pages visited has also gone up, which I attribute to the navigation layout. The expanding menu fixed to the top makes it very easy for the user to jump around the website and find their way back, while upholding the heritage of the brand. Page speed could certainly be improved, but we had to balance optimization with high-quality images that reflect the brand, and this is certainly something we are still working on.

Summing Up Link

Putting together a mobile e-commerce website is a multidisciplinary task that encompasses business management, design, development and marketing. Whatever your agency’s size, create a boilerplate process that you can follow for all websites but that you can adapt to each project’s specifics. In the planning stage of this process, cover the following:

  • Who are you designing for (i.e. your customers)? What are their buying habits, and what drives them to buy?
  • Put together SMART goals that give you and the client a common vision.
  • Create a style guide that is suited to mobile devices, including button design, font size and so on.
  • Generate wireframes with details for all key pages (home page, category page, product page, search and shopping cart).
  • Bring together all digital assets (photography, video and copy).

Planning in this way will help you deliver an e-commerce website that is well optimized for mobile, that is targeted at your client’s customers and that coverts more visitors into buyers.

Bonus Take-Away Material Link

You can download the “Mobile E-Commerce Conversion Rate Optimization Checklist42” (PDF), with 80+ points to help you get your mobile e-commerce store in ship shape.

(al, il)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42

↑ Back to top Tweet itShare on Facebook

Lawrence Howlett has a real passion for user experience and lead generation. He owns and runs — a full service digital agency, started from his bedroom, that now operates websites and manages digital marketing campaigns for high street brands and house hold names. Lawrence also shares his expert knowledge through eLearning courses, eBooks and blogging - connect over at

  1. 1

    Daniel Schwarz

    March 19, 2014 9:11 am

    I think the light-level thing was a stroke of Genius, capital G. You learn something new everyday ;)

  2. 2

    adolf witzeling

    March 19, 2014 11:52 am

    Good article. Tried to share (tweet) but when clicking the share button nothing happens. I’ve been having this issue for some time now but only on your site. Same in Safari, Firefox and Chrome. Any suggestions? Did you block me from sharing?

    • 3

      Iris Ljesnjanin

      March 19, 2014 12:12 pm

      Hi Adolf,

      This is quite strange. It would be great if you could share a screenshot ;-) Thanks!

      • 4

        Ferdinand Vogler

        March 19, 2014 1:13 pm

        I think it’s quite hard to share a static screenshot of nothing happening… ;)

      • 5

        adolf witzeling

        March 19, 2014 12:57 pm

        Hi Iris, thank you for your response. I uploaded the screen capture to tinypic (url below). The weird thing is that I don’t get any error messages. So far I’ve tried to empty the cache and pop-ups enabled.
        [IMG][/IMG]. Any help is appreciated especially since I love your site and news. Regards,

  3. 6

    The article says: “that’s about 57 pixels wide for a finger and 72 pixels wide for a thumb.”
    Since not all users have the same mobile device you also need to consider the users device screen density.
    On a High end phone ( 5 inch, 1080*1920) a recommended minimum width for a touchable item is about 144px which in turn would look absolutely ridiculous on a 4 inch 480*850 display (which has a minimum recommended with of 72px for touchable items).

    You need a physical size of about 7-9mm to achieve comfortable touch areas

    • 7


      I don’t think you can get physical size of your device very easily. 57/72px is an approximate measurement for normal-density screens. As far as I know most Retina/High Density screens interpret pixels as if they were 2 pixels on their screen. What I mean is that if you tell your iPhone browser that something should be 320px it will take up the whole screen width, even if it is 640px.

      Best thing is to test and expect the worst, not just count the pixels and expect them to magically work because math said so :)

  4. 8

    Luis Guerrero

    March 19, 2014 9:40 pm

    In-use shot is an amazing idea! Just a few brands use this kind of product photography. I think it does not matter the kind of product you are selling, always is an extra point for stores to let customers see their probably next purchase in a real situation.

    This article goes directly to my digital notebook to study it further and make the most of it.

    Thank you.

    • 9

      Lawrence Howlett

      March 19, 2014 11:51 pm

      Thanks Luis, appreciate your kind comments. Maybe your digital notebook would be a useful resource to share with others online somewhere?

      • 10

        Luis Guerrero

        March 20, 2014 9:18 pm

        Actually that is an excellent idea, I had not even thought about it. My notebook is still in process and is not organized, but I am going to take your suggestion seriously. Thank you again, I have found just brilliant ideas in this article.

  5. 11

    This article is really good, things that are different in the environment with a different light on devices is a new learning for me. Non-fixed navigation helps you to save the space, which you really need in case of a product list page, so an easy solution is to reach for the main menu to stay on top so we can always have the top buttons floating on the screen.

  6. 12

    I recently attended a mobile conference with Luke W. as the keynote speaker. He brought up a really interesting discussion around the ubiquitous 3 line menu icon that Facebook originally popularized (he called it the “Hamburger” icon). Anyhow he referenced an A/B test that was done on the icon and whether people really understood it’s purpose as a jumping point to hidden menu items. Here are the results of that test. It’s worth a read. Just something to keep in mind as you build your mobile stuff.

  7. 13

    Edward Meehan

    March 23, 2014 8:39 pm

    Awesome article, really covered a lot of subjects on mobile ecom. Gold star, thumbs up, good job sir!

  8. 15

    Great article – best one I’ve seen yet on mobile commerce! But I also have a question Edward.

    I have a B2B marketing account who wants to go a responsive site (using Bootstrap). They then want to add a “customizable” shopping cart to the finished site. They presently use a standard form, but it is very limiting. Their current merchant account for credit card orders has a payment gateway for

    I was wondering, if you could offer any advice on the best add-on shopping cart solution for a responsive website? Thanks!

    • 16

      Lawrence Howlett

      March 25, 2014 12:28 pm

      Hi Stephen – What is you level of experience with Magento and Bootstrap? If you are comfortable editing your own theme then I would use a framework base and put in your own styles over the top. If you are a beginner, than I would seriously look at using, dare I say it, a purchased theme from one of the many providers and then customising it to your requirements. Whatever route you go down, leave yourself enough time to plan, build, populate and test! Good Luck :)

  9. 17

    Excellent overview of mobile e-commerce, Lawrence! I find many of the design teams I work with to be overly clever when it comes to e-commerce sites. While cutting-edge designs may be appropriate in some cases, it seems simplicity and remaining conventional always win on the bottom line.

    p.s. will be implementing your “Pay securely now” suggestion at work tomorrow. :-)

    • 18

      Lawrence Howlett

      March 25, 2014 12:31 pm

      Thanks Graham. I agree in most cases, we just recently did a store for a pet shop with over 4000 products. We needed to implement a simple, clean design rather than something overly clever as you put it. This differs when you have branding guidelines and a client with more budget to spend on design, for example Abercrombie & Fitch will want a lot more effort on design to match their branding than a start up “box shifter” – it’s then our job to balance the budget and spend it where the client will get the best returns.

  10. 19

    Great article. We are in the process of launching an online store but are overwhelmed with the multitude of options available. What do you think is the best ecommerce platform for an online business?

    • 20

      Hi Sue. Well in the spirit of everything to do with the internet, that depends! What sort of business are you? Who are your customers? What product range do you have? Do you need inventory tracking? Etc… A good starting point is Magento and Shopify.

  11. 21

    Good article, best one I’ve seen yet on mobile commerce! Covers a lot of subjects on mobile e-commerce. Thanks..!

  12. 22

    Great article. I manufacture wedding rings and am in the process of launching an online store but I do not have a website yet. When I approach a company to design a mobile site, what would be the best for a jewellery online retail store? What do you think is the best e-commerce platform for an online jewellery store? Thank you very much…

  13. 23

    we are in dire need of a mobile friendly site however because we have a heavily specialized integration with out catalog warehousing system (ECOMETRY), it has been very cost prohibitive to go mobile. Can you recommend a mobile site builder that could use a product feed (like our Google feed) to at least feed in products and then we may have to create some sort of import back to our main system for the mobile orders??


↑ Back to top