The Art of Building a Mobile eCommerce Website


In less then a decade, mobile shopping has grown to extraordinary proportions. According to Comscore, consumers are spending more time shopping via mobile devices versus desktops. 44% of retail Internet minutes were spent on mobile phones whereas 11% were spent on tablets. If you haven’t stepped into the world of mobile eCommerce, it’s time that you do. Rather than investing thousands of dollars on a shopping app, consider building a mobile eCommerce site instead.

“Aren’t Shopping Apps a Better Choice?”

Despite shopping apps promising a more personalized experience to shoppers, people actually prefer mobile sites. Kissmetrics reports that two out of three mobile users prefer shopping through mobile sites versus mobile apps. Some of the reasons behind this include:

  • Immediate Access – Mobile sites do not need to be downloaded and installed before shoppers can get to your goods; therefore, the barrier created between initial engagement and conversion is eliminated.
  • Compatibility with All Devices – You’ll need a separate mobile app for each of the devices your clients use. As a result, you’ll end up spending more time and money than you can actually afford.
  • More Functions – Mobile websites can be easily integrated with mobile technologies such as SMS, near field communication (NFC), and QR codes.
  • Instant Upgrades – Upgrading apps can be more of a hassle in comparison to updating sites. The latter is more convenient as you’re the one in charge of updates rather than shoppers. This added convenience would definitely be appreciated on the long run.

Mobile site owners also reap numerous benefits, including better share-ability, extended reach, and a long lifecycle. Due to this, your mobile eCommerce store will reach more individuals and be spared from being deleted within 30 days, which is the average shelf life of an app according to TechCrunch.

“So How Do I Get Started?”

In order to create a great mobile eCommerce site that attracts shoppers and converts them to loyal customers, you need to plan with the following four factors in mind:

Factor #1) Mobile Customer

To plan your mobile eCommerce site, you need to put yourself in your customer’s shoes and try to understand what their intentions are. First off, you need to determine the location of their mobile usage. As mobiles are life-invading equipment, their users play with them while watching TV, when using the bathroom, during meals, on the bus, or whenever they’re bored in general. Depending on the situation, your buyers may or may not be in the mood to spend money. By understanding this, you can customize your site, promotions, and banners accordingly. For example, if you owned a pizza shop you could offer discounts or coupons early in the morning when potential customers are commuting to work to show ads like ‘Don’t cook tonight; grab a pizza instead’.

Next, you should target mobile customers based on their type. There are four types of shoppers out there:

  • The Comparer – This type of shopper tends to compare the price of items found at brick-and-mortar stores with their online counterparts. He or she may buy in-store using the online price for haggling. However, the majority opts for good online offers and then place orders in-store or once they get home.
  • The Deal Lover – This shopper loves bargains, which is why their focus would be finding an online voucher or deal that could help them save money. Unlike comparers, deal lovers don’t do much research and go for what they BELIEVE is a good deal.
  • The Social Shopper – Usually connected via multiple social channels, this mobile user follows celebrities, brands, etc. on a variety of social media platforms. They’re bound to shop for what their idols or favorite companies promote, especially before the weekend.
  • The Time Passer – Using their phone while waiting for someone or something, time passers are impulse buyers who browse stores they’ve shopped at before for new products. They’re also more likely to subscribe to news feeds, email lists, or click direct promotions on social media.

You need to cater to all of these types of shoppers. By giving them options and opportunities to spend, you’ll be able to increase your bottom line.

Factor #2) Conversion Success Metrics

Conversion can mean one of three things to mobile eCommerce website owners: a completed purchase transaction, a new follower to one of your social channels/a customer review/subscription to newsletter, or a completed task such as filling out a poll or participating in a competition. Regardless of which of these is your main goal, consider establishing SMART goals to track and measure your progress towards achieving it.

SMART is an acronym that means:

  • Specific – The goals that you set should be unambiguous and capable of defining what you’re trying to achieve.
  • Measurable – Determine how you plan to measure your progress. Decide on a method and plan the roles and responsibilities of everyone involved.
  • Attainable – Ask yourself about what you should do to achieve your goal. You should also take the time to understand the skills, time constraints, and budget involved.
  • Relevant – Decide whether an eCommerce mobile site would be relevant to your overall goals and target market. You shouldn’t shy from asking whether you’re the right person to take on this challenge.
  • Time-bound – Find out exactly how long creating a mobile eCommerce site would take you.

Factor #3) Design Factors

When planning your mobile eCommerce site, you need to take design into consideration. The following elements will especially affect your conversion rates as they determine the customer’s experience.

  • Hierarchy and Navigation – Because mobiles offer limited space, you can’t provide large menus to cover multi-level categories; therefore you need to prioritize features and content in off-canvas navigation. Preferably, add a search box that’s accessible in a consistent location. 
  • Fixed vs. Non-Fixed Navigation – Fixed navigation is always visible to the user regardless of whether they scroll up or down. On the other hand, non-fixed is only visible at the top of the page. Currently, fixed navigation is the best option for mobile, especially since scrolling up is just a swipe away.
  • Images and Product Photos – Your clients want photos that captivate them and inspire them to make a purchase. Therefore, when showcasing your products, you can put up an individual shot (image of product at the best angle against a white background), detail shot (image that flaunts the product’s special features or details), components shot (image featuring all accessories or bits and parts of product), 360 shot (set of animated images that allow shoppers to spin the product around), group shot (image showing complementary products which you can upsell through), and in-use shot (image detailing how the product can be used).
  • Typography – Nothing can be as annoying as pinching and zooming to read content. Therefore, your content should be readable, responsive, and well spaced.
  • Finger Friendly Design – Calls to action should be large enough (ideally 57 pixels for finger and 72 pixels for thumb). The same applies to navigation of category trees, all buttons, thumbnail pictures, and filters.
  • Color Palette – Buttons and calls to action should be in colors that strongly contrast against the rest of the page. However, consider the lighting settings of your customer’s phones and adjust your site’s code to match different lighting conditions.
  • White Space – This technique gives content room to breathe and de-clutters your page.  You should also consider encapsulation to draw attention to elements such as the “Checkout Now” button.

Factor #4) Ideal Page Attributes

Aside from the factors you’ve learned about above, the following page attributes can make it one of the best mobile eCommerce sites around.

  • Clear product title with responsive typography
  • Pricing in contrasting color to stand out from other information
  • Clear call to action that stands out
  • Short description about product’s features and more detailed information on a separate page
  • Indication of availability

The Bottom Line

Applying all the information you just read, you will be able to increase your conversion rate and reduce the bounce rate of mobile users. After all, your mobile eCommerce site should boast high quality, user friendliness, and easy navigation. This may mean compromising some page speed, but optimization and high quality images reflecting your brand should be your top priority. 

schedule a call