Skip to main content

Williams

Industrial
2022-2023
Visit website

We had the opportunity to collaborate with Williams, a leading manufacturer of fences and railings. The web redesign project aimed to merge their two existing platforms into a single one, providing a streamlined user experience.

To meet their specific requirements, we utilized Craft Commerce. It is a powerful and flexible e-commerce management solution, tailor-made for large-scale and customized projects. We also implemented advanced features such as product variant management, inventory management, integration with their CRM Prextra, and a precise delivery cost calculator based on the distance from their warehouse.

This project, spanning several months, was a true success, delivering Williams a high-performing web platform equipped with technologies that meet the needs of their customers.

Expertises

  • User flows
  • Content strategy
  • Web design
  • E-commerce
  • Development

Technologies

  • Craft CMS
  • Tailwind CSS
  • JavaScript
  • Twig / PHP
  • AWS

Features

  • Shipping fee calculator
  • Integration with CRM Prextra
  • Product variant selector
  • Integration of reviews via an API
  • Marketing forms
  • Integration with Zapier
Troisieme aw pages home
Troisieme aw pages home duo

Content Organization and Wireframes

The first step involved conducting a thorough content audit of the two existing websites to consolidate them into a cohesive single website. This included identifying redundant content, removing outdated information, and optimizing the overall structure of the website. We ensured that the navigation was clear and intuitive, and the content was easily accessible. We created wireframes to plan the layout and structure of the website, ensuring a smooth and engaging user experience.

Troisieme aw wf home 2

Search and Navigation

We implemented a comprehensive navigation system with product categories to assist users in easily finding what they were looking for. This navigation was divided into the two main divisions of the company. Additionally, we included a search function that allows users to quickly find specific products on the website.

Troisieme aw menu products
Troisieme aw search

Products and Variant Selector

One of the advanced features of the project was a selector for different product variants. This involved creating a function that would allow customers to choose specific characteristics they desired for their fences or railings, and then display the corresponding variant and its cost based on those selections.

Troisieme aw products index mobile
Troisieme aw products filter
Troisieme aw products fiche
Troisieme aw products configurator

Product Reviews

We integrated Stamped.io reviews provided by the client directly into the website. To optimize performance, we loaded the reviews after the initial page load. Using their API, we were able to extract real-time reviews and seamlessly integrate them into the site. We developed a custom JavaScript function to ensure a seamless integration of the reviews into the user experience. This allows website visitors to benefit from authentic testimonials while shopping.

Troisieme aw reviews

Content Pages

We also created carefully crafted and well-designed content pages. We used Craft CMS for content management, enabling easy and efficient management of all the pages. Additionally, we included photos and videos of the company to enhance the visual experience for users. Finally, each page was optimized for SEO to improve its visibility and ranking on search engines.

Troisieme aw pages about
Troisieme aw pages mobile 1

The troisième team understood the complexity of the project very well and went above and beyond to achieve success. Their ability to tackle technical challenges, such as integrating real-time orders with our CRM, truly impressed us. Their work greatly simplified the purchasing process for our customers, resulting in increased satisfaction and a boost in our sales.

Dominic Williams
President and General Manager
Troisieme aw pages piscines
Troisieme aw pages mobile 3
Troisieme aw pages auto install
Troisieme aw pages mobile 2
Troisieme aw pages misc

Cart

When a user adds a product to the cart, a sliding panel appears from the right side of the screen. The panel displays the product name, specifications, price, and quantity. It also provides buttons to remove the product from the cart or continue shopping.

Furthermore, the cart has a feature that checks if the user has added posts to the cart when purchasing fences. If the user tries to proceed to checkout without adding posts, a message appears to prompt them to add posts before proceeding. This ensures that users do not accidentally forget to purchase a necessary product.

Troisieme aw cart
Troisieme aw cart slide

Distance-based Shipping Calculator

A key feature of the payment process was a delivery fee calculator that provided customers with an accurate estimate of shipping costs based on their location. This involved connecting to the Google Maps distance API to calculate the distance between the customer's address and the warehouse location, and then using data from the CMS to determine the shipping fees based on a set of predefined conditions.

Troisieme aw checkout shipping

Payment Process

The payment process is simple and efficient, guiding the user through a few steps to complete their purchase. Customers have the option to either create an account or checkout as a guest. The payment process includes a custom delivery fee calculator that calculates shipping costs based on the customer's address and the distance to their location. Customers can then choose from a variety of payment methods to finalize their purchase.

Troisieme aw checkout guest
Troisieme aw checkout address
Troisieme aw checkout confirmation

Performances

We utilized tools to analyze the performance of the website and identify areas for improvement. We examined metrics such as load time, bounce rate, and user engagement to ensure that the website was operating at its best. We made necessary modifications to the website to enhance its performance and provide a seamless user experience.

Troisieme aw performance

Let's collaborate!

troisième is a committed team ready to help you deploy your biggest digital projects. Let's work together to achieve your ideals.
Contact us