Optimising Your Mobile Site

Editor's Notes

1. ZAK Case study on what Prezzybox has done to optimise our mobile site We’re not perfect but these are the steps and processes that we are going through and practising
2. Zak Explain a little bit about who we are - obviously how important Mobile is to us
3. ZAK Mobile Usage for Digital Media almost doubled in last 3 years, whilst desktop has decreased. Smartphone = consumers device of choice for accessing the internet
4. ZAK Particularly true for Millennials - If we need any evidence that they are glued to their phone then here it is… Don’t get me started on the iGeneration - ALWAYS on their phone! Simon Sinek does a really interesting Presentation about this Gew up with phone Need of instant gratification = ONUS on Retailer to provide this!
5. ZAK This is a typical user journey to purchasing a product Mobile Experience REALLY important for Brand Affinity. No good having a great brand experience/marketing/desktop experience if you’re offering a crappy Mobile Experience. Mobile is Just one touch point amongst many! All part of Attribution towards the sale - need to look at customer journey HOLISTICALLY Customer may look at a Youtube Video Remarketing Ad on Facebook Sharing a product with friends on WhatsApp = ALL on mobile. Your site needs to reflect the user experience from these sites/apps. What can we do about the journey? Pay more attention to the role of mobile and maximise the user experience! --------------------------------- Mobile is 1 touch point of a growing customer journey - especially with Customers of tomorrow Important part of purchase process regardless of sales being attributed to it. Multi Attribution very much a thing now! Look at this journey holistically and the +/- effects on the Conversion Rate Examples: A video viewed on Youtube that reminded you to buy xyz later on A remarketing ad seen on Facebook that prompted you to search for xyz The experience on mobile lead you to share the product with a friend via. Whatsapp Searching for “best running shoes” example “Best” indicates a user in the research stage Unlikely to make a purchase Important time to influence ------------------------------------------------------------- What can we do about the issues: Today we’ll focus on the role of mobile in this journey and touch on 3 optimising Maximise Stop leaving money on the table
6. ZAK What issues do smartphones cause etailers? Using Prezzybox data and knowledge, these are the biggest challenges we face today. Lower conversion rate on mobile More traffic, more devices. Slower download speeds (page speed becomes more important)
7. ZAK Prezzybox figures from 2017 A - More visitors through mobile (more than desktop/tablet combined) B - Revenue through Desktop significantly higher C - Conversion Rate a lot lower through Mobile More traffic, but lower conversion rate Not necessarily doing anything wrong if conversion is lower on mobile vs. desktop Think about how you use your device
8. ZAK December 2016 alone - device report, nearly 3,000 mobile devices recorded 3000! Q: How do we keep up with that? How do we optimise for all of them? Which ones? Becomes harder to keep UX consistent across all devices
9. ZAK However fast 4G and wifi is, still not like being hooked up to fibre broadband. You still see 3G or GPRS more than you’d like to Best case scenario is being connected to strong wifi to a router using fibre optic broadband REALLY IMPORTANT - Think about where your users are when they’re using their mobile to browse your site - are they likely to be connected to wifi. Sam will give some tips on how to maximise pagespeed shortly.
10. Develop an engaging UX ZAK We were asked to look at 3 Questions: Q1. How do Prezzybox take a Customer Centric Approach to creating an Easy route to conversion
11. ZAK Q. How many of you actually watch users use your site? Not Rocket Science!! Get them to perform tasks like searching for product and adding to basket See if they struggle with an action How do they use your sites features? Your site search. How are they navigating and filtering through product categories Good to get an overview of how people are using the functions on your site that you take for granted to work well.
12. ZAK I’ll pass you over to Sam to show you the technical aspects of the presentation SAM Has one device in particular got a bounce rate/conversion rate that stands out? Benchmark this information and take anything that falls under the average and start there. Have you actually seen how the site performs on that device?
13. SAM 50, 60, 70% of your traffic comes from mobile yet people spend all day on desktops, It’s easy to do.
14. SAM
15. SAM
16. SAM
17. SAM Control multiple devices from your desktop View content simultaneously Takes minutes to set up Costs $49 Question: How much revenue does your site generate on an Samsung Galaxy S5, and why don’t you have one in the office?
18. SAM Use a tool like googles mobile friendly ux tester to get a report on whether or not your site is mobile friendly
19. SAM Common issues, fundamental front end stuff. Viewport not set Text too small Clickable elements too close together Content wider than the screen Guides will tell you how to fix most of these issues Even has walkthroughs for wordpress, magento drupal, etc.
20. SAM Stay up to date with payment technologies Utilise tools and payment services like PayPal and Amazon checkout to create an easy route to conversion. Use tokenization technology to create a quick checkout process for returning customers. There’s other tech like Klarna, Stripe etc. that might work for you - check it out. Your users needs are unique, what works for somebody else might not work for you. Make it as easy as possible for your users to checkout
21. SAM If all else fails, ask them what is wrong. We asked for feedback when users showed intent to abandoning checkout Received feedback that delivery cost were the biggest barrier to purchase We noticed that delivery costs were not clear on mobile devices and made some UX changes.
22. SAM Key takeaways for developing an engaging UX Watch your users Use the devices they do Front end dev tools are not just for devs Ask your users what is wrong
23. SAM Move customers along the purchase path seamlessly Make it as easy to purchase as possible Use Site navigation Site search
24. SAMWhat did we do when we audited Prezzybox navigation? Track clicks. Leverage event tracking in Google Analytics to get data to use to make actual decisions on merchandising a main navigation Pair this with landing page traffic stats and ranking data. Remove clutter. Be wary of SEO - Removing one thing from a main navigation could remove 10’s of thousands of internal links. Speak to SEO team. Pay careful attention to placement of items in the hamburger/hidden menu. Placement on the screen really matters for mobile High up might mean hard to click
25. SAM SEARCH IS IMPORTANT Retailers like Zara/Amazon put massive prominence on search - make it sitewide on desktop and mirror this on mobile Higher conversion rate through search because of more defined customer intent Use redirects and substitutes to push users along the right paths
26. SAM Amazon, ASOS, Just eat, AO, etc They may not be in the same industry but a hell of a lot of people are used to using them You might not have or want an app but you can still get close to it in terms of UI on mobile web Take inspiration on features from Facebook/Twitter etc
27. SAM Key questions to answer Every milli-second counts with load times Page speed has always been important but now Made even more important with the addition of AMP (accelerated mobile pages) pages
28. Some of the problems highlighted seem basic
29. In a lot of cases it’s not a big job But depends on platform There will be a plugin or library to help tech team do this
30. Requests Less requests = faster load time. Are you loading in a load o stuff that you don’t need? The quickest way to load something is to not load it. Page Size Shows you the weight of the page. Doesn’t matter how quick your servers are, if somebody is trying to download 20mb over 3g connection that’s going to take a while. DomContentLoad This is how fast your site loaded the content that