Sector(s)

Team Members

simonbaese, Mef, muschpusch, alvar0hurtad0

Visit the site

Visit the site

Organizations Involved

Community contributions

As a Drupal Certified Partner Gold and as a Premium Supporting Partner and Organisation Member of the Drupal Association, Factorial has been contributing to the global Drupal community since its foundation in 2015. By sponsoring and organising events (Splash Awards, DrupalCamp, Drupal User Groups, Drupal Developer Days & DrupalCons), sponsoring development time for our Drupal developers and submitting sessions, we actively invest in the further development of the framework and the community. As a member of Drupal Business e.V., we are also committed to promote Drupal in the DACH region. 

Several contributions were made as part of the Occhio project. A selection:

Sponsoring of the Gin administration theme used 
www.drupal.org/project/gin 

Publication of the developed Language-Country Negotiation module 
www.drupal.org/project/language_country_negotiation

Publication of the developed Tagify module 
www.drupal.org/project/tagify

Presentation at the Drupal Dev Days Vienna about the introduction of PHPStan in the course of the project
Watch full video on YouTube

Publication of several blog articles in which we share experience reports from the course of the project:
Simon Baese - Drupal event dispatcher explained: Practical example
Simon Baese - Deep dive language negotiation and path processing

Website Relaunch Occhio

Occhio stands for outstanding design, unique lighting quality and 'joy of use' at the highest level - and thus for a new culture of light. Founded in 1999, Occhio is today one of the most innovative and fastest-growing companies and has developed from a German design icon to an international lifestyle brand in the luxury segment. We at Factorial accompanied the relaunch of Occhio's German & English-language website. One focus of this relaunch was to improve and efficiently link as many touchpoints of the website as possible.

At Drupal Splash Awards Germany and Austria 2023 the 'Website Relaunch Occhio' project was awarded the Splash Award in the category of Enterprise International. Moreover, the project impressed the jury to such an extent that it received a total of 3 honourable mentions in addition to the award: Best Project Germany, Greatest Business Case and Best UX.

The jury commented on the project as follows:

'Concrete business metrics are clear evidence of the site's success. Impressively fast search and a discreetly understated design that flatters the products.'

Describe the project (goals, requirements and outcome)

Since 2017, Occhio, market leader for designer luminaires, and Factorial have been working together to bring the effect of light to life in digital space.

"The Occhio digital experience makes it highly desirable and elegantly simple to start and enjoy a life enriched by a new culture of light." - In line with this mission statement, it was an important step for us to jointly initiate the relaunch of the 2022 website and successfully implement it after only a few months of development.

Back to top

Goal

The focus was on holistic customer orientation and personalisation as part of an omnichannel approach. The aim was to create inspiring content and offer interactive functions in different languages. Another focus of the project was the Occhio Academy. This is a learning management system that is used to train Occhio's numerous sales partners on the products and thus provide them with the best possible support in their business.

Back to top

Our approach

In the backend, we developed and expanded the code base iteratively. This allowed us to migrate functions and content while the editors were able to integrate new content at the same time. In the frontend, we developed the system from scratch. Our frontend stack enabled us to fully utilise all modern native browser features and, as part of progressive enhancement, to develop features that are not only exceptionally performant but also semantically correct and accessible to all target groups - this is how we convey the uniform visual identity in every user journey.

Originally, the frontend and backend were "decoupled", separate systems. As part of the project, we linked them together, which facilitated and accelerated the integration of the systems.

Back to top

Outcome

The project objective of the relaunch was to increase the reach of the digital presence and expand the sales model, which had previously focussed on brick-and-mortar retail, into the digital space. As a result of the project, an impressive increase in website performance was achieved, leading to a 28% increase in online sales (average number of products/day compared to before launch) and a 64% increase in efficiency (manual steps vs. automated steps). These exceptional increases can also be attributed to the optimised, user-centric interface, which provides a state-of-the-art customer experience.

In addition to these KPIs, the following deliverables were also provided: 
- Product Data Flow
- Store finder
- Topic search
- Internationalisation and translation (multilingual setup)
- Partner portal
- Monitoring & quality control
- Empowerment of editors
- Provision of a standardised component library
- Server infrastructure

Product data flow: The configurator is crucial for experiencing the Occhio product world digitally and customising it perfectly to personal circumstances. It is used to create a seamless and personalised shopping experience and further increase the conversion rate. Product specifications are stored centrally and related content is assigned to product entities. Higher-level services provide product information such as prices, features, attributes and associated assets across the entire application. Product pages are created using templates, while technical detail pages and product lists are curated automatically. 

Storefinder: The Storefinder, which had already been created during an earlier project, was modernised and expanded with new functionalities as part of the relaunch. The comprehensive redesign of the Storefinder ensures a first-class, user-friendly and optimised Occhio experience, which greatly increases customer loyalty and retention.

