Site redesign

Redesign your e-commerce site is not always an easy thing. CMS migration projects or graphic charter or UX change projects can have a strong impact on your shop's business and are highly strategic subjects. How to optimize the merchant site redesign project and make it a success? 

If you are looking for a guide or information to migrate or redesign your e-commerce site then read our complete and free guide below specially dedicated to this subject!

Why is a redesign project often more complicated? 

The redesign of an e-commerce site is a difficult exercise for many merchants and agencies. These are generally much more complicated projects than the "pure" creation of an e-commerce site because you have to take into account what already exists. But then how much to succeed? What elements can make a site redesign successful and what are the pitfalls to avoid? see together in this guide.

Why redesign a merchant site? 

Before committing to a technical migration or graphic overhaul project, it is necessary to analyze the real interest of the project. 

It is a project that will require time, budget and if it is not essential then as much invest this money elsewhere.

But a website redesign is also a major challenge to ensure the sustainability and development of your business! 

Let's take a look at the common reasons for switching e-commerce sites for a new project.

Redesign a site to change technology

This is perhaps the most common case: changing e-commerce technology (from cms e-commerce) to, for example, going from Prestashop to Shopify, is the most common case. There are many reasons behind it, but the obsolescence of the solutions, generally open source, is a strong argument.

No one would imagine launching an e-commerce site on OS Commerce or Magento 1.9 in 2022. Why ? Because they do not hold up technically, no longer benefit from security updates and are generally not at the level of what is expected in terms of functionality for an e-commerce site today.

Technical obsolescence is therefore one of the very valid reasons for organizing the redesign of an e-commerce site. 

If your maintenance costs are skyrocketing, it is becoming more and more complicated to update the site or simply that the editor of does not even offer maintenance and security updates anymore, then it is largely time to change e-commerce solution. 

Redesign your site to change the design

Changing the design of a site can happen more regularly than you think: evolution of the brand image, ergonomic improvements, dated design, new business objectives, etc.

A site, e-commerce or not, represents the brand image of the company. In a few years, it has even become the main showcase for all businesses. It is therefore normal that the design follows the evolutions of the company and faithfully reflects its image.

The graphic overhaul is therefore very often a must every two or three years to modernize and update the image of the site.

A site redesign to add functionality

Sometimes there is no choice but to redo a migration or redesign to add important features. Some versions of cms become obsolete, are no longer supported by plugins or are not even available on your current platform. 

Even if the site continues to work correctly and is not yet obsolete, the migration may be necessary to continue to invest and develop the site.

A complete reorganization for more efficiency 

Another good reason to migrate or redo your site is to reorganize the elements accumulated years after years.

Upgrading your site is a good thing, but after a few years, it can lead to a stack of functions on top of each other that has lost its meaning. 

Reorganizing all of this with in-depth work on ergonomics and UX is essential.

And that's good because these are among the two points to work on the most during the redesign!

But by the way, what is a site redesign?

Before continuing to talk about redesign in all directions, let's agree on the vocabulary: a site redesign here is considered in the broad sense: change of technical platform, change of design (theme), change of identity and / or business model etc…

In short, we are putting everything back together! 

We are therefore not talking about a "run" phase where we add functionalities to the site as we go along, but rather a "reset" of needs to start on a new healthy basis.

A redesign is often initiated when the technical debt of the e-commerce platform is too high or when the ux no longer works. 

A site redesign is a bit of a move. You keep many things that already exist in a new container, but you also take the opportunity to plan for the future and prepare for future growth.

What are the different steps to redesign a site?

The site redesign roadmap can obviously vary from one project to another but overall we always find more or less the same scenario. Remember that each of these tasks can be done with the help of a consultant or an agency if needed.

1) Realize the problem

One day we say to ourselves that the site no longer meets our needs, an employee complains a little too much about the waste of time caused by archaic processes, we receive an email from the e-commerce platform to say that he will not be no longer updated, your agency goes bankrupt, the big boss wants to change the site...

The reasons are very varied for realizing that the site is no longer suitable and that it is time to undertake an overhaul. It is, in my opinion, not necessary to judge the reason for the redesign because once the idea is in place within the company, one tends to see more and more the faults of the current site. 

