build your ecommerce business€¦ · smartphones and their slightly larger siblings the phablet...

21
Build your ecommerce business in association with 1. Getting Started 2. Going mobile 4. Promote 5. Deliver 6. Convert 8. Legal 3. Using marketplaces 7. Retain & Expand PART 2: GOING MOBILE

Upload: others

Post on 22-Aug-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

Build your ecommerce business

in association with

1. Getting Started 2. Going mobile 4. Promote

5. Deliver 6. Convert 8. Legal

3. Using marketplaces

7. Retain & Expand

PART 2: GOING MOBILE

Page 2: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

PART 2: GOING MOBILE

INTRODUCTIONDepending on whose figures you look at somewhere between 40 and 60% of ecommerce traffic these days comes from mobile – and as smartphone and tablet use outstrip more traditional PCs, this is only going to extend.

If you are an existing online retailer or looking to set up an online retail business you can’t ignore mobile. Over the next six sections we are going to guide you through what mobile means and why it matters, how to design for mobile, how to repurpose your existing content for mobile, how to ‘do’ mobile payments, how to assess how mobile your business needs to be and, closing the circle, how mobile can help you create a true omni-channel eseller business.

If you are an existing online retailer or looking to set up an online retail business you can’t ignore mobile

2

What to ?

What is mobile commerce

Why is mobile commerce important

How to take ecommerce mobile

Mobile form factors

Apps verses M-web for small business

Time to mobilise your business

www.tamebay.com/diy-ecommerce-guide

WHAT WE LEARN ● What is mobile ● Why it matters ● Form factors ● Apps verses M-Web

https://tamebay.com/2017/09/what-do-we-mean-by-mobile.html

https://tamebay.com/2017/09/5-ways-retailers-can-get-better-at-mobile.html

https://tamebay.com/2017/09/6-ways-to-convert-on-mobile.html

https://tamebay.com/2017/09/5-reasons-to-consider-a-mobile-first-e-commerce-website.html

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

Page 3: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

WHAT IS MOBILE AND WHY IT MATTERSPretty much everyone has a mobile ‘phone’ in their pocket, but today mobile is inherently a portable computer that can also make calls and send texts. With this in mind, all that really differentiates mobile from ‘traditional’ PCs is that they use a different operat-ing system (OS) – that is the nuts and bolts that make it work. Here are several other key factors that make mobile special.

1. Form factorsFor starters mobile devices are usually quite small with a small screen and, crucially, smaller memories and small-er amounts of RAM memory (the kind of memory needed to run ‘jobs’ in the device). Understanding that the screen size is small and that it can be both landscape and portrait, depending on how the device is held, is crucial when looking at how to mobilise your online offering.

2. DevicesMobile devices also come in a variety of forms. Typically these can be classed as:

● Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market for ‘mobile’ when thinking about m-commerce. They have the largest penetration and are used increasingly by consumers for shopping. And their use and penetration is growing.

● Tablets are often thought of as large smartphones, but in many ways they sit in a niche of their own: often being used in the home rather than in the street and having no connection to a phone network. They are also gener-ally not used for voice calls, though they are often a Skyping tool. The penetration of tablets is not rising at the rate of smartphones and tablet-based m-commerce is growing only slowly. However, they can’t be discounted when designing and implementing your mobile strategy – as you shall see.

● Tablet-PC hybrids are essentially PCs, relying largely on standard PC OS and incorporating just some of the id-ioms of a tablet such as touchscreens and some portability. They are typically thought of from an m-commerce point of view as being PCs, however, since the screen is removable (making it a tablet), then many of the other factors considered in designing for mobile – such as portability, location and so on – do come into play.

● Watches and wearables – such as Fitbit and more – offer an intriguing insight into where mobile and mobile commerce may go in the years ahead but they aren’t there yet. That said, they tend to be tethered to a mobile device and so are merely, for now, alert devices for the main mobile device. However, we are already seeing consumers starting to pay for things with Apple Pay on an Apple Watch so there is a role for them in retail. One to, if you pardon the pun, ‘watch’.

How many mobiles are there in the world

What is a mobile form factor

What is a smartphone

What is a tablet

What is a tablet-smartphone hybrid

What is a phablet

RAM

3

Page 4: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

● Games consoles are intriguing. Many of them come with wifi and are connected to the web. Many of the are also starting to get their own app eco-systems and many of them are the way that some people connect to the web via their TV. Are they ‘mobile’? Not strictly speaking, but they are a different OS than PCs (and iOS and Android for that matter) but they can be used to shop for things. And so they are worth considering at some point in your mobilisation plan. You need to look at where your traffic is coming from and assess whether games consoles are significant.

