How to redesign your (large) e-commerce website?

 

 

When you’re intending to renew yourself!

It’s been a year and a half since I was tasked with redesigning an e-commerce website. And it wasn’t just any website; it was a large e-commerce platform, both in terms of inventory, number of visitors, features and integrations managed by the operational team. This is a big milestone for a platform that has been running for more than 10 years, regardless of who you are. To start the process, we could just take the first open source system we come across, deploy it and let’s go! But that’s not quite how to progress. When an e-commerce platform is already working well and has been around for a few years, a good number of business rules have been integrated into our code and we’ll need to be able to transfer them to the new website. FYI: You can find a glossary of specific terms used at the end of the article.

Reshape, yes. But first?

Before embarking on redesigning our e-commerce platform, we had to first consolidate the current website. This entailed removing security issues and improving the overall development process, all at a lower cost. We had to keep in mind that we were moving to a new architecture while trying to avoid problems on the existing website. Here are the steps we took in the lead up to the site redesign:

– First of all, fix any security issues concerning the PHP programming language updates as well as the web server.

– Set up a cloud infrastructure which would allow the application to be moved to a secure online storage system.

– Set up a continuous code integration which would allow a coded, validated and tested functionality to be automatically launched.

Following these adjustments, we were then able to work on redesigning the e-commerce website code itself. To do this, we had three solutions to choose from:

– Starting from scratch, except for the data we already had in the e-commerce platform (customers, orders, products, etc…)

– Opting for an existing solution, which would be a CMS with different pre-integrated templates like Magento or Shopify.

– Build the new website by adding new features as we redesign it, while still retaining some elements.

We chose the last option and maintained the following elements: the website database (the data that forms our website’s memory), the server (the hardware/machine that runs the site) and the back office (the “admin” part used by our employees).

Redesigning an e-commerce website : analysis

Why do we need to change it? 

Because we don’t want to repeat the same mistakes as we’ve seen from the old application. Maintaining and evolving the platform was becoming an increasingly complicated task, so it was necessary to add new life to it on several levels. It was also necessary to remove the technical debt (security issues, old versions of the programming language and e-commerce platform,…), in other words: our technological solutions weren’t adapted to the current needs and were no longer agile enough for our platform to function properly. This technological debt can lead to additional costs, more problems and security holes. A design refresh was also needed to improve the visual and interactive aspects of our platform. Most importantly, the move to a new system aligns the e-commerce site with the overall objectives set by the Audacia Group as a whole.

What do we keep?

First of all, we’re keeping the whole system in place, which allows us to develop the backbone of our future e-commerce website. Then, we conserve the database, the server as well as the back office. The main objective is to have as little impact as possible on the existing website and to be able to continue without interrupting the e-commerce activities, while developing the new website in parallel. This way, we can develop new elements separately and test them with consumers without interrupting the running of the current site. The migration is then carried out in stages from the old version to the new one.

Which technologies should we choose?

React (node.js): for the frontend and UI. The user interface that our e-commerce consumers or employees can interact with to access the back office. It’s one of the most frequently used frameworks in web development. It’s stable and has a large community. In addition, as Audacia’s development team is used to working with this technology, we could share experiences and collaborate around it.

Express.js (node.js): for the backend that processes the requests received by the user interface (navigation on the site, adding new products, placing orders…). This framework is very fast and has the same language (JavaScript) between the frontend and backend.

MySQL: for our e-commerce website’s data management system. We were using the system already, which had been put in place to avoid considerable costs and time investment. 

AWS (Amazon): for the cloud/server part, the hardware our application runs on. Amazon Web Services are one of the heavyweights in cloud computing and its main advantages are its price and the number of tools you have available as a user.

The elements we should take into account

User Experience (UX) and User Interface (UI) audits help a lot in IT development. They are to developers what blueprints are to a builder. The big challenge is to convert new consumers without losing regular customers and to maintain/improve the conversion rate through an optimal user experience and interface. In order to test these aspects, we set up an A/B Testing for a small percentage of the platform’s users.

