Design and build of a new Magento 2 ecommerce website to replace an existing Magento 1 site whilst migrating all products and customer data.
Puravent, a well-established online business selling air treatment products and systems, came to us wanting to migrate their old Magento ecommerce site to the latest Magento 2 platform due to Magento 1 no longer being supported.
With Magento 2 being a completely different system, this would involve a full ecommerce build recreating all the existing functionality, but with a complete design overhaul and the implementation of additional features.
The old website had over 30,000 products and many years worth of customer data and orders – all of which would need to be migrated seamlessly to the new site.
Design and UX
A project kick-off meeting was held with the client, our technical lead and our head of design. We went through all aspects of the website in detail including existing functionality that needed to be implemented along with all the new features and how they would work.
We wanted to fully understand the business and what it offered its customers in order to come up with a fresh design that was easy to use and navigate.
With there being over 30,000 products spread across hundreds of categories – along with a very comprehensive resource blog covering all aspects of air treatment – we started with looking at the site structure and coming up with a new sitemap.
After this, we wireframed the site, planning the whole user journey and defining how all features, such as the calculator tools, would function.
Over a number of design meetings the user journey was finalised and a full design was created in Adobe XD. Particular attention was given to the main navigation and the user journey through the sub-categories.
The site was ultimately given a complete design refresh, but was in keeping with the Puravent branding.
Once the design was fully signed off and approved, the build phase of the project started. The spec included advanced Magento as well as bespoke functionality. Some of the key features of the site were:
- Products with tiered pricing
- Enquire for price feature for products with a hidden price
- Customer enquiry including a trade enquiry form
- Product comparison
- Supplier PDFs such as manuals added to products
- Custom Puravent branding to be dynamically injected into these supplier PDFs
- Calculators for various heating, ventilating and air conditioning applications
- Blog containing Insights and Videos
- Ability to save PDFs of product pages and blog posts
- Custom CSV import/export for bulk editing thousands of products at a time
As Puravent was replacing an existing Magento website, we had to migrate data from the old site to the new site including all products and categories, customer data and all historical order information.
Because products on the new site had additional functionality, a custom script had to be written to carry out the migration.
Testing and QA
With the development complete and the site fully populated, full testing was carried out. This included cross-browser and functionality testing
This involved the wider Pixel Kicks team using the site as both an admin and customer on a variety of devices.
This would ensure the site worked and looked as expected on all browsers and was fully functional on all devices including mobile.
Test transactions using the Handepay and PayPal payment gateways as well as proforma payments were made.
All the back-end functionality including bulk editing of products and CSV imports was also tested.
As some time had passed since the initial migration, once a go-live date was agreed upon, we would have to run our various migration scripts again to make sure all the latest product customer and order data was moved across.
On the day of go-live, before office hours (in order to minimise disruption with customers ordering) the live site was taken down and a maintenance page was put in its place.
This would ensure that no data on the live site would change as no orders could be placed.
At this point, we re-migrated everything so the Magento 2 site was fully up to date. We then worked through our go-live checklist which included creating 301 redirects.
Redirects were put in place as the Magento 2 site had an updated URL structure which was more SEO-friendly. So, a user attempting to view a product on the Magento 1 site, would automatically be redirected to the correct URL on the Magento 2 site.
After some extensive testing, the DNS was updated and the maintenance page taken down making the new site live!
As soon as the site launched, we offered full support and maintenance service to make sure everything was running smoothly.
We have since moved on to a Phase 2 for the Puravent project and are working with the client to add additional functionality to the site and to improve things further, refining the whole user experience even more.
Tasks in the pipeline include updating the main navigation and building additional calculators with extended functionality.
We are also working on a digital marketing campaign with Puravent with the aim of driving more visitors to the site.
VIEW THE SITE