● Smart TV is a natural extension of games consoles: again they are not strictly speaking mobile, but they are different again in terms of form factor, OS and interaction method (see below). And they too are starting to get their own app eco-systems and, with the advent of Amazon Fire, Amazon Prime, Google Chromecast and Apple TV, are starting to work at the cross roads of mobile, PC and TV commerce. When looking at developing a mobile strategy it is worth looking at how that strategy can be tweaked or extended in the not too distant future to service smart TV shopping too.

3. Interaction methodThe other area, which we have touched on above, where mobile is a distinctly different to traditional PC based m-com-merce is the touch screen interface. PCs use a keyboard and a mouse; mobile tends to let you prod, poke, swipe and scrunch to control what you do. And this has a profound impact on how you design or adapt your online presence for mobile.

4. Networks and locationThe other areas that single out mobile as being distinct from the e-commerce world of the PC is that the devices are often connected to the world through a variety of different networks and they move about so are being accessed in different places.

Networks that mobile devices typically use range across wifi, 2G, 3G and 4G, each giving a different level of performance and down (and up) load speeds – all of which have to be taken into account when designing for mobile.

Location, meanwhile, is a direct result of the networks listed above. Wifi is often used in more static endeavours – such as at home, the office, a coffee shop, on a train, at the airport or even increasingly on planes and trains – while 2G, 3G and 4G are typically mobile operator networks to be found when out and about. All these networks and the fact that the device is being used in many different places – often for different things and at different stages of the shopping journey – is one of the key things to think about when designing for mobile, as we shall see.

5. M-web and appsAs well as being distinctly different to PC-based e-commerce, mobile commerce has another defining aspect: it works in two different – though inter-related – ways: through what is often called ‘m-web’ (the mobile web) and through apps.

4

What are wearables

What are smartwatches

Can I sell things on wearables

Can I sell things on smartwatches

Page 5: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

Understanding the difference is key also key to unlocking how you create and develop not only your mobile presence, but also your mobile strategy across your business. So what are they and why are they different?

6. AppsApps (short for Applications) are what most people immediately think of when you specifically talk about m-commerce. Many retail brands have one and it has, for many been their first port of call when starting on their mobile strategy.

Apps are small software programmes that live ‘natively’ on the device and when activated load up a set of tools and services that can exploit all that the phone has to offer. Back in the day when iPhone and apps were new, these apps contained all the data and information they needed to run natively. These days they tend to be more of a shop window that is driven at the back by the internet.

That said, now that phone memory is pretty limitless – or at least well into the high gigabyte range – apps are becoming more important and useful again as they can be bigger and better programs that can deliver a really immersive experience. And the better the experience the more loyal users become – and the more loyal they are the more they spend.

7. M-webMobile web is essentially the other way of delivering content to a mobile device and uses the same principles as the ‘normal’ web. Back in the early days of mobile, there was no such thing as the mobile web (m-web) and slowly developers and compa-nies started to realise that websites looked awful on phone screens. Typically, businesses then created a cut down version of their website tailored to the low bandwidth, low processor power and small screen of the phone.

As phones have improved these .mob sites have slowly been abandoned it favour of first of all ‘web scraping’ – where the key elements of the main website were used to repopulate a mobile website – and increasingly these days websites are just built on platforms that are adaptive and responsive to the device downloading them.

8. Apps verses m-webDespite what the media may have you believe, there is no either or about apps and m-web: they deliver very different things and, in an ideal world where money was no object, you would have both. However, with money tight you need to look at which would best suit your business.

One rule of thumb is to look at what kind of users you are getting coming to you via mobile. If they are repeat buyers and loyal customers and actually want to buy from you as well as engage with you, then an app may well be a good first port of call.

If they are just random traffic coming to you from the web and often browse and occasionally buy then you may be better off looking at mobile optimising your existing website as the first stage of a mobile strategy. Google will find you either way.

5

2G Networks and ecommerce

3G Networks and ecommerce

4G Networks and ecommerce

5G Networks and ecommerce

Wifi and ecommerce

Page 6: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_Awww.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

facebook.com/tamebay/ ?ref=aymt_homepage_panel

twitter.com/tamebay

www.linkedin.com/groups/8383093

JOIN OUR COMMUNITY

DESIGNING FOR MOBILEDesigning a mobile presence requires some basic considerations that will play through to all the specific things you are trying to achieve on mobile.

How to design an m-web presenceWe have already touched on how m-web sites need to consider, perhaps more than any other mobile stratagem, the limitations and peccadillos of the mobile device.

● Size and orientation – One of the main considerations when looking at how to render your site on a mobile device is getting it to work across all the different screen sizes that are available out there and the fact that each one can be viewed in two ways. That makes around 120 to 150 different ‘versions’ that you need to get your site to fit. The main thing to consider is using adap-tive and/or responsive web design that will allow you to design a site that will automatically adapt to the device type, screen size and orientation. Making it responsive too, will also help it to factor in other aspects such as location and network issues. This should help your site to automatically serve up the right image sizes and more in the right sort of structure that will work well on a mobile phone. This may well be a ‘cut down’ version of your ‘full’ website as

