If you’re one of the few who haven’t yet compared prices while waiting in line or bought something while on the loo, you soon will. If you haven’t heard, we’re well and truly now in the era of mobile, mobile not just meaning your smartphone, but mobile in terms of mobility, portability, and freedom of information and consumption.
To support this shift, last year, Google updated to a mobile-first index, i.e., to prioritise sites that perform well on mobile in its mobile search results. This year, it began doing the same for e-commerce sites. And very soon, no exact date has been confirmed, performance on mobile will be the baseline for how Google indexes every single site on the web.
What this means for e-commerce store owners is that you need to be fully prepared. Even if your site already has a focus on mobile, it’s likely not enough, and updating it per Google’s guidelines will be a necessity to retain and improve your rankings.
The Benefits of Mobile-first for E-commerce
From subdirectories and subdomains to responsive design and mobile-first sites, mobile web design has been gradually evolving over recent years. And up until recently, there’s been no one method or solution that stood out as the ultimate option for webmasters.
Google itself even suggests that your website may be considered mobile-first if it offers either responsive design, dynamic serving, or separate URLs from your desktop site. However, it has now also put out the recommendation that responsive web design is the preferred method of all.
So with that established, let’s now take a look at some of the main benefits of a mobile-first e-commerce website.
Tap Into New Pockets And New Markets
Not only does optimising your e-commerce store for mobile mean you’ll reach the pockets of millions (two-thirds of adults in the world will own smartphones by the end of 2018), it also allows you to enter markets you may have never even considered.
For instance, it may open up geographical markets in which people have easier access to mobile devices than desktops, particularly if your business is aimed at people on the move. Similarly, it may open up younger and more movement-oriented segments of the population, such as students and people who commute or travel for work. This can reveal opportunities for new products and services and help to diversify your business, making it much more agile and resilient for the future.
Know Your Customers Like Never Before
Much different to the traditional process of going to a store and buying something, the purchase process today often spans multiple devices and touchpoints. A user can go window shopping and browsing in-store, compare prices on their phone while on the bus, and then finish their purchase on their laptop at home.
By making use of mobile e-commerce tech, store owners can track a user’s activity throughout the entire process — from the moment of discovery to confirming the purchase. This data can provide valuable insights into purchasing intent and user behaviour, which can be used to inform the design of your store.
Data visualisation is often thought of as just making information into pretty pictures that are easier to digest and more comfortable on the eye.
But this would be overlooking an obvious point: humans are visual creatures. We don’t naturally understand the world through words and figures; we understand it through objects, colours and the interactions and relationships between them.
Just as you’d expect, then, we have more neurons for vision than all our other senses combined. When our eyes are open, two-thirds of the electrical activity in the brain is dedicated solely to processing visual data.
The result is that we’re wired to respond to colours, images, and graphic representations much faster than text — around sixty thousand times faster. It also means we find it much easier to make new connections and retain information if it comes in the form of visual data.
Thus, for businesses trying to convey a message or concept, the advantages of data visualisation are clear. Of course, some things are better said in an essay or blog post. But when you need to communicate a complex set of multidimensional relationships, what may take hours or days to get across in words can often be conveyed instantly with a graph or a chart.
The trick is to know how to do it. Data has been called the oil of the 21st century; It informs innovation, builds better systems, enhances workflows, and attracts investors. But it’s only as useful as your ability to understand and interpret it. And so if you don’t know how to visualise your data well, you’ve pretty much got an untapped well.
This is where design comes in. By using design to convey data, companies are better able to make sense of their operations and performance and build on their experience to continually improve and grow.
As a digital agency, we make use of design throughout all stages of our client projects — from initial idea generation to final presentations and the UX-focused product outcomes themselves. Here’s an insight into exactly how we do it.
Mastering The Art of Data Visualisation
Visualising data through design is as much of an art as painting or drawing. And like an artist, you need to understand colour, size, and orientation, but before anything, how to choose the best medium to work in.
To communicate results or relationships, there’s a host of types of charts and graphs to choose from. Line charts are ideal for displaying trends. Bar charts work for value comparisons. Stacked graphs and doughnut charts are good for showing the composition of data.
For displaying stages in a process, there are two popular options: flowcharts and Entity Relationship Diagrams (ERDs). The familiar flowchart explains a series of sequential steps through a set of connected symbols. ERDs are similar to flowcharts but make use of three types of symbols — entities, actions, and attributes — to visualise databases and how information in a system is related.
We make frequent use of flowcharts and ERDs to visualise system processes, for example, in mapping the entire user journey from client enquiries to issuing invoices. When deconstructed into a series of steps, every possible action and event can be explored — including things like creating new customer accounts, preparing quotes, completing the work, rectifying problems, and getting approval from the client.
When used more for backend development, colour doesn’t play a big part in flow and entity diagrams. But on the client end, it is used extensively in all types of visualisation to help convey meaning — typically how a particular data set is performing and/or what requires the most attention.
For instance, due to its association with importance and warning, red may be used to show when a value is at a critically high or dangerously low level. Green or blue, with their association to nature and safety, may be used to represent stable levels and target markers. Orange and yellow, as they’re related to positivity and energy, may be used to represent growth and values that are performing well.
A Data Visualisation Case Study
Monitor Pro is a tool for monitoring and measuring your business’s environmental and sustainability data. Safe to say, when the company approached us, they needed a design that would be able to get across huge amounts easily and quickly. This would help the customers who use their product stay in compliance, share reports with their stakeholders, and avoid being landed with large breach fines.
In designing the dashboard for Monitor Pro, we used flowcharts and ERDs to map how users would interact with the tool and how data would flow through the system. This gave us a much clearer idea of the relationship between certain events and actions, allowing us to quickly find discrepancies and irregularities and ultimately make the connections tighter and more efficient.
When it came to actually visualising the data in the user dashboard, we turned to line graphs, contour plots, doughnut charts, and bar charts. Such diagrams integrate with other software like MS Office and, as they’re universally recognised, are most effective in reporting and sharing data.
Most important, however, is the fact that they could be made interactive and, therefore, support the changing nature of data. We’re used to thinking about data as fixed values that can be analysed. But data is a moving target. And so, as well as being able to capture a certain measurement at a certain time, the tool also needed to be able to observe trends over several months or years, and spot changes or track new interventions as they’re occurring in real-time.
In every single moment, we’re taking in masses of data. We just don’t think of it that way because we’re taught information only comes in densely packed marketing reports or incomprehensible spreadsheets. Visualising data with design bridges this gap in comprehension, allowing information to be freed from the bounds of dullness and communicated in a way that is more attractive, more absorbable, and more effective in making a change and indefinitely improving conversion rates.
Get Much More From Your Marketing
Gone are the days when investing almost all your marketing budget in display ads or PPC was the only way to compete with the big players. Today, it’s all about personalised products and services delivered at the right time and in the right place — and mobile allows e-commerce store owners to do just that.
For instance, with mobile marketing informed by user data, you can tailor your efforts depending on location, season, time of day, and intent. Not only does this mean you’re targeting highly receptive users who want your product, but it means you can also almost infinitely adapt and scale your efforts, testing different approaches and feeding in new data at will.
Optimising Your E-commerce Store For Mobile-first
If you don’t yet have a responsive website, then the following advice would be like taking a recipe for great icing and then using it on a poorly made cake.
Once you have a decent cake, i.e. have a mobile-first e-commerce store, first, you want to run it through Google’s Mobile-friendly test. The results from this test will give you a good idea of where your website stands and a solid benchmark on which to improve and measure your mobile optimisation.
Think Mobile First, Not Desktop First
It seems too obvious to point out, but it’s an important distinction to make, as by mobile-first, a lot of companies think it’s about making a desktop site that is responsive and converts well to mobile. However, as taken from Google’s guidelines, mobile-first is actually about designing for the smallest screen and working your way up.
What this looks like is today and going forward, your website not only looks great on mobile but that it performs seamlessly and offers a smooth experience while on the move and out and about.
Speed as Essential to Being Mobile-first
The speed of your site is arguably the most important factor in making your e-commerce store mobile-first. There are several things you can do — enabling compression, minifying resources, optimising images, removing render-blocking JavaScript, etc. — but if you want to make a real impact, then make the move to AMPs or PWs.
Accelerated Mobile Pages (AMP) use a pared-down HTML that allows your pages to load much faster than regular HTML. This is enhanced further as Google stores copies of AMP content in its cache, leading to even greater visibility for you in the SERPs.
Progressive Web Apps are an alternative to AMPs that offer many of the same benefits while feeling like a native mobile app. They work within the browser and can be great for offering super-fast and immersive user experiences.
Make Your Content Mobile-first
If you have and continue to use a subdomain for your mobile content, then Google will base your rankings on your desktop website. This is a problem in itself — ahem, mobile-first — but can be especially damaging if your mobile content isn’t as thorough and accessible as on desktop.
By now, though, you will have a fast and responsive mobile-first website, and you’ll be ready to tailor the design and content to be equally mobile-friendly. For instance, by using drop-down and accordion menus (Google states it will crawl all such hidden content on mobile-first sites), by being discerning about your use of pop-ups, modals, and interstitials, and by making sure your site is “finger-friendly”.
Finger-friendly is a term that pretty much speaks for itself — it’s all about making sure there’s enough padding between elements and that they work on mobile, to accommodate fingers both fat and dainty. On a similar note, you want to make sure your content is clear and your font is at least 16px, to accommodate for eyes of both young and old.
Designing For a Mobile World
As mentioned earlier, today, many users often move between devices during the process of making a purchase. Google estimates this figure at a whopping 85 per cent — highlighting the crucial and inherently shifting and omnichannel nature of mobile-first experiences.
As it’s the place customers finish their transactions, the checkout thus needs to be light and easy enough to allow for this transience and quick mode change. This means making it quicker and reducing the amount of information required, but you can also help streamline the process in a few other ways.
For example, one feature that can have a big impact on abandonment figures is being able to save the basket for later without having to sign up (using cookies). This can allow users to leave at will, whilst encouraging them to come back.
The same goes for using rapid payment systems such as Apple Pay and Android Pay. Mobile payments tend to be quicker, safer, and more convenient for users than other options — for instance, Apple Pay now lets users make contactless payments above the general £30 limit.
The Future of Mobile-first E-commerce
Already, e-commerce stores are suffering if their websites aren’t responsive or ready for mobile-first. Research from Google found that sub-par mobile experiences make consumers 62 per cent less likely to purchase from them in the future. Mobile-first is, in a way, then, already here, and the quicker you make the shift and plan for what’s over the horizon, the better you’ll fare.
In terms of being prepared for what lies ahead, e-commerce owners would be wise to start optimising their sites for voice search. From over-50s using Alexa for hands-free info to busy parents using Google Now to make everyday purchases, voice-activated assistants are playing a bigger and bigger role in e-commerce. And by making content that’s value-packed and easily digestible for mobile, it will no doubt also help with your rankings for voice search.
If this all sounds a bit vague and far off, think of featured snippets. Such short, concise information is pulled from sites that make a point to answer users’ queries without all the fluff and spammy biases. The content also typically performs well on social — all standard advice that, if employed now, will help take your mobile-first and voice optimisation to a whole new level.
Contact us
