Web design and development>Digital Project Management
Web design & WordPress Website – Engels

Case

Web design & WordPress Website – Engels

In addition to an already successful online marketing partnership, Engels also entrusted our WordPress experts with the complete rebuild of their website.

The Client: Engels Windows and Doors

Engels is a well-known provider of refined window and door solutions in wood, aluminum, and PVC. They focus above all on quality and aesthetics!

The family business, which has been run by the third generation since 2007, is celebrating its 75th anniversary this year. The Engels Group currently employs around 175 people and consists of two production facilities (wood in Lokeren and aluminum in Eeklo), a project market division, a private label department, and a network of 12 Engels stores.

Already a Successful Online Marketing Partnership

After a 7-year collaboration with the previous digital agency, window and door manufacturer Engels chose Hybrid as their new partner for revenue-driven marketing and lead generation in early 2020. They had clear ambitions: to achieve overall growth of +20%.

This challenge was only amplified when Covid broke out shortly after Batibouw (and just after our launch). In an industry that relies on physical sales and showroom visits, we had to rapidly digitalize this traditional process due to lockdowns and restrictive measures.

Despite this additional challenge, we were able to nearly double the number of high-quality leads accepted by sales in just one year, all while halving the cost per lead compared to 2019. Twice as many leads for half the budget! You can read the details of our approach and the resulting outcomes in-depth here.

After this first successful phase of our partnership, we realized that for further scaling, it was necessary to overhaul the existing website. With A/B testing and SEO optimization, we had maximized the potential of the current setup. Visually, further adjustments were impossible. Engels then decided to entrust our team with the task of completely revamping the website. For us, this was a great opportunity to strengthen the partnership and further maximize the set goals!

The challenges

#1 Maintaining Already Achieved Results

The first challenge was to build a website based on the learnings and achievements of the past year. The successes already achieved and the set target could not be compromised.

Now… we are Hybrid, and for us, it’s not about maintaining the status quo! By implementing best practices, we aim to achieve even better results over time!

#2 Optimizing SEO and Retaining Authority

The second challenge was to optimize various SEO aspects. With the beautiful photos from Engels, the old website quickly ran into limitations regarding load times and mobile friendliness.

Additionally, it was crucial to maintain the authority that had already been built at the domain level, as well as for specific individual pages such as local store pages and product categories like “wooden windows” and “aluminum windows.”

Finally, it was also a great opportunity to realign the information architecture with the current reality. Are there pages for all relevant search terms? Is the user journey correct? Does every existing page still serve its purpose?

#3 Building a User-Friendly CMS

A third important aspect for the Engels team was optimizing the user-friendliness of the admin zone. The structure of the old website made it almost impossible to efficiently update texts and photos or create a new page. This aspect is crucial if you need a new landing page quickly!

#4 Rebranding: Combining Elegance, Quality, and Simplicity

Lastly, there was the challenge of a small rebranding for Engels. The team at Engels knew exactly what they wanted: to maintain the brand recognition of Engels, with elegance, quality, and simplicity at the core. A piece of cake for our design team, of course!

Our Approach

#1 The Pre-Study

In this phase, our project manager gathered all the necessary information to make the project a success.

Based on an initial intake meeting with the client, we started mapping out the expectations and requirements. We discussed topics such as:

  • What is the desired look and feel?
  • Should we use a purchased template or design a custom layout?
  • Should we go for an MVP and later develop additional pages, or should everything be ready immediately?
  • Which pages are still relevant, which need to be removed, and what is the impact?
  • What is the current web hosting situation?
  • What is the budget, and how can we align with it?

We also conducted an analysis of the existing website to fully understand the usability issues and technical challenges.

Based on this information, we worked with the marketing, development, and design teams to align on functionalities and pages.

We looked at the current structure of the website: how are the pages set up, how can you create new pages, how can you edit text blocks, and how can you create a new language version?

We also examined specific technical aspects:

  • What plugins are installed?
  • Is there compression for CSS, HTML, or images?
  • Is caching, CDN, or lazy loading being used?

All our advice and findings were compiled into a clear project sheet that formed the foundation for the entire project! This sheet includes the general project description, user stories, mock-ups, as well as the budget and time estimates for each phase of the project.

Based on the feedback and available budget, the project plan was finalized, and the kick-off was scheduled!

Case - Engels
lossy=1&strip=1&webp=1

#2 Kick-off and Project Tracking

During this kick-off meeting, we went over the entire project, covering tasks, responsibilities, and the proposed timeline.

The project manager at Engels was given access to our project management tool, Click-Up. This provided an overview of the entire process, making it easier to manage tasks and deadlines.

Weekly status meetings were scheduled to stay on track and optimize the collaboration between the different teams involved.

Case - Engels
Case - Engels

#3 User Experience (UX) and User Interface Webdesign (UI)

For the most critical pages, we mapped out the structure and UX through wireframes. This included the learnings and improvements from our marketing team, ensuring that everyone was aligned from the start.

In UX design, the focus is on sketching the future website to get a clear idea of how visitors will navigate through the site. During this phase, we assess which flows and content (texts, images) are needed to guide the visitor as effectively as possible toward a sale or conversion.

Case - Engels

Once all propositions, flows, and functionalities were clear, we moved on to the design of the website.

