top of page
pexels-anniroenkae-3435249.jpg
IFF Basic Alerts (1).jpg

IFF Design System

The beginning and end of a design system that never was.

Key Requirements

  • Must use existing brand colors

​​

  • Must use free Google fonts

​​​​

  • Must unify all IFF internal programs for one look and feel, but with enough flexibility to create slight variations for different departments

Proposed Solution

  • Create a design system using the Atomic Design method, Bootstrap-based components, and the existing IFF brand

​​

  • Base spacing on the 12-column grid system

​​

  • Everything would be responsive, not for tablet or phone, but to accommodate various monitor sizes throughout the company 

​ 

  • Collaborate with the development team to create “plug and play” components to reduce development effort

Indended Results

  • Consistent use of look and feel for all internal programs

​​

  • Reduce time from conception to development to launch

​​

  • One point of truth for design and development

International Flavors and Fragrances, commonly known as IFF, has been operating for 120 years. It specializes in creating flavors for various foods and beverages and fragrances for products ranging from dish detergent to perfume. The company is divided into two main divisions: flavors and fragrances. Each division is further organized into various departments, including marketing, research and development, shipping, and more.

​

Due to the extensive volume of product and project movement throughout the company and around the world, IFF has developed several internal dashboards. These dashboards were created by both internal teams and external design and development partners.

 

However, over time, the seven dashboards, designed at different times by different teams, became increasingly inconsistent in appearance. Additionally, each time a new dashboard was created or an existing one was modified, developers wrote new code, which significantly extended the time from concept to launch. There was little archiving of the process of how the experience came to be built, data, research, or design files - thus creating a massive knowledge gap as well as design and tech debt. Essentially, it was like starting all over again.

IFF Color palette (1).jpg

Just some of the colors with updated tints and shades.

This is where I come into the picture. Having created and developed the internal dashboards, the IT department concluded that they wanted to create an IFF Design System. The company had just undergone a rebrand, and they felt it was the right time to establish a global set of standards for all dashboards.

 

I could elaborate on how I arrived at this point with the system, but I want to emphasize that developing a design system is not an easy task. It requires collaboration between UX/UI designers, developers, and the business side. If one part of this group is not on board with the idea, the entire initiative can collapse. Additionally, creating a design system is not a sprint; it demands significant initial effort along with ongoing updates, auditing, and revisions. It should be treated like any other project, and regarded as a product—in fact, it’s the product that will influence everything that follows it.

 

When executed correctly, a design system becomes a powerful tool in the team's arsenal. It enables designers to rapidly create mockups and prototypes, and in some instances, allows the development team to implement updates with minimal input from the designers. However, IFF was not fully prepared to take on this task, and what you see here is the result of extensive planning and consideration before any design work began.

This is where I come into the picture. After developing the internal dashboards, the IT department decided to create an IFF Design System. The company had recently undergone a rebranding and felt it was the right time to establish a global set of standards for all dashboards.

 

While the rebranding was well thought out, it wasn't quite ready for dashboard development. The company had a wide array of colors (one for each division) but lacked ADA-compliant colors for success, warning, and error messaging. Additionally, many of the brand colors, although vibrant, were not compliant. There was no standard font usage, as they were reluctant to invest in a paid font. The overall feel of the experiences was inconsistent—some appeared more "playful," while others took on a more "utilitarian" tone.

 

To address these issues, I began working with the colors, creating tints and shades to add depth and expand the color palette. I also selected fonts, as these were key elements in starting the design system. However, I did not have the opportunity to help IFF determine the overall look and feel—whether it should be more playful, more utilitarian, or crisp—which resulted in the variety of text field designs shown here.

 

I was preparing to pitch the visuals in hopes of determining a successful path forward, but ultimately, there was no consensus among the business units. As a result, both the design system and my time with IFF came to an end.

 

It was the early stages of developing a design system. Unfortunately, I was not with IFF long enough to see the system evolve. I was looking forward to it, as it would have been my first experience dealing with different divisions using almost distinct branding. I can confidently say that this was a solid start to what could have been a powerful, complete, and flexible design system.

 

Thank you for reading.​

 

bottom of page