The main thing to consider is using adaptive and/or responsive web design that will allow you to design a site that will automatically adapt

6

What to ?

https://tamebay.com/2017/09/how-responsive-web-design-improves-customer-experience.html

https://tamebay.com/2017/09/optimising-mobile-site-performance-better-conversion.html/

https://tamebay.com/2017/09/how-to-go-from-mobile-and-online-to-multichannel.html

WHAT WE LEARN ● What to consider when

designing for mobile ● Designing for mobile web ● Designing apps ● Different kinds of apps

www.tamebay.com/diy-ecommerce-guide

Designing for m-web

Mobile web design

best practice mobile design

mobile web designers skills

Choosing a mobile designer

Page 7: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

you don’t always need the same things on your mobile rendering as you do on your main site. As in all things, less is usually more.

● Processing power – Designing for the more limited processing power of the mobile device is becoming less of a problem these days as phone processing power and memory get better with every iteration of a device. How-ever, it is worth bearing in mind that rapid – almost instantaneous – downloads are what people want so the principles apply. Keep images small in terms of file size, keep text light and make sure that you m-website isn’t really data heavy as this will slow it down. Lean and clean is the name of the game.

● Connectivity – As with processing power, the need to keep the speed of download of your site and all its pages rapid and engaging also applies to the variable bandwidth connections that a mobile device is likely to experience. When building and testing your site remember that it won’t necessarily always be downloaded over a superfast broadband wifi connection or 4G. It may be being used on really crowded public wifi, heavily used 3 and 4G networks that are being throttled at peak time or, even, over a 2G or EDGE network. Again small file sizes and light text are the order of the day, as is looking at how your responsive design responds to detected network conditions.

● Touch screen – Aside from designing sites that are fast to load on low processor power phones and over slow networks, the biggest thing to consider when designing or adapting your site to mobile is that mobile is a finger activated device. The touch screen is build for fingers – some of which may be fat. So you need to make sure that anything ’clickable’ is a button that can easily be hit by a finger and not too close to other clickable buttons and links. You also need to design the site so that it can scroll just by flicking a finger and that it can be manoeuvered in all directions easily. You also need to work into the design the other touch screen functions available to you such as pinching and two finger gestures to zoom in and out and to flick.

● The infinite scroll – Another upshot of the touchscreen is that everyone now scrolls rather than going from page to page, so consider how to re-design your site for the ‘infinite scroll’. This means that you just keep scroll-ing to get to everything. Of course you can have ‘page’ buttons at the top that will leap you straight to where you want to go, but letting the user just scroll is now part of how people use the web. There is no ‘below the fold’. And this applies equally to your normal PC website – users are so used to the tablet and phone experience that they now expect this on desktop screens too.

7

What is processing power

M-web design to maximise processing power

Designing for touchscreens

Designing for limited bandwidth

Understanding the infinite scroll

Infinite scroll verses shopping the grid

Page 8: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

How to design an appDesigning your app takes into account many of the issues raised in designing your m-website (above), however the basic starting premise is different, as we have seen.

Size, orientation, touch screen and infinite scroll issues are all exactly the same on an app as with an m-website: the design has to work in the same way on the same screens after all.

Where things differ with apps is that apps are usually a much richer experience and can be much more involved and complicated. The processing power of the device has an impact on design, but ever improving RAM and pro-cessor power means that apps can now be quite rich , complicated experiences with many things build in to them.

1. Online appsIf you consider apps being used when the device is connected to the web, then you can design it so that the latest data is pulled down from the web when the app is opened. This allows for apps to be refreshed every time they are used, which gets you round the endless approvals procedures from app stores. It also keeps the experi-ence tailored to the user using it.

It also allows you to do all sorts of clever things such as location based marketing and services, functions such as barcode scanning of goods (for showrooming, reverse showrooming and stock checking – and to buy things that are out of stock in store online), store locators, and more. They also allow you the retailer to push messages to consumers which allows you to enter into a two dialogue with them and help build brand experience through instant messaging and offers.

2. Offline appsOf course apps may also be used when the device is not connected to the web – such as on a plane (for now) or when the user has very power coverage. Here you need to tweak your design to so that it offers as many of the features as possible from the online version so that it can still be of use. If particular note here is that you should allow people to put goods in their basket when offline and, when the app connects next to the web, to keep that basket live so that they can they buy it.

3. In-store appsMany retail apps are increasingly featuring an in-store mode that can log them into the retailers wifi and help the retailer send targeted offers based on the user’s profile and their location in the store. It also features in-store locators (maps of the store in essence) and many other features.

8

mobile app design

mobile app designers for [YOUR INDUSTRY]

local app designers

making my site google friendly

Page 9: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