Based on the brand guidelines, provided examples of brochures, and existing inspiring websites, an initial prototype with the new colors and typography was created. The UI elements and some prototypes were graphically designed in Invision, of course for both Mobile and Desktop.

Case - Engels
Case - Engels

#4 Content Implementation

For each web page, the right content is of course essential (copy, images, video, etc.). This is crucial for both the website’s findability and for an optimal user experience, which in turn drives conversion of visitors.

In consultation with Engels and the marketing team, it was decided to take most of the text and images from the old website. The marketing team had already optimized a large portion of the text and further supplemented it with significant keywords.

For the entirely new pages, we wrote new SEO-optimized content, including meta titles and meta descriptions.

Additionally, all new photos from Engels were optimized for size and weight using the appropriate plugins, and we ensured that this would be the standard process when uploading new photos to the website.

#5 Building the WordPress Website

After all pages were validated by Engels in the design phase, our WordPress experts got to work!

A key feature for Engels was to make it as efficient as possible to find, edit, and update existing pages with new content blocks.

To maintain optimal load times, we decided to create a custom page builder rather than using WordPress extensions. These are known for generating ugly and frequent HTML code and are often not user-friendly for those with limited knowledge of layout building.

The most important lead-generating tools were also fully custom-developed: the budget calculator and the style guide were essential. These tools can now be managed and adjusted according to desired results via the admin zone.

Additionally, we installed some key plugins:

  • Plugins that improve speed such as lazy loading, caching, and compression of HTML, CSS, and JavaScript.
  • We limited the number of MB that can be uploaded per photo, and new photos are automatically resized and compressed.
  • Yoast
  • Redirect plugin
Case - Engels
Case - Engels
Case - Engels

#6 Project Follow-up and Validation

Every week, we met with Engels to discuss progress and implement any necessary adjustments. Engels was also given access to a test environment so they could go through the entire website and validate each page themselves.

Not only the team from Engels was involved in the validation, but also everyone from the internal Hybrid team reviewed the first version of the project to verify the delivery.

#7 Final Quality Control

Before the go-live, we perform a technical quality control. In this phase, aspects such as load speed, compression, browser compatibility, broken links, etc., were reviewed with a focus on further website optimization.

Below are some of the results from tools such as SEO optimizer and Chrome Lighthouse tool

Case - Engels
Case - Engels

For a complete list of all the to-dos that we go over and execute, you can download our checklist via the link below:

Website Delivery Checklist

#8 Online Marketing

There was still work left for our marketing team as well. Based on the test environment, they set up the tracking for the new website in Google Tag Manager, adjusted the dashboards, and reviewed the impact on the ongoing ads to quickly react after the go-live.

It was also decided to gradually switch to the new layout for, among others, the quote page and roll it out via an A/B test.

Finally, using Google Search Console and AHREFS backlinks, all indexed pages were mapped to create a full redirect plan.

Case - Engels

#9 Go-Live and Follow-up

After the full validation by the team and receiving a unanimous approval from Engels, the go-live date for Engels was set.

After the go-live, the website was closely monitored by our team via Analytics, Search Console, and AHREFS.

Following the successful go-live, we concluded with a final feedback & sign-off meeting to gather feedback on the course of the project and evaluate our collaboration.

The results

In October 2021, the website was officially launched. What can we conclude?

#1 Organic Search Results

Looking at the organic search results in Google Search Console, we can see that the website’s position gradually improved in the first two months of 2022 compared to the two months prior to the launch. Additionally, there was a slight increase in the average CTR during the same period.

Conclusion: The launch had no negative impact on the existing ranking.

Therefore, the launch did not have a negative impact on the ranking. We remained stable throughout this period.

Case - Engels

#2 Evolution of Organic Search Terms Top 10 and Top 3

When we look at the evolution of organic search terms within the top 10 and top 3, we can clearly see the impact of the new website, with terms doubling or even tripling in rank!

Case - Engels

#3 Impact on Conversions

For Engels, it was crucial to maintain or improve the conversion rate on the website.

We can see a significant increase in the conversion rate for “Make an Appointment” among other areas.

Case - Engels
Case - Engels

Additionally, we also defined a new MQL “Download Brochure,” which is clearly generating interest and will contribute to increasing the conversion rate over time.

Case - Engels

Conclusion

We can speak of a successful launch!

#1 Maintain existing positions ✅
#2 Optimize SEO ✅
Faster site + more rankings in top 3 and top 10 keywords since launch.

#3 User-friendly CMS ✅
Ensuring that we can quickly respond to a changing market in the future and create the necessary pages and associated content according to new objectives.

#4 Rebranding ✅

Shout-out for the successful collaboration!

Case - Engels
Hybrid Agency Team

Performance Audit

Looking for higher online performance?

Curious if you’re currently maximizing the results of your online efforts? Let our experts review your entire digital approach and discover how you can generate more leads or sales with the same budget.

Frequently Asked Questions

How can Hybrid help me?

Hybrid connects the right people to your digital projects. Thanks to our unique approach, our clients can stay agile, within their resources, and achieve maximum results.

What services does an online marketing agency provide?

Hybrid helps in various ways: we create a digital strategy tailored to your goals, drive traffic and conversions, visualize and analyze data, and build websites that truly work.

How does the SME e-wallet work for online marketing advice?

Hybrid is a registered service provider for the SME e-wallet. This means that SMEs can claim up to 30% reimbursement on the costs of online marketing and digital strategy advice.