in association with

Build your ecommerce business

PART 2: GOING 1. Getting Started 2. Going mobile 3. Using marketplaces 4. Promote MOBILE

5. Deliver 6. Convert 7. Retain & Expand 8. Legal TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

Time to mobilise PART 2: GOING MOBILE What to ? your business What is INTRODUCTION Why is mobile commerce Depending on whose figures you look at somewhere between 40 and 60% of important ecommerce traffic these days comes from mobile – and as and How to take ecommerce tablet use outstrip more traditional PCs, this is only going to extend. mobile www.tamebay.com/diy-ecommerce-guide Mobile form factors If you are an Apps verses M-web for existing online small business retailer or looking to set an online WHAT WE LEARN retail business ●● What is mobile you can’t ●● Why it matters ignore mobile ●● Form factors ●● Apps verses M-Web 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 JOIN OUR COMMUNITY guide you through what mobile means and why it matters, how to design for www.linkedin.com/ mobile, how to repurpose your existing content for mobile, how to ‘do’ mobile groups/8383093 https://tamebay.com/2017/09/what-do-we- payments, how to assess how mobile your business needs to be and, closing the twitter.com/tamebay mean-by-mobile.html circle, how mobile can help you create a true omni-channel eseller business. https://tamebay.com/2017/09/5-ways- retailers-can-get-better-at-mobile.html facebook.com/tamebay/ https://tamebay.com/2017/09/6-ways-to- ?ref=aymt_homepage_panel convert-on-mobile.html www.youtube.com/channel/ https://tamebay.com/2017/09/5-reasons- to-consider-a-mobile-first-e-commerce- UCLsYhZ7wvUeHwKV-6rnlH_A website.html

2 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

WHAT IS MOBILE AND WHY IT MATTERS Pretty much everyone has a mobile ‘phone’ in their pocket, but today mobile is inherently a portable computer that can also make What to ? 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. How many mobiles are there in the world 1. Form factors What is a mobile form factor

For starters mobile devices are usually quite small with a small screen and, crucially, smaller memories and small- What is a smartphone 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 What is a tablet when looking at how to mobilise your online offering. What is a tablet- smartphone hybrid 2. Devices What is a Mobile devices also come in a variety of forms. Typically these can be classed as: RAM ●● and their slightly larger siblings the Phablet – part phone-part-tablet (think iPhone 6 ) – 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- JOIN OUR COMMUNITY ioms of a tablet such as touchscreens and some portability. They are typically thought of from an m-commerce www.linkedin.com/ point of view as being PCs, however, since the screen is removable (making it a tablet), then many of the other groups/8383093 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 twitter.com/tamebay commerce may go in the years ahead but they aren’t there yet. That said, they tend to be tethered to a mobile facebook.com/tamebay/ device and so are merely, for now, alert devices for the main . However, we are already seeing ?ref=aymt_homepage_panel consumers starting to pay for things with on an Apple Watch so there is a role for them in retail. One www.youtube.com/channel/ to, if you pardon the pun, ‘watch’. UCLsYhZ7wvUeHwKV-6rnlH_A

3 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

●● 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 What to ? 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 What are wearables 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 What are again in terms of form factor, OS and interaction method (see below). And they too are starting to get their own app eco- Can I sell things on systems and, with the advent of Amazon Fire, Amazon Prime, Google Chromecast and Apple TV, are starting to work wearables at the cross roads of mobile, PC and TV commerce. When looking at developing a mobile strategy it is worth looking at Can I sell things on how that strategy can be tweaked or extended in the not too distant future to service smart TV shopping too. smartwatches

3. Interaction method The 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 location The 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, , and , 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. JOIN OUR COMMUNITY Location, meanwhile, is a direct result of the networks listed above. Wifi is often used in more static endeavours – such as www.linkedin.com/ 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 groups/8383093 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 twitter.com/tamebay