2) Analyze your needs 

The needs analysis phase is ideally modeled on the existing one, see below, to keep what works and provide a solution to unresolved problems today. 

New ERP, WMS, PIM, Compta connections, new more modern ergonomics, new graphic charter, new product ranges or segmentation, improved productivity of your e-commerce site… Everything is good to add at this stage. Everything may not be possible, it often depends on the budget, but knowing how to analyze what you need to progress will be a real plus for the future. Of course, this step can be done with an external e-commerce consultant, freelancer or consulting agency to leave nothing to chance and to have the opinion and advice of a professional who can, for example, carry out an e-commerce audit. .

3) Create a specification / backlog

Once the initial audit has been carried out and the needs defined, the specifications will have to be written. So there are specifications and specifications. At Pikka, we sometimes receive very light documents (one or two pages) and sometimes lists of hundreds of features in Excel without any context. We could write a complete article on the specifications but it is a complicated exercise for many merchants. 

The main thing, in my opinion, is to specify the context of the project, the reasons for the migration or the redesign and the expected developments.

An evolution in technical specifications may be necessary in certain cases such as an e-commerce headless or connected to many external systems of the company's information system.

4) Analyze market solutions

So yes, at Pikka, we love Shopify but on your side, it may be necessary to evaluate several solutions? Tailor-made, headless, open source, SaaS, a combination of several elements… There may be room to find solutions to your e-commerce problems by taking a look at what is being done on the market.

And this is clearly the objective of this point during the redesign: to update your knowledge of the cms market according to your needs. Software evolves quickly and some can offer innovative solutions that will help you in your daily tasks.

This step is far from essential during the redesign, but if you only connect the same type of agency, you risk not being able to expand the possibilities of your site and find the same problems. 

An ecommerce site redesign is one of the rare opportunities to change E-commerce CMS.

5) Create new customer journeys 

Of course, all of these redesign steps depend on the size of your project. The bigger the project, the more detailed each step will be. In this case, this is very often done in collaboration with a UX agency or a design agency that masters ergonomics. Please note, we are not talking about a graphic charter but about user journeys. 

You can have only one: each user buys one or more products. But you can also have several: some users benefit from special conditions or special payment methods. Examples include:

• recovery of a gift
• B2B journey with different payment methods
• subscriptions and products purchased individually

Of course, a preliminary study of the existing customer journeys on your site is essential to keep those that already work!

6) Create the design 

Once the new customer journeys have been created, we can finally focus on the design. Again, you can call on a freelance art director, a design agency, a creative agency or in-house art directors. 

For a redesign project, the best is still to call on specialized skills.

Design is not about applying a few colors next to each other to "look pretty". 

the idea is to make models for each page or template. At a minimum we will often find:

• The home page
• The Collections / Categories page
• The product page 
• Cart
• And the command tunnel

We can also have models of the FAQ page, Who are we, brand, pro space, customer space… In short, all the static pages. It is rarely necessary to create mockups for pages such as legal notice pages or the like. 

7) Integrate the design (creation of templates)

Once the design has been validated, we can move on to technical integration. Integration is simply a crucial step in the redesign and yet poorly mastered by many agencies and merchants. 

Technical integration is when the front-end developer will create the site from a technical point of view. He will transform the models Figma ou Adobe XD en code Html Css et JS . See even in Liquid in the case of Shopify. 

This is an important step, especially in large redesign projects, or even Shopify site creation, because the integration can be long and meticulous. It is obviously necessary to have a responsive e-commerce site at the end and therefore that the design works as well on mobile as on computer. 

It is also at this stage that we can identify and correct any ergonomic errors not visible in the previous stages. 

For example, opacity points for information bubbles or action buttons that are less visible than expected in real conditions.

In short, it is the confrontation of dreams, design and ergonomics, with technical reality: device and browsers. 

Because yes, despite their apparent evolution, browsers and devices are not at all at the same level for managing web pages and the integrator must take this into account to obtain the best results.

8) Code new features 

