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
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.
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.
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.
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.
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.
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.
Colors and Materials Selector
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.
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.
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.