key things to think about when designing for mobile, as we shall see. facebook.com/tamebay/ ?ref=aymt_homepage_panel 5. M-web and apps www.youtube.com/channel/ As well as being distinctly different to PC-based e-commerce, mobile commerce has another defining aspect: it works UCLsYhZ7wvUeHwKV-6rnlH_A in two different – though inter-related – ways: through what is often called ‘m-web’ (the ) and through apps.

4 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

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? What to ?

6. Apps 2G Networks and Apps (short for Applications) are what most people immediately think of when you specifically talk about m-commerce. Many ecommerce retail brands have one and it has, for many been their first port of call when starting on their mobile strategy. 3G Networks and Apps are small programmes that live ‘natively’ on the device and when activated load up a set of tools and services ecommerce 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 4G Networks and 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 ecommerce by the internet. Networks and That said, now that phone memory is pretty limitless – or at least well into the high gigabyte range – apps are becoming ecommerce more important and useful again as they can be bigger and better programs that can deliver a really immersive experience. And Wifi and ecommerce the better the experience the more loyal users become – and the more loyal they are the more they spend. 7. M-web Mobile 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. JOIN OUR COMMUNITY 8. Apps verses m-web www.linkedin.com/ groups/8383093 Despite 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 twitter.com/tamebay which would best suit your business. facebook.com/tamebay/ 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 ?ref=aymt_homepage_panel

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. www.youtube.com/channel/ If they are just random traffic coming to you from the web and often browse and occasionally buy then you may be better UCLsYhZ7wvUeHwKV-6rnlH_A off looking at mobile optimising your existing website as the first stage of a mobile strategy. Google will find you either way.

5 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

Designing DESIGNING FOR MOBILE Designing a mobile presence requires some basic considerations that will play What to ? for m-web through to all the specific things you are trying to achieve on mobile. Mobile web design The main thing to best practice mobile design consider is using mobile web designers skills www.tamebay.com/diy-ecommerce-guide adaptive and/or Choosing a mobile responsive web designer design that will allow you to design a site that will automatically adapt

WHAT WE LEARN How to design an m-web presence ●● What to consider when We have already touched on how m-web sites need to consider, perhaps more than designing for mobile any other mobile stratagem, the limitations and peccadillos of the mobile device. ● Designing for mobile web ● ●●Size and orientation – One of the main considerations when looking at ●● Designing apps how to render your site on a mobile device is getting it to work across all the ●● Different kinds of apps different screen sizes that are available out there and the fact that each one JOIN OUR COMMUNITY can be viewed in two ways. That makes around 120 to 150 different ‘versions’ www.linkedin.com/ that you need to get your site to fit. The main thing to consider is using adap- groups/8383093 https://tamebay.com/2017/09/how- tive and/or responsive web design that will allow you to design a site that will responsive-web-design-improves- automatically adapt to the device type, screen size and orientation. Making it twitter.com/tamebay customer-experience.html https://tamebay.com/2017/09/optimising- responsive too, will also help it to factor in other aspects such as location and facebook.com/tamebay/ mobile-site-performance-better- ?ref=aymt_homepage_panel conversion.html/ network issues. This should help your site to automatically serve up the right https://tamebay.com/2017/09/how-to-go- image sizes and more in the right sort of structure that will work well on a www.youtube.com/channel/ from-mobile-and-online-to-multichannel. UCLsYhZ7wvUeHwKV-6rnlH_A html . This may well be a ‘cut down’ version of your ‘full’ website as

