VEI Contracting is a remediation and dewatering company that provides a wide range of environmental engineering services across Canada and internationally. W Design Co., VEI’s digital partner, created their first website many years ago while the company was rapidly growing. Over time, the website accumulated a large number of new service and content pages, which slowed the site and resulted in a poorer experience for both visitors and content editors.

In 2024 VEI began a soft rebrand to better reflect their expanded services. After consulting with W Design Co., the team decided a full website overhaul would support the rebrand and strengthen VEI’s industry presence, since many prospective clients engage with their website content.

As a UX/UI designer at W Design Co., I led this 6-month project and ensured the result met both the business and technical expectations of VEI’s team. To achieve this, I collaborated closely with VEI’s project managers, our partner developers at Meta Studios, and other creatives at W Design Co.

VEI’s old website was built with WordPress and, without proper long-term support and information architecture planning, accumulated several issues over time:

Navigation made it difficult to find specific content

The large number of pages slowed the website down, creating a poor experience for both visitors and content editors

Conflicts between plugins required constant fixes and maintenance

Adding new content was complex and time-consuming due to the limitations of the visual page builder

To address the issues with VEI’s existing website, we defined several goals for redesign. The new website needed to provide:

Clear and scalable navigation

A robust yet familiar content management system

Improved website performance including speed, accessibility, and SEO

Reduced long-term maintenance and upkeep

The biggest UX challenge in this project was information architecture.

After receiving an updated content map from VEI’s project managers, our team was overwhelmed by the scale of the site. To make sense of the structure, I reorganized the content into a visual sitemap that clearly showed the relationships between pages.

This sitemap became an essential tool for the project. It helped stakeholders understand the structure of the website and was later used to build the navigation, track progress, and manage updates throughout development.

> Page templates

To make execution more manageable, I divided pages into two categories based on their content type: unique and templated. Some pages required a tailored approach, while most service pages shared enough similarities to be built from interchangeable components.

This approach significantly reduced the time required during both design and development while also improving the experience for content editors providing them with a set of pre-configured building blocks.

> Navigation

For the main navigation bar, I implemented a mega menu structure to provide clearer visual organization and support future growth. I also introduced site-wide search and page tagging, allowing users to reach specific content faster and reduce the number of clicks needed to navigate the site.

> Dynamic content

A significant portion of VEI’s traffic comes from content marketing such as newsletters, blogs, and case studies. Because of this, it was important to improve the experience for both readers and editors.

Blog pages were redesigned with a templated structure that included quick navigation links, social sharing options, and a “back to top” feature for long articles.

For content management, we implemented Payload CMS. The system is familiar, easy to use, and provides flexible building blocks that give editors full control over their pages. Its simplicity paired with NextJS performance reduced the time required to add or edit content by nearly half.

> Development Hand-off

Our partners at Meta Studios handled development and implementation. To support a smooth hand-off, I prepared a lightweight style guide, organized reusable components and templates, and adapted the designs for mobile devices.

After implementation, I conducted multiple rounds of QA to ensure consistency between the Figma designs and the live website.

After launching the redesigned website, VEI saw a 42 percent increase in overall performance along with faster loading times and improved SEO scores.

Within the first week after launch, VEI’s team highlighted the clarity of the new navigation, the convenience of the search feature, and how much easier it was to add new content. The improved content management experience began saving their team time immediately.

They even used the new website during an in-person meeting with a large prospective client to showcase their services.