In terms of content, SEO is an aspect that shouldn’t be neglected. When redesigning an e-commerce platform, it’s important to consider global referencing, as well as the SEO elements already in place on the current website. Since Google is the main entry point to our site, one of the key steps is to establish new URLs with good referencing, but also to correctly redirect the old URLs to the new pages.

Redesigning an e-commerce site additionally allows for the addition of new features (Wishlist, check-out, etc…) on the new platform. These elements symbolize in part the renewal of your e-commerce website.

Ultimately, it’s important to ensure that the performance and overall results of the website aren’t affected. Therefore, response time, revenue and conversions should be closely monitored.

More advantages than risks?

Redesigning an e-commerce website comes with several risks including:

– The new site can negatively impact the conversion rate. In other words, will the new version direct and entice visitors to make a purchase?

– Returning customers may initially be frustrated with the changes to the platform

– Internally, different departments may have synchronization issues. Logistics may be impacted by problems in the transmission of orders and the marketing department may have its email campaigns misdirected

– The overall performance of the new e-commerce site (speed, revenue, traffic, visits, etc.) can be impaired

But redesigning an e-commerce platform has many advantages as well. Among other things, this task allows you to:

– Test and integrate new features 

– Remove the technical debt

– Modernize the IT architecture

– Better control the environments

– More metrics on the platform, and therefore more data, in order to measure performance indicators and enable managers to make effective decisions

– Undertake evolutionary changes according to business/manager needs

– Sustainability of the website in the long term, at least for the next 5-7 years

– Opening new markets or stores thanks to the architecture established

– The smooth running of processes (order returns, marketing emails linked to site data, inventory management, etc.)

– The code changes have less impact compared to the old version of the website

As you can see, the benefits clearly outweigh the risks. As redesign has become an essential task for our e-commerce platform to function properly, for its sustainability and its renewal, it was a crucial but necessary step for our business. Now, we have to make sure that we can maintain and further improve the platform’s smooth operation.

And what happens after the redesign?

After redesigning an e-commerce website, a follow-up will be necessary in order to measure the effectiveness of the operations carried out. It’s a question of measuring the progress, identifying the possible problems or issues which could intervene and then quickly setting up the appropriate corrective actions. Thanks to improvement of development processes, adding new functionalities, corrective actions can be deployed very quickly. The goal of an e-commerce website is also to constantly evolve according to the needs and demands of the market.  

But the big challenge remains to keep the e-shop running: it’s necessary to maintain or even increase the conversion rate, which means keeping the returning customers while acquiring new ones and not to decrease the traffic and the revenue. In short, the redesign must not in any way hinder the proper functioning of a large and successful e-commerce website.

Conclusion

The redesign of an e-commerce website, a very rewarding process for a development team, incorporates a multitude of different aspects and requires a significant investment in terms of time. As far as choosing technologies is concerned, there’s no room for error! The chosen technologies must be stable, come with a large community and work as quickly as possible. 

Redesigning an e-commerce platform has many advantages, but it also involves risks that must be known beforehand in order to approach at best the development and redesign processes. As mentioned above, the key element remains the conversion: the ultimate goal is to maintain or increase the conversion rate of your platform, without hindering its performance and its existing numbers. In my opinion, the general overhaul of Audacia’s websites is a major business challenge and I’m certain that the group has made a strong choice in following this path so that all the group’s brands can reach the next level.

 

GLOSSARY

Backend: part not visible to users that manages requests made on the frontend.

Back office: the “invisible” part of a website used for design, management and administration.

Framework: a set of tools available to build software with predefined components.

Front office: the part or interface visible to the users of a website.

Frontend: the user interface with which users can directly interact on a website.

Programming language: computer language that allows a human to create programs that are executed by a computer.

UI: User Interface of a website, concerns the design of an optimal and pleasant interface through which the users come into contact with the website. This part is more focused on the graphic, visual and creative side.

UX: User Experience of a website, concerns the design of an interface and functionality that fully meets the usability needs of each user.

---

---