6 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

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. What to ? ●●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- What is processing power ever, it is worth bearing in mind that rapid – almost instantaneous – downloads are what people want so the M-web design to maximise principles apply. Keep images small in terms of file size, keep text light and make sure that you m-website isn’t processing power really data heavy as this will slow it down. Lean and clean is the name of the game. Designing for ●● Connectivity – As with processing power, the need to keep the speed of download of your site and all its pages rapid touchscreens and engaging also applies to the variable bandwidth connections that a mobile device is likely to experience. When Designing for limited building and testing your site remember that it won’t necessarily always be downloaded over a superfast broadband wifi bandwidth connection or 4G. It may be being used on really crowded public wifi, heavily used 3 and 4G networks that are being Understanding the infinite throttled at peak time or, even, over a 2G or EDGE network. Again small file sizes and light text are the order of the scroll day, as is looking at how your responsive design responds to detected network conditions. Infinite scroll verses ●●Touch screen – Aside from designing sites that are fast to load on low processor power phones and over slow shopping the grid 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- JOIN OUR COMMUNITY

ing to get to everything. Of course you can have ‘page’ buttons at the top that will leap you straight to where you www.linkedin.com/ want to go, but letting the user just scroll is now part of how people use the web. There is no ‘below the fold’. groups/8383093 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. twitter.com/tamebay facebook.com/tamebay/ ?ref=aymt_homepage_panel

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

7 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

How to design an app Designing your app takes into account many of the issues raised in designing your m-website (above), however What to ? 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: design the design has to work in the same way on the same screens after all. mobile app designers for Where things differ with apps is that apps are usually a much richer experience and can be much more involved [YOUR INDUSTRY] and complicated. The processing power of the device has an impact on design, but ever improving RAM and pro- local app designers cessor power means that apps can now be quite rich , complicated experiences with many things build in to them. making my site google 1. Online apps friendly If 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 apps Of course apps may also be used when the device is not connected to the web – such as on a plane (for now) or JOIN OUR COMMUNITY when the user has very power coverage. Here you need to tweak your design to so that it offers as many of the www.linkedin.com/ features as possible from the online version so that it can still be of use. If particular note here is that you should groups/8383093 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. twitter.com/tamebay

facebook.com/tamebay/ 3. In-store apps ?ref=aymt_homepage_panel Many retail apps are increasingly featuring an in-store mode that can log them into the retailers wifi and help www.youtube.com/channel/ the retailer send targeted offers based on the user’s profile and their location in the store. It also features in-store UCLsYhZ7wvUeHwKV-6rnlH_A locators (maps of the store in essence) and many other features.

8 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

If you aren’t HOW TO MOBILISE YOUR EXISTING CONTENT From 21 April 2015, any eSeller’s Google ranking dropped if their site wasn’t What to ? mobile, Google (and isn’t to this day) mobile friendly. But it is not just Google that will penalize will spurn you you if you aren’t mobile friendly, your customers and potential customers will Best images for mobile ignore you. So what can you do to mobilise your business? websites Choosing the right images Check with your webhost/CMS for mobile sites Most 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- www.tamebay.com/diy-ecommerce-guide 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. Text Text loads quickly, but is it really a great way to communicate with someone WHAT WE LEARN who is looking at your site on a tiny screen, perhaps outside in the street? ●● How to use images, text, Think about what you want to say and say it clearly and succinctly. video and buttons ●●Good short headlines – be witty and engaging, rather than lengthy and ●● Scrolling verses shopping detailed the grid ●●Punchy, clear text – be pithy and to the point JOIN OUR COMMUNITY ●● How to make Google happy ●●Less is more – keep descriptions to the basic minimum – but offer ways to www.linkedin.com/ click through to see more if the reader really wants to see more. groups/8383093

Images twitter.com/tamebay https://tamebay.com/2017/09/ understanding-how-mobile-your-users-are- Images are a much more engaging way to sell your products and work a lot what-you-need-to-measure.html facebook.com/tamebay/ better on mobile devices. However, there are some simple rules to follow about ?ref=aymt_homepage_panel https://tamebay.com/2017/09/magento-on- the-move.html using pictures so that they are mobile friendly: www.youtube.com/channel/ https://tamebay.com/2017/09/what-do-we- ●●Good quality, but low res – yes beautiful, high res photos look lovely, but UCLsYhZ7wvUeHwKV-6rnlH_A mean-by-mobile.html even retina iPad screens aren’t that good and no one wants to wait minutes

