Magento development workflow

Anže Harej14.03.2019eCommerce

If you have decided to use Magento as the platform for your e-commerce project, then you probably must have done the research and know a thing or two about the platform. You probably know that it is a big and complex system that can handle just about any project – no matter the size. In order to develop a complex e-commerce site you need two things: good developers and enough time/resources.

Two of the most common questions we get from our clients at the initial meetings are “How long will it take to finish the project?” and “How much will it cost?”. The purpose of this article and the second part of this article is therefore to answer these questions and to describe in detail what our e-commerce project phases look like.

Mini project before the project

A successful project launch depends on both parties, while the key is to set up realistic deadlines and expectations.

Every project (and with it every timeline) is different, so setting the right time frame and cost estimation takes a lot of effort – from both sides. That is why we strongly suggest discovery sessions before we set the final offer, in order to have a better understanding of the inner processes, business goals, and requirements of your company.

We are basically talking about a mini project before the actual project and it can cost around 10% of the whole project. In our opinion, this phase can make or break the project because, if done right, we can gather every feature and requirement from the client and set the scope and timeline for the entire project.

Our friends at Degordian wrote a great blog post about discovery workshops, which you can find here.

Breakdown of e-commerce project phases

Our standard e-commerce project has 10 phases, which are explained below in greater detail:

1. Research phase (marketing, SEO, UX, technical workshops, etc.) – 10% of the project

After we gather all the necessary information, the sales team meets up with the project manager, which commences the research/discovery phase, where we try to discover all the aspects of the client’s business that might have been overlooked during the sales process and might have a direct or indirect impact on the client’s e-commerce business. Here, technical workshops are used to discover and define the inner workings of the ERP system, synchronizations and other more technical aspects of the project.

We pay special attention to defining the buyer personas of the client’s business in coordination with our UX expert. Defining buyer personas is, in other words, defining the most common customer types based on market research and real data by describing their demographic data, behavior patterns, greatest pain-points and goals. Defining buyer personas is the foundation for the definition of main technical functionalities and UX elements of the e-commerce store. Our UX expert is therefore included in the project team from the very beginning.

In cooperation with our SEO team, we simultaneously prepare a SEO strategy for the new e-commerce store, which consists of:

Keyword (KW) analysis where we (KW-wise) analyze the e-commerce business in question, their biggest competitors and the market itself. A KW analysis is mandatory, since it lets you gain valuable insight into your customers’ search habits so you can adapt your e-commerce products and product categories according to their needs. With an appropriate KW analysis you also eliminate the possible risk of overlooking any potential new trends for your business.
Onsite/offsite SEO strategy where our SEO experts brainstorm about the methods for reaching the best possible rankings and results, taking into account the type of e-commerce, your market, your buyer personas, etc.

The SEO strategy is one of the crucial foundations for the store, since UX and technical implementations have to be harmonized and coordinated with the SEO strategy.

Depending on the project and the situation of the client’s marketing department, we also include our marketing team in order to define the short- and long-term marketing strategy of the e-commerce store.

We really want to stress that the research/discovery phase is a very important one, since the quality of our outputs in this phase has a direct impact on the following project phases and on the final product, so “cutting corners” in this phase can only result in a mediocre final outcome.

A typical discovery phase meeting with designers, PMs and developers.

2. Setting up the project team, scrum board, task backlog, weekly sprints and meetings with the client – 5% of the project

We start by setting up a scrum board with a task backlog, which is used for weekly or bi-weekly sprints. It’s quite easy to have a good project overview and communicate the progress and any open issues to the client if this phase is done right, so take your time with the initial setup and try to improve it with each iteration.

Furthermore, we try to match the client with the right team members, trying to reach a certain level of synergy, especially by selecting the right project manager (PM) and lead developer. Together, they prepare a project overview and the PM can then establish a realistic sprint timeline. Here, the input of the lead developer has proven to be mandatory for a valuable project backlog definition. The PM also has to prepare the key deliverables and milestones for all planned sprints.

Then comes the operative part of the project development. The PM already defined the first sprint and can then start with the internal kick-off meeting. The planned resources need to be confirmed or adjusted by the team involved. The development magic would now commence, but we don’t really have any environment to do it in yet, right? Actually, we do – just keep on reading.

Example of tasks on a scrum board.

3. Environment setup and core configuration – 5% of the project

Parallel to the research phase, we implement the core configuration and the development environment setup. We try to standardize the environments as much as possible, but every project has its own technology specifics.

This is the part where the tech lead, DevOps, and system administrators check all the necessary technologies and together they build the development server and implement a git-flow.

Next up is a clean Magento installation, custom theme registration and all the basic Magento configurations. This includes the configuration for taxes, sales, catalog and search settings, default email addresses, company info, etc.

4. Design and UX – 10% of the project

The design team, in cooperation with the client, creates the wireframes with mobile-first in mind. The SEO team and the development teams are included for the purpose of confirming the site’s architecture and functionalities.

After that, the homepage, product page, category page, static pages and the checkout pages are designed, focusing primarily on the mobile experience. Both the wireframes and the designs are synced to InVision, where we can create rich interactive prototypes, gather the client’s feedback and thus easily move the project forward.