HOW TO MOBILISE YOUR EXISTING CONTENTFrom 21 April 2015, any eSeller’s Google ranking dropped if their site wasn’t (and isn’t to this day) mobile friendly. But it is not just Google that will penalize you if you aren’t mobile friendly, your customers and potential customers will ignore you. So what can you do to mobilise your business?

Check with your webhost/CMSMost of you will be running sites through a webhost and probably using a well known CMS or ecommerce platform. Most of these third-party templates al-ready automatically do a lot of the mobile-friendly stuff for you such as setting the right width and ordering the content into infinite scrolls and so on. Most will also do this for orientation changes too, so you have the basics covered. However, this alone does not make for a good mobile website. The very design of the site is key.

TextText loads quickly, but is it really a great way to communicate with someone who is looking at your site on a tiny screen, perhaps outside in the street? Think about what you want to say and say it clearly and succinctly.

● Good short headlines – be witty and engaging, rather than lengthy and detailed

● Punchy, clear text – be pithy and to the point ● Less is more – keep descriptions to the basic minimum – but offer ways to click through to see more if the reader really wants to see more.

ImagesImages are a much more engaging way to sell your products and work a lot better on mobile devices. However, there are some simple rules to follow about using pictures so that they are mobile friendly:

● Good quality, but low res – yes beautiful, high res photos look lovely, but even retina iPad screens aren’t that good and no one wants to wait minutes

9

What to ?

https://tamebay.com/2017/09/understanding-how-mobile-your-users-are-what-you-need-to-measure.html

https://tamebay.com/2017/09/magento-on-the-move.html

https://tamebay.com/2017/09/what-do-we-mean-by-mobile.html

WHAT WE LEARN ● How to use images, text,

video and buttons ● Scrolling verses shopping

the grid ● How to make Google happy

www.tamebay.com/diy-ecommerce-guide

If you aren’t mobile, Google will spurn you Best images for mobile

websites

Choosing the right images for mobile sites

Page 10: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

to download and image (nor do they want to use up their data allowance). So, keep images clear, but low res. Make them small – around a couple of hundred pixels in width and around 150 dpi usually works well. Howev-er, play about because you don’t want to degrade what your website looks like on PC.

● Use lots of them –a picture paints a thousand words so use lots of them rather than text.

VideoVideo is increasingly key to an engaging and rich experience for users. However, this can be challenging for mobile versions of sites. So, embed video links from somewhere else – let YouTube or Vimeo do the hosting. They will also detect what device is trying to view the video through your site links and will adapt it accordingly.

But don’t rely on video. The trouble with mobile is that the networks aren’t consistently good, so you may have someone on your site using slow, old fashioned GPRS or Edge and, for them, video is going to be a no-no. So by all means use video content, but don’t make it the key thing that sells your site. Oh and in case you don’t know: don’t use Flash – Apple and newer Android devices can’t read it, so Flash videos won’t play.

ButtonsOne of the biggest things you need to think about when looking to make your website mobile friendly is how people are going to click on stuff – not least the buy button.

Mobile needs to have buttons that can be clicked with fingers. Not meece/mice/mouses. So you have to design the buttons accordingly to work for fingers.

● Make them a reasonably size ● Space them out ● make them look like buttons – so use drop shadows and rounded edges ● Make them stand out

And don’t worry they will work just as well on your ‘normal’ site too.

ScrollingThe old idea of designing a website so that you had “above the fold” and “below the fold” content is dead. This concept has been killed by mobile, where people are already inclined to scroll through stuff. So, rethink the design of your site so that it scrolls down. Don’t get too hung up on the best things being “above the fold” of an imagined portrait orientated laptop or desktop screen.

10

Where can I get good images for my mobile site

How many images on mcommerce page

Page 11: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

However, you still need to put the most compelling stuff at the top and call to actions and the really engaging things somewhere where they will be seen straight away. This also applies to your desktop site.

Shopping the gridThere is a propensity among ecommerce site templates to simple create a grid of products. Boring. And not very mobile friendly. While ‘shopping the grid’ was cool a couple of years ago, now everyone does it, it looks poor. And it isn’t very mobile friendly – especially when clicking throws up a pop-up light box.

Instead, think about better ways to display your content – not just on mobile but on the ‘normal’ web too. Cat-egory rows, carousels and even jazzed up girds that don’t look so ‘griddy’ are all good alternatives. Click-throughs to each product are also much more mobile friendly and easier to use.

The techy stuffAs well as these design considerations, there are a host of little twiddly things that you also need to do to make your site mobile friendly. These will certainly be a pain to do, but they will be loved by Google and your custom-ers, so it is worth taking the time to get these bits right – even though no one will notice.

● Turn off auto-capitalise and autocorrect in any forms you have – otherwise this will change people’s names and mess about with all sorts of things as they try to type in information on the mobile version of your site.

