Skip to main content

Vanico-Maronyx

Commercial
2022-2023
Visit website

We recently had the opportunity to collaborate with Vanico-Maronyx, a manufacturer of high-quality bathroom furniture and sanitary products. The project presented a significant challenge: organizing a complex structure of customized products.

By mapping out the relationships and creating a hierarchical content structure, we successfully tackled the task of structuring this extensive collection of products, models, materials, and options.

To enable efficient management of this content, we implemented Craft CMS. We also developed several advanced features, including a color selector, an interactive map of dealers, and advanced documentation.

Through careful planning and meticulous execution, we transformed the project's complexity into a user-friendly and intuitive browsing experience, showcasing Vanico-Maronyx's commitment to quality.

Expertises

  • Content strategy
  • User flows
  • Web design
  • Development

Technologies

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

Features

  • Colors and Materials Selector
  • Interactive Dealers Map
  • Complex Product Structure
  • Advanced Documentation Search
Troisieme vanico home
Troisieme vanico home mob

Content Organization and Wireframes

In order to create a seamless and intuitive user experience, we invested significant effort in wireframing and organizing the content. We meticulously mapped out all the products and models, which served as a foundation for structuring the collections of content and creating the necessary CMS fields.

To enhance clarity and facilitate smooth navigation, we implemented a hierarchical structure that organizes the models within each product, the products within each collection, and the collections within each section. This logical hierarchy ensures that users can easily navigate through the website, intuitively finding the information they seek. The result is a well-organized and user-friendly website that optimizes the flow of information and enhances the overall user experience.

Troisieme vanico g sheet
Troisieme vanico wf home
Troisieme vanico wf misc

Design

We have developed a design system that embodies elegance and sophistication. With a chic and timeless aesthetic, the design showcases the company's commitment to quality. Every aspect of the design, from the color palette to the typography, has been carefully crafted to reflect the brand's high standards and attention to detail. The sleek and refined design enhances the visual appeal of the website and reaffirms Vanico-Maronyx's excellent reputation.

Troisieme vanico design system

Products Search and documentation

We implemented a product search functionality in the website's header, featuring auto-suggestions as users type. This feature enables users to quickly find specific products, enhancing search efficiency and usability.

The documentation section plays a crucial role in providing users with easy access to a wide range of resources. We developed a sophisticated documentation search system that retrieves relevant information from various fields in the CMS. This powerful search functionality allows users to quickly find the information they need, whether by category, collection, or product.

Troisieme vanico search
Troisieme vanico documentation

Navigation

The website features an intuitive and user-friendly navigation system. We created a four-section navigation with icons, allowing users to easily select the product section they want to explore. Additionally, we developed a mega-menu for content pages, organizing the content by sections for smoother navigation.

Troisieme vanico menu

Sections and collections

The website organizes the extensive range of products into distinct sections, ensuring a clear and organized presentation. Users can easily navigate through the various product sections and utilize filters to refine their search and find the collections that align with their preferences.

Additionally, dedicated collections pages showcase all the products within a specific collection, providing detailed information about their unique features, available options, and relevant documentation. This thoughtful approach enhances user experience and enables visitors to explore the comprehensive product offerings of Vanico-Maronyx with ease.

Troisieme vanico sections
Troisieme vanico sections mob
Troisieme vanico collections mob

Product Pages

The product pages showcase product images, available materials, and colors. They also display models, specifications, and options. A side-panel is available to provide users with additional technical information upon click.

Troisieme vanico products fiche
Troisieme vanico products mobile
Troisieme vanico products specs

Colors and Materials Selector

We developed a unique functionality that allows users to select materials for furniture and countertops from a collection. Users can choose different combinations and instantly see the results. Each combination has a dedicated URL for easy sharing.
Troisieme vanico selection couleurs 2
Troisieme vanico selection couleurs 1

Dealer Interactive Map

The website includes an interactive map where users can enter their postal code and find the nearest retailers. This feature utilizes Google's Distance Matrix API and provides users with a convenient way to locate retailers in their area. Contact information for each retailer is displayed when selected on the map or in the sidebar panel.

Troisieme vanico carte

Working with troisième allowed us to simplify the presentation of our wide product range, while evoking the refinement and elegance intended by our company. Throughout the process, we felt that the teams really had great ownership, delivering a modern web platform that sets the right standard for our future growth.

Charles-Antoine Gauvreau
General Manager

Content Pages

In addition to the product-related pages, we developed informative content pages about the company, services, buying guides, and more. These pages provide valuable information during the purchasing process.

Troisieme vanico pages about
Troisieme vanico pages misc 1
Troisieme vanico pages vision
Troisieme vanico pages misc 3

Performances

We prioritized website performance and utilized various tools to measure and optimize it. The website achieved exceptional scores across different performance metrics, scoring close to 100 on Google Page Insight.

Troisieme vanico 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