Initial wireframe for a simple e-commerce site.

5. Frontend development – 10% of the project

The frontend developer is already present and collaborating in the design phase, so they know from the start what the design will look like and what special features they, as developers, will need to implement. The design team hands off the design in Avocode, which is a great tool for frontend developers because they can easily inspect the design, export images and other assets and copy styles in the language of their liking (CSS, SASS, SCSS, LESS, etc.).

Frontend development became more complex with Magento 2 because the developers have to be acquainted with more technologies/frameworks (SCSS, JavaScript, jQuery, knockout.js, PHP, HTML, etc.). Additionally, frontend developers must be familiar with Magento 2 specific frontend ecosystem, e.g. its implementation of Knockout.js and it’s MVVM coding paradigm. As frontend and backend in Magento 2 became tightly intertwined, frontend developers must (at least to some extent) also learn some backend programming, which involves creating frontend focused modules, extending/modifying functionalities of existing modules and more.

In this phase, the frontend developers create CMS pages, CMS blocks, custom widgets, custom modules, SCSS styles, and template customization. In each sprint, we try to develop specific parts of the website and also try to implement the design for all the mobile breakpoints.

6. Customization – 15% of the project

As every shop requires some functionalities that are completely custom, we often have to develop these features from scratch. These are usually very project-specific and cannot be sourced from other solutions or, in best cases, can only be partially used. In return, this requires a custom code, which must be tested thoroughly to avoid any bugs, potential security issues and interferences with other parts of the shop and to make sure the code is sufficiently performant so as to not slow down the site by a significant amount.

A very good example of such a feature would be ‘find in stores’ where a user can check exactly which sizes of an item are available in specific physical stores. The implementation of such a feature varies from project to project as every merchant uses different ERP solutions, uses different stock management logic, provides data in a different format and so on.

7. Extensions – 5% of the project

Choosing the right third-party extensions can save us some development time and, consequently, also lower the cost of the project. However, since the quality of Magento 2 extensions isn’t as desirable as it was with Magento 1, we try to use as little 3^rd party extensions and dependencies as possible and to always check and make sure that the added extensions will not slow down the website.

8. Integrations – 25% of the project

The implementation of external systems are mostly very complicated, since every system and (in most cases) every customer has its own setup. However, when it’s done, it can have many benefits for the company and its workflow. In most cases, we at least carry out the ERP implementation, meaning that the web shop has daily refreshed prices and periodically synchronized stock.

For small e-commerce shops, we usually only integrate the ERP system, but for bigger projects the implementation of the PIM system is highly recommended.

Another big improvement for information management is the Product Information Management (PIM) system implementation (we use Pimcore and Akeneo). PIM allows you to centralize all the information about a certain product in one place. It gives you greater control over your data and also over all product and translation variants. It helps eliminate bottlenecks, creating rich and consistent data. There’s also a possibility of PIM supporting your other work processes, since it can hold more data than is needed for a webshop.

With these kinds of integrations, the client is highly involved in the planning phase in order to define what will work best for their current process flow. The client is also highly involved in the second, testing phase, where both sides need to perform certain tests to ensure that the custom part works as expected. This second phase is present throughout the entire lifecycle of the project so any potential bugs can be discovered as soon as possible.

An example of product data structure in Pimcore.

9. Project documentation – 5% of the project

We try to start writing down the project documentation from the very beginning of the project. It has proven to be the easiest solution from the point of view of developers to document their work as they go along, since their mind is focused on the problem at hand. Finishing a development of a feature and then writing numerous pages of documentation at the end is something nobody wants to do – especially not a developer.

We also write down detailed guidelines for the client, for them to understand the custom functionalities of their project. Things, such as custom configuration, custom CMS blocks, pages, variables, etc., are all well documented. This has proven to vastly reduce the amount of incoming support tickets in the initial phase after the project handover.

10. Testing – 10% of the project

The final, testing phase consists of two parts. First, we try to eliminate most of the frontend bugs that are still present. We have a QA team that tests the website on different devices, different OS and browsers. For bug reporting we use Bugherd and custom QA scripts.

In the testing phase we encourage the client to test the frontend on their own as much as possible. It’s very useful to get the client’s feedback, bug reports and to have some additional tests on the clients’ devices. It is also advisable to gather ideas about any possible future improvements already in this phase and try to implement them later on.

In addition, we have 4 checklists that are also sent to the client at the end of the project. With these checklists we try to cover all the important aspects of the webpage. They are divided into:

frontend performance
marketing
SEO
launch

Sample breakdown of effort for a standard and a complex project.

This was a short summary of the ten standard phases that we use in our Magento development and that are needed for a successful launch of an e-commerce store. After the initial launch, we of course constantly test, optimize and develop new features.

This blog post also comes with a second part in which we breakdown the budgets and timelines for standard projects. However, if you’re already bursting with questions or project ideas, contact us; we’ll be more than happy to help.

Anže Harej

You won’t find Anže in our offices anymore, but we know that no matter where he is now, he is doing a phenomenal job. We’ve kept a piece of them with us as a memory. :)