● Don’t disable submit buttons – many websites are set up so that multiple clicks on submit buttons don’t work. You need to turn this off for mobile as often it doesn’t work first time because of network issues.

● Use standard fonts – Try and stick to using standard well known fonts as phones have a more limited reper-toire of fonts built in. This is becoming less of a problem as smartphones become more sophisticated, but still avoid customer fonts as they may not render very well or at all.

11

What video works on mcommerce sites

What video formats are best for mcommerce

Page 12: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

GOOGLE CHECK LIST Google is very much driving the need for all sites to mobile and desktop compatible, so what is it’s advice on how to get that all important mobile ranking?

1. Make it easy for customersHelp your site’s visitors to complete their objectives. They may want to be entertained by your blog posts, get your restaurant’s address, or check reviews on your products. So, design your site to help make it easier for your customer to complete their most common tasks: from task conception, to visiting your site, to task completion. Outline the potential steps in your customers’ journey to make sure the steps are easy to complete on a mobile device.

Try to streamline the experience and reduce the number of user interactions. In this example: (b) the customer clicks on a site after searching for lamps to buy; (c) browses through a selection of lamps; and (d) purchases the desired lamp.

2. Measure the effectiveness of your website by how easily mobile customers can complete common tasksStart by working out what the most important and common tasks are for your customers on mobile. Being able to support these tasks is critical and this is why the measure of your mobile site is how well customers can complete their objectives. Focus on consistency in your interface and providing a unified experience across platforms.

3. Select a mobile template, theme, or design that’s consistent for all devices Responsive web design (RWD) means that the page uses the same URL and the same code whether the user is on a desktop computer, tablet, or mobile phone – only the display adjusts or “responds” according to the screen size. Google recommends using RWD over other design patterns.

One of the benefits of RWD is that you’ll only need to maintain one version of your site instead of two (i.e., you won’t need to maintain the desktop site at www.example.com and the mobile version at m.example.com – you’ll maintain only one site, such as www.example.com, for desktop and mobile visitors). “Conversions” happen when a customer performs a desired action, such as buying products, calling the business, or signing-up for a newsletter.

12

Responsive web design for google

Mobile customer journeys

Steps in the mobile customer journey

How to keep google happy

Google’s mobile SEO rules

Building websites for the multiscreen consumer

Google’s web fundamentals

Page 13: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

Revamping your site for a touchable worldWith more and more consumers shopping on smartphones and the tablet computer starting to replace the desktop PC in many homes, getting your site looking right across all these devices has become crucial to business.In fact House of Fraser announced back in 2014 that it is revamping its website to make it ‘touch-centric’ as it  realised even then – along with a growing number of commerce website owners – that the world is becoming tap-able rather than clickable.

So what do you need to do to provide the right experience across tablets and websites? ● The pursuit of 'tappiness' – Make your site designed around touch, scrolling, flicking and pushing, Try and forget clicking. Make sure buttons and other controls are finger sized and think about embedded keyboards.

● Don’t be Flashy – Don’t use flash on your sites. Apple products don’t support it and increasingly neither do many other ‘mobile’ OSs. Look also at what other soft and middleware is unsupported.

● Ignore the fold – With so many people now familiar with scrolling on tablets and smartphones, the ‘below the fold’ ethos of web design is debunked. People are used to flicking a finger and scrolling, so design accordingly.

● Tangled up in type – Type size and font is crucial. You don’t want it to be too small (too much zooming in) and you don’t want it to be too big  (too much scrolling). There is no simple rule of thumb on this, you are just going to have to experience with point sizes, fonts, line length and leading (space between lines) until you think it works.

● Declutter – Don’t have the site totally cluttered up with elements and stuff. Think clean and functional and rely instead on good navigation to get people to all the things you want to show them rather than cram it all on the home screen. Also think carefully about where to put advertising so as to display it well, but also to avoid clutter and bad navigation.

● Delink – Similarly to the cluttering issue, start to look at how to facilitate great navigation without resorting to loads of links. The fewer links the better.

● Make it social – Have an eye to how to make it easy to share socially. ● Great content – Above all make the content on it count. Mobile/tablet sites require less content, so make sure what you are putting on it is fantastic, compelling and short.

● Think like a consumer – You have to really get into how consumers think and what they do around your vari-ous online presences and design accordingly.

● Test, test, test – Above all, whatever you do, keep testing it, keep asking people about it and keep tweaking it. People’s tastes change and adapt so keep pace with this. Your site should be a living, breathing thing regardless of devices that access it and it is never ‘finished’.

13

Make your website tapable

Designing websites for touchscreens

Below the fold

Designing websites without a fold

Best fonts and type styles for mobile websites

Making my website social

How to test my website

Website testing tools

Website testing checklists

Page 14: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

MOBILE PAYMENTSTaking payments is the key to any business and there are plenty of tools for taking money online. But when you look at the world of mobile commerce, a broad and baffling vista of ways that mobile can be used to pay and indeed to take payment, opens up.

