Dairy Farmers of America needed a unique, supplementary website without straying too far from their design system. We found ways to reimagine the use of color, components, and iconography to create a distinctly different experience.
When Dairy Farmers of America updated their primary B2C website, they created a detailed design system to inform their look going forward. Their B2B offering, DFA Ingredients, needing an upgrade too, but it needed to be distinctly different from the primary site while using components that were already designed.
A major distinction we made from the primary site was application of color. DFA proper made heavy use of a dark blue that originated from their word mark. We lightened it up and brought in a secondary palette to designate different sections of the site. Each color was also selected to pass AAA accessibility standards.
While most components were already designed for the primary site, we needed to use them in new ways to accommodate the secondary site's features. Above is an example of a more expansive, editable, filtering function that combined some pre-existing components. By re-using these elements, we were able to save development time and avoid introducing unfamiliar interactions to our users.
A small distinction with big impact was the use of iconography. While it was a part of the DFA design system, it was rarely used beyond print materials. We found a way to incorporate it seamlessly into the new website, then created several new icons that make DFA ingredients a unique, but branded experience.