9 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

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- What to ? 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. Where can I get good images for my mobile site Video How many images on Video is increasingly key to an engaging and rich experience for users. However, this can be challenging for mcommerce page 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. Buttons One 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 JOIN OUR COMMUNITY ●●make them look like buttons – so use drop shadows and rounded edges www.linkedin.com/ ●●Make them stand out groups/8383093 And don’t worry they will work just as well on your ‘normal’ site too. twitter.com/tamebay Scrolling facebook.com/tamebay/ The old idea of designing a website so that you had “above the fold” and “below the fold” content is dead. This ?ref=aymt_homepage_panel concept has been killed by mobile, where people are already inclined to scroll through stuff. So, rethink the design www.youtube.com/channel/ 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 UCLsYhZ7wvUeHwKV-6rnlH_A portrait orientated laptop or desktop screen.

10 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

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. What to ?

Shopping the grid What video works on There is a propensity among ecommerce site templates to simple create a grid of products. Boring. And not very mcommerce sites mobile friendly. While ‘shopping the grid’ was cool a couple of years ago, now everyone does it, it looks poor. And What video formats are it isn’t very mobile friendly – especially when clicking throws up a pop-up light box. best for mcommerce 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 stuff As 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. 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

11 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

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 What to ? to get that all important mobile ranking? Responsive web design 1. Make it easy for customers for google Help your site’s visitors to complete their objectives. They may want to be entertained by your blog posts, get your Mobile customer journeys restaurant’s address, or check reviews on your products. So, design your site to help make it easier for your customer Steps in the mobile to complete their most common tasks: from task conception, to visiting your site, to task completion. Outline the customer journey potential steps in your customers’ journey to make sure the steps are easy to complete on a mobile device. How to keep google Try to streamline the experience and reduce the number of user interactions. In this example: happy (b) the customer clicks on a site after searching for lamps to buy; Google’s mobile SEO rules (c) browses through a selection of lamps; and Building websites for the (d) purchases the desired lamp. multiscreen consumer 2. Measure the effectiveness of your website by how easily mobile customers can complete common tasks Google’s web fundamentals Start 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. JOIN OUR COMMUNITY Google recommends using RWD over other design patterns. www.linkedin.com/ One of the benefits of RWD is that you’ll only need to maintain one version of your site instead of two groups/8383093 (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). twitter.com/tamebay

“Conversions” happen when a customer performs a desired action, such as buying products, calling the facebook.com/tamebay/ business, or signing-up for a newsletter. ?ref=aymt_homepage_panel

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

12 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

Revamping your site for a touchable world With more and more consumers shopping on smartphones and the tablet computer starting to replace the desktop What to ? 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 Make your website tapable even then – along with a growing number of commerce website owners – that the world is becoming tap-able Designing websites for rather than clickable. touchscreens So what do you need to do to provide the right experience across tablets and websites? Below the fold ●● The pursuit of 'tappiness' – Make your site designed around touch, scrolling, flicking and pushing, Try and forget clicking. Designing websites Make sure buttons and other controls are finger sized and think about embedded keyboards. without a fold ●● Don’t be Flashy – Don’t use flash on your sites. Apple products don’t support it and increasingly neither do many other Best fonts and type styles ‘mobile’ OSs. Look also at what other soft and middleware is unsupported. for mobile websites ●● Ignore the fold – With so many people now familiar with scrolling on tablets and smartphones, the ‘below the fold’ ethos of Making my website social 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 How to test my website 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 Website testing tools point sizes, fonts, line length and leading (space between lines) until you think it works. Website testing checklists ●● 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. JOIN OUR COMMUNITY ●● 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 www.linkedin.com/ what you are putting on it is fantastic, compelling and short. groups/8383093 ● ●Think like a consumer – You have to really get into how consumers think and what they do around your vari- twitter.com/tamebay 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. facebook.com/tamebay/ ?ref=aymt_homepage_panel People’s tastes change and adapt so keep pace with this. Your site should be a living, breathing thing regardless of devices that it and it is never ‘finished’. www.youtube.com/channel/ UCLsYhZ7wvUeHwKV-6rnlH_A