So let’s take a look at the kinds of mobile payment tools that are available then and, over the next few pages, look at some of the key proponents of these different ways of making mobile, cards, websites and money all work together.

Just a quick note, however, before we do that: there is a burgeoning world of mobile payments with many companies looking for an in. Here we look at just some of our favourites. There, of course, many, many more…

And remember that there are just ways of handling the transaction through mobile, you will still – with the exception of PayPal – need a payment platform and gateway to connect this to your merchant bank account to actually get the money.

So what types of m-payments tech is there?

Taking payments is the key to any business and there are plenty of tools for taking money online

14

What to ?Mobile opens up new ways to get paid

www.tamebay.com/diy-ecommerce-guide

WHAT WE LEARN ● Using mobile to pay ● Using mobile to accept

payments ● What the best payment

tools are for mobile sites

https://tamebay.com/2017/09/smes-have-to-embrace-mobile-payments-and-heres-why.html

https://tamebay.com/2017/09/a-guide-to-mobile-payments-for-e-commerce.html

https://tamebay.com/2017/09/targeting-mobile-payment-pioneers.html

Best mobile payment tools for ecommerce

Difference between mobile and online payments

Alternatives to PayPal

Top five mobile payment tools for ecommerce

Page 15: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

Card ReadersThe obvious place to start with taking money via mobile is in turning the phone or tablet into a card reader using either plug in devices such as Square, or using software that lets you photograph the card such as ScanPay, or just lets you key in the number (all the others!).

These tools are ideal for tradesmen such as plumbers and odd job men, but increasingly they are gaining traction with independent retailers and even bigger chains, as they look to revolutionise how in store payments are taken. Of course, for the online only business they can also be used to take payments over the phone.

Then there is the sticky world of NFC. This is clearly aimed at the more high-end retailer, but worth including here nonetheless as it is starting to gain some traction and eventually it will scale down to the small end.

This is a physical paying mechanism whereby the user taps their NFC enabled device against an NFC reader at the POS. To date, we have seem limited trials of NFC cards in Pret a Manger, but we are yet to see a widespread roll out.

However, Transport for London is set to replace Oyster cards with contactless payment readers that take the payment as you make the journey so its coming.

Banking and card appsThe other place to turn to start taking mobile payments is through apps from the bank or from card companies. The best known is Barclay’s Pingit, which allows consumers to pay bills and order things on line using the Barclay’s Pingit app. This is set to also be rolled out to allow for payments in shops.

It started as a peer-to-peer (p2p) payment tool, which makes it in some ways ideally scaled for SMEs (see p2p Payments below), and it looks to have great potential.

Similarly, Visa and MasterCard have both rolled out their own payment apps that allow for card payments either online or via the phone in store and these, given that they are from trusted brands, are likely to take off pretty quickly once out of the trial stage.

MasterCard’s Qkr! is gaining traction in restaurants and other retailers with physical stores as it prints out a code on the receipt that customer taps into the app to pay that retailer.

Payment APIsWhile banks and card companies have developed apps and mobile services to ease mobile payments, a raft of third party payment apps have grown up in the market too. In 2015 there were literally hundreds: today there are far fewer, with most having bitten the dust. Why? They arrived too early for consumer buy in and because they have been squashed by those apps from more powerful suppliers.

15

What to ?Best card readers to use with mobile

Square for payments

What is ScanPay

Bank apps for taking payments

Integrating bank payment apps into my m-commerce site

What is Pingit

What is PayM

What is QKR

Payment APIs for mobile commerce

Page 16: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

www.linkedin.com/groups/8383093

twitter.com/tamebay

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

There are, however, still too many to mention here individually, but the main ones – Zapp (trading these days as Pay-ByBankApp – way less snappy!), Judo, Braintree and its parent Paypal – all offer the chance to add simple mobile payments to your website or into your store by just adding a few lines of code to your sire  and offer a seamless, secure way for consumers to pay.

Each of these services (unlike Wallets, below) don’t require any account creating, instead linking a bank account to a mobile phone number or, in the case of Paypal, a card to an account that works online or on a phone.

These apps offer a simple way to add m-payments but they do come at a price to the merchant, often being slighting to very much more expensive than card payments.

WalletsMobile wallets differ from payment apps – in my ad hoc definition at least – in that they are just a way to hold a card or cards (and even these days coupons and loyalty points) and then use the phone’s inbuilt functionality to allow for payments to be made. These can be in physical stores or online and are in many ways the most simple way to ‘do’ mobile payments.

The most notable are of course Apple Pay and Android Pay, although others have tried. There are wallet apps for con-sumers from banks, and even O2 and Vodafone have tried. From the retailers point of view, it doesn’t matter how many wallet APIs there are, you just have to accept payments from phones.

