View the original post
As a freelance or agency designer, updating WordPress sites can be a lot of fun. You might get to do a full brand exploration, modernize a website, or explore new functionality that’s sure to “wow” your client.
But as you probably know, when the updates are for an eCommerce site, there are a number of things to consider before actually changing anything.
In order to help you tackle these site updates while causing minimal downtime or lost sales, I’ve crafted this guide inspired by advice from Flywheel’s Happiness Engineers and members of our Agency Partners Program.
This guide will cover:
- 5 signs it’s time for an eCommerce redesign (or at least significant updates)
- Why you should be cautious when updating eCommerce sites
- Best practices to follow to avoid downtime or lost revenue
5 signs it’s time for an eCommerce redesign (or at least significant updates)
We all know that just because a client asks for a full site redesign, it isn’t always the best solution for them. When it comes to eCommerce sites especially, if you don’t have to redesign it, sometimes it’s best to try and get by with smaller updates (to avoid some of the concerns we’ll talk about in the next section).
That doesn’t mean a redesign is off the table, however. In fact, there are a few great scenarios where it’s probably the right call:
- The site’s conversion rate is low.
- The site’s bounce rate is high.
- Your client is receiving customer complaints about the site’s functionality.
- The theme or a key plugin the site is built with isn’t supported by the developer anymore.
- You’re reading this article.
1. The site’s conversion rate is low
If your client has a good amount of traffic coming in but a low conversion rate, that may be a sign that there are some UX problems occurring on the site. Pull up the URL and start clicking around. You’ll probably be able to notice what the problem is pretty quickly.
Some questions you can ask yourself:
- Is the navigation easy to follow?
- Are product pages clear and easy to purchase from?
- Does the site and checkout flow work on mobile devices?
- Do pop-ups and widgets display correctly?
- Is it easy to view the cart?
- Does it feel secure to input credit card information?
While a site redesign isn’t the only way to fix some of these problems (and it’s certainly not the only way to increase a conversion rate), it is one way to tackle some of the underlying issues, especially if you’re running into more than one.
2. The site’s bounce rate is high
Like conversion rate, a high bounce rate can signal that something about the current site design isn’t resonating with shoppers. One of the biggest offenders: Slow load times.
According to a 2017 study by Google, as page load time goes from 1 second to 5 seconds, the probability of bounce increases 90%.
For eCommerce sites, a high bounce rate directly translates to lost revenue. If that’s something you can fix for your clients, you’ll provide them a ton of value (and a lot more money in their bank account).
Again, while a redesign isn’t the only way to speed up a WordPress site, it could be necessary if the culprit seems to be some of the technology the site is built with. If now seems like the right time to switch to WooCommerce or upgrade to an all-in-one eCommerce solution, it might make sense to combine all of these changes into one big update instead of slowly rolling them out.
3. Your client is receiving customer complaints about the site’s functionality
If it’s literally broken…that’s a pretty good reason for a redesign. User experience is critical for eCommerce sites, as you need the end customer to feel confident about doing things like entering credit card information, adding a shipping address, or providing other personal data to your client’s site.
If you or your client aren’t regularly testing their site, functional problems may go unnoticed for a while. Hopefully, your client has customers who aren’t afraid to provide feedback, and who will send an email or submit a support ticket if elements of the site are broken or confusing.
If your client mentions receiving complaints here and there, it’s probably not a big deal (or at least can be solved with one-off bug fixes). If your client mentions a lot of these complaints, or there seems to be a pattern, that’s a good sign there may be a bigger problem, and a redesign might be necessary.
4. The theme or a key plugin on the site isn’t supported by the developer anymore
This is probably the most obvious reason for a redesign on this list, and could actually be responsible for low conversions, high bounce rate, and broken functionality. If your client’s site depends on software that isn’t being supported anymore, it’s only a matter of time until a redesign is needed.
Before you jump to conclusions about a theme or plugin being discontinued, however, it’s a good idea to do your research to see what’s going on. Maybe the plugin or theme author released a critical update that your client missed, or maybe they’ve been acquired by a different company and there’s a different process for support.
In the end, you may still decide a redesign with a new theme or plugin(s) is needed, but it’s helpful to establish this context before making changes, so there aren’t any surprises down the road.
5. You’re reading this article
If you’re here, I’m guessing something in your gut is telling you that significant updates are in fact needed for your client’s eCommerce site in order for it to thrive.
Listen to your instincts.
While you should pinpoint the exact goal of the redesign, if you and your client are aligned on the scale of changes needed, that’s a good enough reason to prioritize it instead of trying to get away with small patches.
A redesign will be a lot of work, but just remember that the amount of work (and potential problems) will only continue to increase the longer you put off solving any underlying problems.
So to recap: While major updates aren’t the only way to fix problems for eCommerce sites, sometimes they’re necessary, especially if the functionality of the site or user experience is compromised. If you find yourself in this position with a client’s site, there are a few things you’ll want to think about before performing any of the updates.
Why you should be cautious when updating eCommerce sites
To be clear, “cautious” in this sense doesn’t mean “don’t do it.” Web designers update eCommerce sites every day without issue, and you can, too!
When I say “cautious,” I mean there are a few additional things to think about when updating eCommerce sites, and you’ll save yourself a lot of headaches if you think about them before you push anything to production.
Downtime means lost sales and decreased credibility
Downtime is something you probably try to avoid with all of your client sites, but for eCommerce stores, uptime is critical. If site visitors are unable to access your client’s shop, there’s literally no chance for them to become customers and it increases the chances they take their business elsewhere.
A broken site may even permanently turn some visitors away, causing them to think the store has been hacked or gone out of business.
Not to put the pressure on, but the stakes are a little higher when working with an eCommerce site. Hence why it’s best to be prepared before you make any updates.
Overwriting the database risks losing orders on the live site
Let’s say you’re making changes in a staging environment while the live site is up and running like normal. You update your code, test the changes, and push to production four hours later.
If you overwrite the database, orders that happened on the live site within that four-hour timeframe could be erased…resulting in confused customers and inventory problems for your client.
If their site doesn’t receive too much traffic yet, you may be able to get away with overwriting the database unscathed, but as your client’s store becomes more successful (and the frequency of orders start increasing), the risk increases. This means your workflow for performing site updates is critical to make sure you don’t overwrite anything you don’t mean to.
Massive changes could put user experience at risk
With eCommerce sites, important user actions are constantly happening in real-time, such as adding products to a cart, entering billing information, submitting payments, etc. Imagine you’re about to purchase something when the entire design of the site you’re on changes. Would you trust it?
Probably not. You’d hit refresh, get confused, and maybe even pull up a competitor’s website instead.
In the next section, I’ll examine ways you can prevent this uncertainty from updates (especially at the scale of a redesign). With any updates to an eCommerce site, however, it’s a good idea to think about how the changes will be perceived by users currently on the site at the time of the updates, to make sure you’re not doing anything too drastic (especially to the checkout flow).
Now that you know a few things to keep in mind when updating eCommerce sites, let’s get to the good stuff!
Best practices to follow to avoid downtime or lost revenue
Depending on the scale of your updates, it may or may not be necessary to follow all of these steps. My goal is that you’ll be able to mix and match these best practices to discover the workflow that works best for you and your client!
7 tips for safely updating an eCommerce website:
- Make sure WordPress, the theme, and key plugins are updated.
- Consider notifying users of site maintenance, so they know when not to shop.
- Put up a maintenance page while you push the updates live.
- Make changes on a local or staging site first, then update the live site.
- Quality check before and after pushing changes live.
- Embrace iterative testing (when you can).
- Have a support plan, in case something goes wrong.
1. Make sure WordPress, the theme, and key plugins are updated
Will this step alone solve all your update woes? No.
But, it will ensure that you don’t make major site changes only to learn that something’s going to break or could’ve been fixed by first updating a plugin.
Plus, a redesign is always a good time for site housekeeping, so embrace your inner Marie Kondo and get organized. Perform WordPress, theme, and plugin updates, archive old orders, clean up the database, and maybe even uninstall some of those themes or plugins the site isn’t using anymore.
(We all know how quickly they can add up, especially if your client was managing their own site before coming to you!)
Once everything is running on the latest version, you’ll know exactly what you’re working with when it comes to this redesign. And who knows, maybe you’ll even shorten your to-do list by fixing a functionality problem just by updating something!
2. Consider notifying users of site maintenance, so they know when not to shop
This may not feel right for all eCommerce sites, but if your client has a small community of shoppers, the transparency of a notificiation about site updates might be well appreciated. The best part is that it doesn’t add too much extra work on your end; you just need to communicate timelines clearly with your client, so everyone knows exactly when to expect the changes to happen.
If your client has a lot of repeat customers, you can suggest they send an email blast notifying users of the maintenance window. If your client sells to a lot of net new visitors, it may be worth exploring a pop-up or sticky header with a message about when the updates will take place.
And speaking of “when the updates take place,” if you or your client are worried about it, another step you could take is to make the changes during “off” business hours (like late at night if most of their sales happen from 9-5).
While these techniques can’t guarantee people won’t shop during the update window, they can help mitigate some of the risk of activity happening on the site while you push changes to production.
3. Put up a maintenance page while you push the updates live
If updating the eCommerce site while visitors are active isn’t a risk you want to take, a full-proof way to stop the shopping is to put the site in maintenance mode.
A maintenance page or a “Coming soon” page essentially hides all the content of your site, usually with a message like, “Updates are coming; check back soon!”
The benefit of this technique is that it looks a lot more professional than a broken site. Instead of seeing your redesign in progress (and potentially in a broken state), visitors will see a simple landing page with context about what’s happening.
The downside is that visitors won’t be able to shop while you have the site in maintenance mode, so it’s best to turn this on right when you’re ready to make updates, and then turn it off as soon as you’re done so your client can get back to earning sales.
These plugins can help you put the site in maintenance mode:
And again, making updates during off-hours can help mitigate any lost revenue from the redesign.
4. Make changes on a local or staging site first, then update the live site
It’s still a good idea to test your updates in a development environment first, but you need to be cautious about automatically pushing changes to production, in case that process overwrites the database of the live site. (As I mentioned earlier, this can cause orders to get lost, and that’s not a headache you want to deal with.)
What many web designers do instead make the updates on the live site manually, after they’ve tested the code in a matching development environment. It’s not the smoothest workflow, but it does ensure your database remains unchanged and still gives you the opportunity to test things before you edit the store.
If you haven’t used a staging site before, see if that’s something your WordPress host provides. (Flywheel and WP Engine include a staging site with every plan!) If it’s not already included in your hosting package, you may need to look into upgrading your plan to unlock that functionality.
As for a local environment, Local is a free local development platform you can get started with in less than five minutes. You can also connect Flywheel or WP Engine sites, making it super easy to pull down a copy of an eCommerce site, so you know the environments and database match.
5. Quality check before and after pushing changes live
Testing is critical when redesigning an eCommerce site, and I recommend doing it both before and after you push your changes live.
Flywheel and WP Engine’s staging sites, together with Local, allow you to work on a copy of the live site (so you can be reasonably confident that if things are working there, they’ll work on production), but it’s still smart to confirm everything is working as intended once your changes go live.
After all, you never want to risk pushing changes to production, walking away, and then getting an angry phone call from your client because something broke and you didn’t realize it.
You’ll want to test whatever you’re updating, of course, and review any pages with significant design changes, but the other element of eCommerce sites you’ll want to check is the ability to make purchases.
These resources can help as you’re testing the checkout flow:
- Testing WooCommerce Payments: A WooCommerce help doc
- WooCommerce Core Testing Checklist: A WooCommerce checklist on GitHub
- Ghost Inspector: An app for testing website updates
- Usetrace: A testing system that doesn’t require code
- Puppeteer: A Node library to control Chrome over the DevTools Protocol
6. Embrace iterative testing (when you can)
If you’re feeling overwhelmed by the number of changes you need to make to an eCommerce site, at some point it might be worth asking yourself: Do they need to happen all at once, or can they be split into multiple, smaller updates?
If you’re working on a full brand redesign and functionality overhaul, it might be better to put up maintenance mode and try to knock it all out at once. If you’re making smaller changes, however, or can think of natural phases to roll out the updates, a good practice is to embrace iterative changes over time.
This has a few benefits:
- If something breaks, it’ll be easier to track down what went wrong (because you’ll have fewer lines of code to sort through).
- The user experience is less likely to be disrupted, as you’ll update a single piece of the site at a time (as opposed to the whole thing).
- If you’re measuring the impact of your site updates (on site speed or conversion rates, for example), you’ll be able to pinpoint exactly what changes caused the results.
If this inspires you to make lots of little changes instead of a full redesign, it may be worth using a versioning system like GitHub. This will help you keep track of when/how code was changed, and also help you easily roll back an update if something gets pushed before it’s ready.
7. Have a support plan, in case something goes wrong.
Hopefully, at a minimum, you’ve tested changes in a staging site first or created a backup of the live site before pushing new lines of code. Steps like this will ensure you can roll back to where you started, in the event that something really breaks.
In the worst-case scenario, however, there may come a point where you need to phone a friend for help, and it’s best to have that plan in place before you’re staring at a broken web page.
Think about your resources. If you have a friend in the business you often consult with questions, give them a heads up when you’re about to do a big redesign, and see if they happen to be available during the same timeframe, should a question come up.
If you’re active in Facebook or Slack communities for web designers, consider doing the same or even reaching out for advice before you start the update.
Finally, make sure you know how to contact the support team of your WordPress host and any key themes or plugins that are powering the site, especially if you’re activating a new one for the first time. Flywheel and WP Engine customers, have 24/7 access to WordPress experts who are always on standby should a server issue come up.
Updating eCommerce sites can be more difficult than your traditional website, but with these tips, I hope you feel empowered to make your site changes with minimal risk of downtime or lost revenue! By following some simple best practices, you can dramatically decrease the chance of anything breaking, while also dramatically increasing the value your services provide to your clients.
While this is a long list, it’s by no means exhaustive. What else do you do to safely update eCommerce sites? Let me know in the comments below!
Update WordPress eCommerce sites easier with Flywheel
Flywheel makes it easy to manage your clients’ sites, thanks to features like free staging sites, free automated backups, free collaboration tools, and 24/7 support from WordPress experts. That’s all on top of our impressive cloud hosting infrastructure, which gives their sites blazing fast speeds and locked-down security.
Discover the difference of a hosting partner (instead of a provider) today!
The post 7 best practices for updating eCommerce sites appeared first on Layout | Creative content for designers, developers, & marketers.