13 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

Mobile opens MOBILE PAYMENTS Taking payments is the key to any business and there are plenty of tools for What to ? up new ways taking money online. But when you look at the world of mobile commerce, a to get paid broad and baffling vista of ways that mobile can be used to pay and indeed to Best tools take payment, opens up. for ecommerce So let’s take a look at the kinds of mobile payment tools that are available Difference between mobile then and, over the next few pages, look at some of the key proponents of these and online payments different ways of making mobile, cards, websites and money all work together. Alternatives to PayPal www.tamebay.com/diy-ecommerce-guide Top five mobile payment Taking tools for ecommerce payments is the key to any business and there are plenty of tools WHAT WE LEARN for taking ●● Using mobile to pay money online ●● Using mobile to accept payments ●● What the best payment Just a quick note, however, before we do that: there is a burgeoning world of JOIN OUR COMMUNITY tools are for mobile sites mobile payments with many companies looking for an in. Here we look at just some of our favourites. There, of course, many, many more… www.linkedin.com/ And remember that there are just ways of handling the transaction through groups/8383093

mobile, you will still – with the exception of PayPal – need a payment platform twitter.com/tamebay https://tamebay.com/2017/09/smes-have- and gateway to connect this to your merchant bank account to actually get the to-embrace-mobile-payments-and-heres- money. facebook.com/tamebay/ why.html ?ref=aymt_homepage_panel https://tamebay.com/2017/09/a-guide-to- So what types of m-payments tech is there? mobile-payments-for-e-commerce.html www.youtube.com/channel/ https://tamebay.com/2017/09/targeting- UCLsYhZ7wvUeHwKV-6rnlH_A mobile-payment-pioneers.html

14 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

Card Readers The obvious place to start with taking money via mobile is in turning the phone or tablet into a card reader using either What to ? plug in devices such as Square, or using software that lets you photograph the card such as ScanPay, or just lets you key in Best card readers to use the number (all the others!). with mobile These tools are ideal for tradesmen such as plumbers and odd job men, but increasingly they are gaining traction with Square for payments 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. What is ScanPay Then there is the sticky world of NFC. This is clearly aimed at the more high-end retailer, but worth including here Bank apps for taking nonetheless as it is starting to gain some traction and eventually it will scale down to the small end. payments This is a physical paying mechanism whereby the user taps their NFC enabled device against an NFC reader at the POS. Integrating bank payment apps To date, we have seem limited trials of NFC cards in , but we are yet to see a widespread roll out. into my m-commerce site However, is set to replace Oyster cards with contactless payment readers that take the payment as What is Pingit you make the journey so its coming. What is PayM Banking and card apps What is QKR The other place to turn to start taking mobile payments is through apps from the bank or from card companies. The best Payment APIs for mobile known is Barclay’s Pingit, which allows consumers to pay bills and order things on line using the Barclay’s Pingit app. This commerce 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 JOIN OUR COMMUNITY the trial stage. www.linkedin.com/ MasterCard’s Qkr! is gaining traction in restaurants and other retailers with physical stores as it prints out a code on the groups/8383093 receipt that customer taps into the app to pay that retailer. twitter.com/tamebay Payment APIs facebook.com/tamebay/ While banks and card companies have developed apps and mobile services to ease mobile payments, a raft of third party ?ref=aymt_homepage_panel payment apps have grown up in the market too. In 2015 there were literally hundreds: today there are far fewer, with most www.youtube.com/channel/ having bitten the dust. Why? They arrived too early for consumer buy in and because they have been squashed by those UCLsYhZ7wvUeHwKV-6rnlH_A apps from more powerful suppliers.