The advantage with the likes of Apple Pay is that it is relatively easy to connect the card to the phone and then very easy to make payments online or in store – where there is contactless payment terminals and you are spending less than £30 – as it requires just a touch of the finger print ID button.

Accounts and third partiesAkin to wallets are third party accounts and payment services where the user essentially sets up an account and gives all their payment details once or keeps an account topped up.

Topped up accounts are slowly losing favour as, frankly, they are a pain to keep up to date and other payment tools have superseded them. However, third party payment tools where the user signs up and then can use that stored card are becoming increasingly popular across many mainstream retailer sites.

If you want to add this to your site then look no further than PayPal or Payments by Amazon.

Using the phone itselfOne of the much overlooked ways of using mobile for payments is using the phone bill.

These premium rate services are often associated with adult services and the like, but increasingly through an initiative

16

What is Zapp

What is Judo

Braintree payments for mobile commerce

What is Apple Pay

What is Android Pay

Using Apple Pay as an online merchant

Integrating Apple Pay into my commerce site

Taking online payments with Apple Pay

Using Android Pay as an online merchant

Page 17: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITYwww.linkedin.com/groups/8383093

twitter.com/tamebay

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

called Payforit, payment service providers can now offer the ability to pay through mobile and for the cost of the purchase to be put on the phone bill.

So far this only works for digital and non-real world goods such as in-app purchases, buying wifi on trains and carpark-ing, but it could soon offer small independent merchants a nice way to take simple and quick low value ‘micro payments’ once the rules are changed. Definitely one to watch.

p2p money transfer servicesThere is also a growing move towards peer-to-peer money transfer services on mobile, that allow ordinary people to tie their mobile number to a bank account and to then pay other people who have done the same simply using a text message.

These services – most recently and effectively exemplified by Paym (pronounced Pay em) – are designed to let people “pay that tenner I owe you for the taxi on Friday” or “here’s my half of the Chinese we had yesterday”, but they are interest-ing, I believe, to SMEs as they can be used to pay for things.

As with most things m-payments related it is early days and there are no p2p mobile payment tools targeted at SMEs, but their time will come.

17

Integrating Android Pay into my commerce site

Taking online payments with Android Pay

Alternatives to Apple and Android Pay

Taking online payments with PayPal

Taking online payments with Amazon Pay

Third party payment tools for online retailers

What is Payforit

Can I use carrier billing for ecommerce

P2P payment tools in ecommerce

Page 18: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

MOBILE DATA ANALYSISDesigning and delivering a mobile site or app – or ideally mobilising your entire operation – is essential, but within that you also need to understand how mobile your users are, so here we are going to take a look at what you need to know about the mobile habits of your customers and how to actually measure it.

How mobile are my customers?There are many tools that can help you analyse what is happening on your mobile website and apps – which we shall come to shortly– but what is it that you need to know?

Here are some of the key things that you need to be thinking of understand-ing and measuring to track your customers. As you get more into the analytics you will see that you can learn so much more… but that’s for another chapter.

You need to understand how mobile your users are – so what are their mobile habits?

18

What to ?Just how mobile are your customers – and what are they doing?

www.tamebay.com/diy-ecommerce-guide

WHAT WE LEARN ● What to measure to

understand customer mobility

● How to measure it ● The top mobile data

analytics tools to use

https://tamebay.com/2017/09/understanding-how-mobile-your-users-are-top-mobile-analytics-tools.html

https://tamebay.com/2017/09/understanding-how-mobile-your-users-are-what-you-need-to-measure.html

https://tamebay.com/2017/09/optimising-mobile-site-performance-better-conversion.html

Google Analytics

How to use Google Analytics for mobile

Mix Panel

How to use Mix Panel

Page 19: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

So what should you be looking at?1. Traffic

The most basic thing to measure is the traffic hitting your website or app. The obvious first step is to measure the amount of traffic, but it is also well worth looking at the peaks and troughs of that traffic as a very basic way of under-standing when people are hitting your site or app and what they are doing. Traffic is the basic measure of everything you do so everything comes back to traffic and to… conversion

2. ConversionAside from traffic – which gives a great idea of how popular you are as a site – what is really interesting is how many of them actually go on to buy anything: what is known as a conversion. This is what you are trying to achieve and matching this to traffic (and then to everything else below) is key to measuring how you are doing.

3. Where they come fromAside from traffic and sales, you need to also understand where your shoppers are coming from. It is key to under-standing everything from your SEO right through to your marketing strategy to know what pushed them to your site. When looking to analyse your traffic and conversions you need to look at what marketing material drove them to your site, what other sites they may have come from and, if they came from a search, what search terms they used. This will help you shape your whole marketing strategy as we shall see.