In addition to the creation of the theme, there is often a more "back office" and functional oriented development phase. This can be through the addition of already existing applications in a theme store or through the "pure" code or nocode development of additional functionalities. 

This phase is more or less long depending on your needs. The more code or existing applications can be used, the more the budget and project time will be reduced. It's up to the project manager and you, the client, to see which combination works best. 

9) Import data from the old site 

Once the design has been implemented, once the specific developments have been carried out, it is time to import the data to carry out the website migration and keep as many things as possible.

Again, this step varies a lot from one project to another because the amount of data influences things but also the starting and ending e-commerce solution. 

At Pikka we carry out many migrations Magento vers Shopify or Prestashop to Shopify, in both cases we can retrieve all orders, customers and products. Sometimes, for certain "exotic" or simply less widespread e-commerce solutions, it can be more complicated. 

In the case where data is stored outside the cms, for example sales data in an ERP, it is necessary to create the computer link between the ERP and the new E-commerce CMS but the import is not required since the data does not move.

10) Training 

We are almost at the end of the site redesign project! It's time to form the teams, or yourself if you are alone. Often underestimated, the subject of training is nevertheless crucial to keep a good speed in production and get a good start, especially in the context of a CMS migration. 

In the case of a "simple" redesign, there is still often an evolution of the functionalities of each CMS, for example, migrating from a Prestashop 1.4 to a Prestashop 1.7 may require training. Why ? Because bad habits may have been adopted by the operational staff. 

It is not uncommon to find teams having found a solution on their own, for lack of appropriate support. A training to start on a good basis and always a real plus to make the most of your new merchant site.

11) Prepare SEO (in case of CMS change) 

If the site redesign also corresponds to a migration to a new E-commerce CMS, it is necessary to plan an additional step: The migration of urls to maintain your SEO.

In effect, each e-commerce software handles urls in its own way. Some swear by url rewriting, others identify the product via a number in the url, others have a system of collections / sub-collections in the url and some, like Shopify, only offer a only format possible.

The purpose of 301 redirects is to point old addresses to new ones. The more pages your site has, the longer but necessary this step will be. 

If this step is not proposed by your web agency when producing the quote, check that this service will be covered by your SEO agency. 

If nobody takes care of it, it will be a disaster for the natural referencing of your site. 

12) The Site Switch 

Once the teams are operational and the site ready, it's time to make the switch. This is where we will move from the old site to the new one. The redesign will be pushed into production, live, to accommodate all your traffic. 

Depending on the strategy and the solution chosen, this can represent more or less problems or stress. In the case of a migration to Shopify, if the urls have been properly redirected, there is no problem with scaling up or limiting the number of visitors. 

As part of a migration to an open source tool like Magento or Prestashop, it may be necessary to provide stress tests for your servers to check if they hold the load before going into production. 

What to check before doing an E-commerce redesign? 

So a redesign cannot be improvised. The idea is to keep what is important, or transpose it and change what needs to be while being adapted to your budget. Analyzing what works today and what makes your site successful is therefore essential to ensure the success of the redesign project.

Analyze what is working well on your site today

The most important thing is therefore to write down everything that is working well today and that does not need to be changed. This can go through a complete UX audit, an analytics audit, customer surveys, heat maps, heatmap as with crazy egg … your own point of view as an e-commerce manager … in short, the means are numerous but it is necessary to collect the strengths of your site so as not to obtain a less efficient site during the redesign. 

Note that it is also important to do this internally. A merchant site is certainly a tool for customers to place orders, but it is also an industrial tool for internal production (invoices, accounting, logistics, etc.) There are countless migrations and changes to e-commerce platforms that have delivered more beautiful sites but less connected within the company. 

If you have to hire 50% more staff to keep the same turnover, I doubt you can call a migration a success. The goal is also to improve internal productivity during the migration. Analyzing the initial pre-overhaul flows is therefore fundamental.

These contextual elements have their place in your specifications to explain the initial context and provide relevant information to your future agency.

You are now ready to prepare your website redesign safely and perform a migration or upgrade to take advantage of new features and prepare for the future of your e-commerce site!