15 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

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 What to ? 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. What is Zapp Each of these services (unlike Wallets, below) don’t require any account creating, instead linking a bank account to a What is Judo mobile phone number or, in the case of Paypal, a card to an account that works online or on a phone. Braintree payments for These apps offer a simple way to add m-payments but they do come at a price to the merchant, often being slighting to mobile commerce very much more expensive than card payments. What is Apple Pay Wallets What is Android Pay Mobile wallets differ from payment apps – in my ad hoc definition at least – in that they are just a way to hold a card or Using Apple Pay as an cards (and even these days coupons and loyalty points) and then use the phone’s inbuilt functionality to allow for payments online merchant to be made. These can be in physical stores or online and are in many ways the most simple way to ‘do’ mobile payments. Integrating Apple Pay into The most notable are of course Apple Pay and Android Pay, although others have tried. There are wallet apps for con- my commerce site sumers from banks, and even O2 and Vodafone have tried. From the retailers point of view, it doesn’t matter how many Taking online payments wallet APIs there are, you just have to accept payments from phones. with Apple Pay 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 Using Android Pay as an online merchant 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 parties Akin to wallets are third party accounts and payment services where the user essentially sets up an account and gives all JOIN OUR COMMUNITY their payment details once or keeps an account topped up. www.linkedin.com/ Topped up accounts are slowly losing favour as, frankly, they are a pain to keep up to date and other payment tools groups/8383093 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. twitter.com/tamebay

If you want to add this to your site then look no further than PayPal or Payments by Amazon. facebook.com/tamebay/ ?ref=aymt_homepage_panel Using the phone itself www.youtube.com/channel/ One of the much overlooked ways of using mobile for payments is using the phone bill. UCLsYhZ7wvUeHwKV-6rnlH_A These premium rate services are often associated with adult services and the like, but increasingly through an initiative

16 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

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. What to ? So far this only works for digital and non-real world goods such as in-app purchases, buying wifi on trains and carpark- Integrating Android Pay ing, but it could soon offer small independent merchants a way to take simple and quick low value ‘micro payments’ into my commerce site once the rules are changed. Definitely one to watch. Taking online payments with Android Pay p2p money transfer services Alternatives to Apple and There is also a growing move towards peer-to-peer money transfer services on mobile, that allow ordinary people to tie Android Pay their mobile number to a bank account and to then pay other people who have done the same simply using a text message. Taking online payments These services – most recently and effectively exemplified by Paym (pronounced Pay em) – are designed to let people with PayPal “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- Taking online payments with Amazon Pay ing, I believe, to SMEs as they can be used to pay for things. Third party payment tools As with most things m-payments related it is early days and there are no p2p mobile payment tools targeted at SMEs, for online retailers but their time will come. What is Payforit Can I use carrier billing for ecommerce P2P payment tools in ecommerce

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

17 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

MOBILE DATA ANALYSIS Just how mobile Designing and delivering a mobile site or app – or ideally mobilising your entire What to ? are your customers operation – is essential, but within that you also need to understand how mobile – and what are your users are, so here we are going to take a look at what you need to know Google Analytics about the mobile habits of your customers and how to actually measure it. How to use Google they doing? Analytics for mobile You need to Mix Panel understand How to use Mix Panel how mobile www.tamebay.com/diy-ecommerce-guide your users are – so what are their mobile habits?

WHAT WE LEARN How mobile are my customers? ●● What to measure to There are many tools that can help you analyse what is happening on your understand customer mobile website and apps – which we shall come to shortly– but what is it that mobility you need to know? JOIN OUR COMMUNITY ●● How to measure it Here are some of the key things that you need to be thinking of understand- ●● The top mobile data www.linkedin.com/ analytics tools to use ing and measuring to track your customers. As you get more into the analytics groups/8383093 you will see that you can learn so much more… but that’s for another chapter. https://tamebay.com/2017/09/ twitter.com/tamebay understanding-how-mobile-your-users-are- top-mobile-analytics-tools.html https://tamebay.com/2017/09/ facebook.com/tamebay/ understanding-how-mobile-your-users-are- ?ref=aymt_homepage_panel what-you-need-to-measure.html https://tamebay.com/2017/09/optimising- www.youtube.com/channel/ mobile-site-performance-better- UCLsYhZ7wvUeHwKV-6rnlH_A conversion.html

