Empowering creative minds to build and express authentic brands, Monotype provides design assets, technology and expertise to help create impactful brands that customers engage with and value.

Monotype has been empowering the world’s leading brands like L’Oreal, American Airlines, Unilever, among others. With a library of over 10,000, it consists of some of the most famous and widely used fonts, like the Helvetica, Univers, Frutiger typeface families, as well as new and innovative fonts such as Posterama and Masqualero. 

The client was in an urgent need of eliminating its legacy system and rebuild its site, Monotype.com, to bring the same experience and creative expression it helps enterprises with. Their legacy system was plagued with poorly managed CMS with editorial features that required frequent technical intervention. Further, the lack of performance optimization capability hit the user experience hard.

We helped them foster organic traffic better, achieve a 600 times faster website, as well as build a future-ready website. Outside the scope of the project, Monotype.com was made future-ready by leveraging application programming interface to disseminate the content among its sister brands, if and when the need arises.

monotype srijan case study drupal
Why Drupal was chosen: 

Drupal 8 was chosen because the client goals for an enhanced digital experience matched well with its capabilities. The client was looking for:

  • A low code interface for the non-developers so teams could create pages on the fly even for unstructured content types. 
  • Multilingual capability 
  • Out-of-the-box improved website performance
  • Drupal’s ability to scale the support to content-rich sites
Describe the project (goals, requirements and outcome): 

Goal 

The key goals of the project were: 

  1. Improve digital experience primarily focussing on site speed and user/ admin experience
  2. Make content available on multiple languages 
  3. Improve on-page SEO to increase organic traffic 
  4. With a frictionless migration 

Challenges and Requirements
 

  • Poor editorial experience with dependence on IT teams

The underlying legacy system restrained teams from pushing out even menial tasks ranging from notification on the site to publishing content independently. The new layout builder was chosen to accelerate the turnaround time as well as empowering them to customize the layout of even unstructured pages thereby removing the dependency on IT teams. This was complemented with the use of profile-based architecture which made the platform completely reusable, thereby reducing the development cost significantly and delivering optimum results.
 

  • Performance - First website interaction as slow as 12 seconds

Monotype.com is a multimedia-rich site, however, the heavy images and mismanaged content added to the load time of the website making it 12 to 15 seconds especially on mobile. Given this, the SEO score of the site dipped down terribly, impacting adversely the user engagement, organic traffic, and SERP. Identifying and leveraging Drupal modules was crucial to bring out low-latency delivery and achieve desired numbers. 

Implemented a proper caching strategy on the application layer, i.e., Drupal. While Drupal has many modules to improve performance, its bootstrap caching consumes more than the accepted time. Modules like Varnish and Cache were deployed to cache content directly from it, thus reducing speed and performance.
 

  • Manual translation 

The translation process was carried out manually with the involvement of several teams, resulting in late deliverables. The time-to-market deteriorated, sunk the overall site performance, and influenced negatively the digital user experience. Out-of-the-box multilingual capabilities were also put to action for faster turnaround time.
 

  • Content duplicacy and SEO 

Distributed teams led to scattered content with poor workflow. Instead of using one blog on various platforms and websites, different blogs were created. A persistent problem which leads to content duplicacy and bad SEO score, this was solved with a centralized content management system. Further, best practices were followed with HTML structure to avoid penalization. 

Outcomes

Outcomes

Due to an Adobe event around the time of decided launch, the project had to be launched one month in advance. Stable and successful, post live following were achieved: 

  • Improved editorial capabilities
  • Dropped the site speed by 600 times from 12 seconds to 2 
  • Lighthouse score above 85, with accessibility score as 85 and SEO above 90
     

Over and Above

  • Outside the scope of the project, we followed a future-ready approach by leveraging application programming interface architecture to disseminate the content for future integration with its sister brands encompassing Mosaic, Olapic, and My Fonts. 
  • Providing Drupal training to the client’s team to help them keep their site up and running. The content team was also educated on how to leverage Drupal for marketing purposes alongside providing training material.

Technical specifications

Drupal version: 
Drupal 8.x
Community contributions: 

The client website is a multimedia-rich, which made the site slow. Other than Drupal's out-of-the-box image optimization features, these modules provided complementary image formatter and breakpoint mappings to deliver responsive images using the HTML 5 picture tag.

Modules like ImageMagick and WebP helped to convert/support gif with image style, along with extra image formats like TIFF and reduce image size by up to 50% something that GD2 is incapable of. 

Organizations involved: 
Sectors: 
Enterprise
Publishing