Skip to content
Back
+

Coupa | Delivering features 50% faster with MUI components

Coupa logo

Overview

Coupa Software is a cloud-based spend management platform that helps businesses streamline procurement, invoicing, expense management, and supplier management. They needed to modernize their frontend components to meet strict deadlines for a new mid-market product. They selected MUI to replace their outdated in-house component library, leveraging MUI's comprehensive ecosystem and advanced components.

We had very strict and aggressive deadlines, and we were able to meet them. If we had done it using our own components, it probably would have been at least six to eight months over the deadline. So, with MUI we got 50% faster. But when you put that on a longer horizon, I think that number is bigger because of [the benefits when tackling] maintenance, and shifting paradigms and business needs.
– Ali Sipahi, Engineering Manager
We had very strict and aggressive deadlines, and we were able to meet them. If we had done it using our own components, it probably would have been at least six to eight months over the deadline. So, with MUI we got 50% faster. But when you put that on a longer horizon, I think that number is bigger because of [the benefits when tackling] maintenance, and shifting paradigms and business needs.
– Ali Sipahi, Engineering Manager

Challenge

Coupa was struggling with a twelve year old in-house component library that was:

  • built on React 17 but difficult to maintain and update
  • lacking a unified design system
  • limited in component offerings
  • difficult to scale as it was built specifically for one application
  • marred by inconsistent component nomenclature

As Ali explained, it was built over a long period of time and without a complete plan, so some things were difficult to update and maintain. It didn't have a design system behind it, which made it difficult to create a unified appearance.

Solution

After researching various options, Coupa implemented MUI with a focus on:

  • Creating custom theme to match their existing design system
  • Integrating MUI components within a greenfield application
  • Expanding usage from core components to MUI X advanced components (Date Picker and Charts)

Results

After integrating MUI X, Coupa managed to meet an aggressive one-year product delivery deadline resulting in a 50% faster time to market. They significantly enhanced the UX with a unified, modern interface. They also increased the platform production quality with reduced P0 and P1 bugs. Recently, they also integrated MUI X Charts in a new AI chatbot feature:

Developer experience

The switch to MUI dramatically improved the developer workflow as the consistent component APIs made implementation timelines predictable. The MUI component structure and the comprehensive documentation reduced the learning time and simplified onboarding for new team members. It also reduced friction between design and development teams.

I think our biggest advantage with using MUI is the maturity of the product. Beyond a dedicated team that offers enterprise level support, there's a big community around it. It's easy to find resources. While some of the newer libraries might do some shiny new things, their reliability and the future is always questionable. - Ali
I think our biggest advantage with using MUI is the maturity of the product. Beyond a dedicated team that offers enterprise level support, there's a big community around it. It's easy to find resources. While some of the newer libraries might do some shiny new things, their reliability and the future is always questionable. - Ali