18 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

So what should you be looking at? 1. Traffic What to ? 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- Segment standing when people are hitting your site or app and what they are doing. Traffic is the basic measure of everything How to use Segment you do so everything comes back to traffic and to… conversion Flurry for mobile analytics 2. Conversion How to use Flurry Aside from traffic – which gives a great idea of how popular you are as a site – what is really interesting is how many AppSee 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 from Aside 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. Journey It 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 JOIN OUR COMMUNITY also need to understand why they leave or where they appear to give up. You can learn a lot by why and where people www.linkedin.com/ leave your site as it can help everything from marketing to site design to understanding how tricky using your site it. groups/8383093 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 twitter.com/tamebay

you a much better idea of how people use you in their overall shopping process. facebook.com/tamebay/ ?ref=aymt_homepage_panel 5. Faults www.youtube.com/channel/ The other thing that analytics – especially live ones – can help you with is to know when something has gone wrong UCLsYhZ7wvUeHwKV-6rnlH_A with your site, server or anything else technical and act to resolve it as quickly as possible.

19 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

Best tools to measure mobile Understanding how mobile your customers and prospective customers are – and what they are doing on mobile What to ? when they do use it – is crucial to developing your business strategy. But how do you do that? How to use AppSee Well, just as you can do it online, so you can do it with mobile and there are a wealth of mobile analytics tools Apple App Analytics available that can let you dive deeply into what is going on to help shape your strategy. How to use Apple App Analytics 1. Google Analytics Much as it does for online, Google offers some excellent tools that will let you monitor both the activity around Amazon mobile analytics 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. MixPanel MixPanel 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 JOIN OUR COMMUNITY tools, best described here in the company’s video. In a nutshell, it offers real time data on what is happening on www.linkedin.com/ your site and your app, it can track important events such as new account creations, app purchases, upgrades groups/8383093 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. twitter.com/tamebay

facebook.com/tamebay/ 3. Segment ?ref=aymt_homepage_panel Segment again lets you analyse your app and m-web usage and customer journeys, but you have to pay for www.youtube.com/channel/ it. How it works is that it collects data from you and then sends it to a other analytical tools of your choosing UCLsYhZ7wvUeHwKV-6rnlH_A 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 TAMEBAY DIY ECOMMERCE GUIDE BOOK CHAPTER 2

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. What to ?

4. Flurry How to use Amazon Part of Yahoo!, Flurry Analytics allows you to assess both app and m-web use for free across not only iOS and mobile analytics Android, but also the lesser used Blackberry and Windows Mobile platforms too. You can track in-app actions Best practice using web your users take and see how they are using your app. It lets you relatively easily understand and visualize usage analytics for mobile trends, user progress through the app and what events they are conducting with User Path analysis. Best practice using app analytics 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. AppSee AppSee 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 Analytics For 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 JOIN OUR COMMUNITY and more. www.linkedin.com/ 7. Amazon Mobile Analytics groups/8383093 With Amazon Mobile Analytics, you can measure app usage and app revenue. By tracking key trends such as new vs. twitter.com/tamebay returning users, app revenue, user retention, and custom in-app behaviour events, you can make data-driven decisions to facebook.com/tamebay/ increase engagement and monetization for your app. You can view key charts in the Mobile Analytics console and automat- ?ref=aymt_homepage_panel ically export your app event data to Amazon S3 and Amazon Redshift to run custom analysis. Amazon Mobile Analytics is www.youtube.com/channel/ free up to 100 million events per month and just $1 per million events thereafter. UCLsYhZ7wvUeHwKV-6rnlH_A

21