Topic search: Using the latest technologies combined with our expertise, we have worked on redesigning the search. This creates an enhanced user experience that redefines the way users explore the culture of light and products.

Internationalisation and translation: The content of the website varies in different markets. International delivery is made possible via the Content Delivery Network, with translation management taking place directly via the CMS. Editors can request translations and deliver them after review. All changes can be tracked via a revision system.

Partner portal: The Occhio partner portal serves as a central platform for more than 1,000 employees, sales partners and experts to enable efficient collaboration. Partners can manage contracts, order products, shop accessories and samples, receive customer support and participate in campaigns. Media content can also be used for marketing and advertising purposes via an image portal.

Quality assurance & monitoring: In addition to our automated test suite, user acceptance testing ensures that all features released as part of the continuous delivery process are as high quality and secure as the product itself. This helps to protect brand reputation. Monitoring and visualising SEO metrics helps us to continuously improve overall performance by providing clear insights into high-impact areas for improvement.

Empowerment of editors: Creating aesthetic pages using a modular system that simplifies content creation and offers numerous styling and behaviour options.

Providing a unified component library: Typography, colour and basic UI components are the foundation of the design. The comprehensive, flexible design system is the basis for further design development and brand consistency. 

Server infrastructure: The entire server landscape and CI/CD were revised as part of the project. The project runs on a Kubernetes cluster hosted in the cloud. Delivery takes place via a CDN to ensure perfect response times. Redis caching was also introduced and the pipelines were expanded through extensive testing with unit tests, linting, static analysis and visual regression tests.

Back to top
Why Drupal was chosen

After working with Drupal for several years, Occhio didn't hesitate to continue its success story with Drupal, trusting in Drupal's ability to manage complex digital ecosystems. Using Drupal, Occhio's digital business has visibly grown since implementation and features state-of-the-art customer interactions, demonstrating once again the high scalability that can be achieved with Drupal.

In addition, Drupal's strength in terms of interfaces and seamless integration of third-party systems comes into play in this project, helping Occhio to leverage data across multiple systems to maximise the customer experience for their target audience. The Drupal-centred, coupled architecture enables exceptional performance that significantly improves the user experience. 

The project also demonstrates the success of a long-term and targeted collaboration, where Drupal's competences are incorporated into the strategic considerations for the company's digital development. Finally, the project proves a strong selling point for the use of Drupal in SMEs and digital transformation projects through its implementation of Drupal as the core solution of the digital ecosystem.

Technical Specifications

Drupal version:

Why these modules/theme/distribution were chosen

As part of this project, over 200 Drupal modules were used. Here is a selection of the key modules: 

Commerce
The Commerce module and its submodules make it easy to develop and manage e-commerce sites on the Drupal platform. It provides essential functions such as the management of products, their variations and prices.

Search API & Search API Algolia
Combination of Search API and Search API Algolia modules allows integration between Drupal and Algolia platform. Content is indexed by Drupal and stored on Algolia's cloud-based search-as-a-service platform. This collaboration provides the benefits of Algolia Search's advanced search functionality.

Fastly & Purge
The Fastly and Purge modules optimise content delivery and cache management. Fastly acts as a content delivery network (CDN), accelerating global content distribution through effective caching. The Purge module complements Fastly by allowing Drupal to systematically trigger cache purges, ensuring real-time updates across the CDN. This integration adheres to best practices, improving site performance and responsiveness and maintaining consistency in the delivery of dynamic content.

Paragraphs
A lot of modules were used for improving editorial experience such as:

  • The Paragraphs module. This was used in the project to improve the flexibility of content creation and layout. It provides a modular and flexible approach to building pages by allowing content creators to assemble and organise content in a visually appealing way.
  • Paragraph Library, which provides a library for reusing paragraphs.
  • Paragraph Browser, which provides the widget that displays a browser in a modal where paragraph types are grouped by user-defined categories and optional description and image fields are provided for the browser display.
  • Page Templates, which allows a node to be converted to a "template" and then used to generate content from a predefined set of values.

RabbitMQ
The RabbitMQ Drupal Module provides an integration that allows Drupal to use the RabbitMQ message broker system. This module facilitates asynchronous communication and event-driven architecture, increasing scalability and performance in complex Drupal applications by decoupling processes and improving real-time data exchange. The RabbitMQ module was used to integrate between Drupal and CRM to store and update Occhio Stores entities.

Gin Admin Theme
The Gin Admin Theme is an administrative theme designed to optimise the user experience for site administrators and content moderators. The theme enhances the accessibility and efficiency of Drupal's backend administrative interface and user-friendly content management, making it an ideal choice for the project.

Components
The theme is based on a component library maintained outside the project. Using the Components module, we were able to consume it by declaring proper namespaces and using composer to manage the library. This helps to get updates through composer without having to commit the component library to the project.