Tresco Lighting
User-Friendly Lighting Configurator for Simplified Product Selection and Enhanced CX
About Project
Since 1989, Tresco® has continually exceeded market expectations by providing innovative, high-quality, and affordable lighting solutions. Their in-house designs and patented products reflect over 30 years of expertise, demonstrating their commitment to “Innovation Through Illumination.”
Tresco Lighting Configurator
BusinessNorth America
Location
Pioneers in the industry, they launched North America’s first UL-listed under-cabinet track lighting system in 1992, paving the way for their sustained success in diverse sectors, including offices, hospitality, and kitchens.
Brief
We created the Product Configurator, a tool that guides users through multiple steps to specify their lighting needs. As users fill out each step, the configurator dynamically updates the available options based on their previous selections. Products are fetched in real-time, allowing users to either add items to their cart for purchase or download a PDF to buy from distributors. This platform seamlessly integrates with Tresco Lighting’s eCommerce site, which was developed on Adobe Commerce.
List of Services Offered
- Custom Product Configurator
- Real-Time Data Fetching
- Multi-Step Product Selection
- Adobe Commerce Integration
- PDF Download Option
Smart Lighting Configurator
Features
Step-Based Custom Solution for User Convenience
We developed a step-based custom solution using React JS, integrated with Adobe Commerce via a headless approach. This feature allows users to fill out and select specific details at each step, narrowing down products that match their lighting requirements. Each step guides them toward a final, compatible product list, simplifying decision-making. This modular approach enhances user engagement, reduces complexity, and ensures they select the most suitable products for their needs, creating a streamlined and efficient purchasing process tailored to individual preferences.
Seamless Product Sync Using GraphQL API
We implemented GraphQL API to sync the product configurator and Adobe Commerce seamlessly. This integration enables real-time data fetching, ensuring products are displayed instantly based on the user’s input. The system captures and processes data faster, making the configuration process smoother and more efficient. By leveraging GraphQL’s efficiency, the configurator offers users up-to-date product selections that match their specific requirements, enhancing the overall user experience and reducing lag between systems.
PDF Download and Email Trigger Functionality
We added a feature allowing users to download a PDF of their selected product configurations for offline purchases. An email containing the configuration details is also triggered to the respective distributor when this option is chosen. This feature ensures users have a selection record and allows distributors to process offline orders more efficiently. This dual functionality simplifies the purchasing process for customers and distributors, offering flexibility for online and offline transactions.
Distributor-Specific Product Display Based on Location
We enhanced the product configurator by adding an extra step that allows users to select specific distributors based on location. Once selected, only the products from the chosen distributor are displayed, ensuring accurate results for the user’s search criteria. This feature refines the product selection process, offering users more relevant options tailored to their geographical area and making purchasing from local distributors easier.
Enhanced Online-Offline Purchase Flexibility Integration
Our solution offers seamless flexibility for users to choose between online and offline purchasing methods. The system proceeds with the order process if a user opts to add products to the cart for online purchases. Alternatively, a PDF is generated and emailed to the distributor if they choose offline purchasing. This feature balances modern eCommerce convenience with traditional purchasing needs, catering to user preferences.
Headless Approach for Optimized System Performance
We adopted a headless architecture for the product configurator’s integration with Adobe Commerce. This approach decouples the front-end user experience from the back-end system, offering faster load times, a more responsive user interface, and the flexibility to integrate with other systems in the future. By following this method, we ensured smooth functionality and better performance for the user without being limited by the eCommerce platform’s constraints.
Technology Stack
Cloud
Adobe Commerce Cloud
Front-end Tech
Adobe Commerce Cloud
Back-end Tech
Adobe Commerce Cloud
Project Management Tool
Adobe Commerce Cloud
Similar Projects!
Develop an Adobe-based solution for your business!
Collaborate with us to create an Adobe-driven platform tailored for your company today!