4. JourneyIt is also vital to know what customers do on your site when they get there: how long do they linger, what do they click on, what do they search for, how long do their sessions last? These are all vital questions to ask your self. You also need to understand why they leave or where they appear to give up. You can learn a lot by why and where people leave your site as it can help everything from marketing to site design to understanding how tricky using your site it.

The journey across your site also needs to look at where people leave and if they ever come back and what they do. This is trickier to measure, but you can log users coming in and when the go and when they come back. This will give you a much better idea of how people use you in their overall shopping process.

5. FaultsThe other thing that analytics – especially live ones – can help you with is to know when something has gone wrong with your site, server or anything else technical and act to resolve it as quickly as possible.

19

Segment

How to use Segment

Flurry for mobile analytics

How to use Flurry

AppSee

Page 20: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

Best tools to measure mobileUnderstanding how mobile your customers and prospective customers are – and what they are doing on mobile when they do use it – is crucial to developing your business strategy.

But how do you do that?Well, just as you can do it online, so you can do it with mobile and there are a wealth of mobile analytics tools

available that can let you dive deeply into what is going on to help shape your strategy.

1. Google AnalyticsMuch as it does for online, Google offers some excellent tools that will let you monitor both the activity around your mobile website and your apps. Using Google Mobile Web Analytics tool, you can start with understanding what kinds of phones your customers are using and, perhaps more importantly, what operating systems they use. It can also tell you which service provider the use, their screen resolution and whether they are on wifi or a telephone network. More interestingly, Google can also tell you from which sites the customer was referred to your site, or whether they found you through an advert or from searching – and if the latter, what search terms they used to get to you. If you have an app, you can use the Google Apps Analytics tool to understand your customer behaviour, including event tracking, crashes and performance, as well as conversion statistics, so long as they are using either iOS or Android.

2. MixPanelMixPanel stands out as it offers really deep insight into both your mobile website and your apps and allows you to compare them and match the data. There is a free version with very limited features, but the paid for version – starting at $150 per month for startups (and going to $2000 for bigger organisations) – offers a vast range of tools, best described here in the company’s video. In a nutshell, it offers real time data on what is happening on your site and your app, it can track important events such as new account creations, app purchases, upgrades or sharing statistics and it can follow them individually or as a series. It also has powerful demographics tools, retention statistics, and it can give you information about how often your customers use your app or website.

3. SegmentSegment again lets you analyse your app and m-web usage and customer journeys, but you have to pay for it. How it works is that it collects data from you and then sends it to a other analytical tools of your choosing and analyses the data for you. What is analysed, how and by what tools is up to you and allows you to build as

20

How to use AppSee

Apple App Analytics

How to use Apple App Analytics

Amazon mobile analytics

Page 21: Build your ecommerce business€¦ · Smartphones and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 Plus) – are essentially the key market

TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

What to ?

JOIN OUR COMMUNITY

facebook.com/tamebay/ ?ref=aymt_homepage_panel

www.linkedin.com/groups/8383093

twitter.com/tamebay

www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

detailed a picture as you want. The service costs from free for a single use developer with limited tools right up to $100 per month for a team of up to 7. Bigger user numbers can be accommodated on a per project base.

4. FlurryPart of Yahoo!, Flurry Analytics allows you to assess both app and m-web use for free across not only iOS and Android, but also the lesser used Blackberry and Windows Mobile platforms too. You can track in-app actions your users take and see how they are using your app. It lets you relatively easily understand and visualize usage trends, user progress through the app and what events they are conducting with User Path analysis. The platform also allows you to segment user actions by app version, usage, install date, age, gender, language, geography and acquisition channel. On the m-web front, it is often used in conjuction with Google Analytics to paint a complete picture of what your customers are doing on mobile.

5. AppSeeAppSee is a paid for analytics programme that is designed more to track user experience and journey rather than app performance – which Google and Flurry do in spades. Based around recording user journeys on iOS and Android, the system can produce heatmaps of where people touch on the screen, the journey the shopper takes through your app, analyizes conversion funnels, offers up retention analytics and will track faults and crashes and record them for you to analyise. Available on a free 14 day trial, it is charged per session, see here.

6. Apple App AnalyticsFor the purely iOS app users out there, Apple App Analytics offers Apple’s own app analytics for you to use, which offers all the things you’d expect: user demographics, shopper journeys, user engagement, traffic, crashes and more.

7. Amazon Mobile AnalyticsWith Amazon Mobile Analytics, you can measure app usage and app revenue. By tracking key trends such as new vs. returning users, app revenue, user retention, and custom in-app behaviour events, you can make data-driven decisions to increase engagement and monetization for your app. You can view key charts in the Mobile Analytics console and automat-ically export your app event data to Amazon S3 and Amazon Redshift to run custom analysis. Amazon Mobile Analytics is free up to 100 million events per month and just $1 per million events thereafter.

21

How to use Amazon mobile analytics

Best practice using web analytics for mobile

Best practice using app analytics