Design System

Cargill.com Design System

Cargill, a rapidly growing company, struggled with inconsistencies in their design and user experience across multiple products. They needed a design system to improve efficiency, maintain a cohesive brand identity, and streamline design and development processes.

Supply Chain

B2B

Dashboard

Transparency

Background

Cargill has a diverse product portfolio, with multiple teams working on various applications and platforms. Over time, they experienced issues with design inconsistency, slow design-to-development handoff, and increasing maintenance costs. To overcome these challenges, we decided to create a comprehensive design system.

Role

I was the sole designer of this design system where I was responsible for auditing the current .com experience, analyzing the communications team design guidelines, building the pattern libraries, components, and templates.

Objective

The primary objectives of building the design system were: Establish a consistent user experience across all products and platforms. Streamline the design and development process. Reduce design and development costs. Enhance collaboration and communication among design and development teams.

Process

Research and analysis: The project began with a thorough audit of existing design assets, style guides, and documentation. This helped identify inconsistencies, redundancies, and gaps in the current homepage UI. Stakeholder interviews: Designers, developers, and product managers were interviewed to understand their pain points, gather insights, and determine the requirements for the new design system. Defining the design system's structure: I created a hierarchical structure for the design system, comprising design principles, visual language (colors, typography, icons, etc.), components, and patterns. Design and development: Designers and developers collaborated to create the components and patterns for the design system. Each component was designed to be flexible, accessible, reusable, and rapidly scaleable.. Documentation: The design system's documentation included detailed guidelines, code snippets, and usage examples to ensure ease of use for both designers and developers.

Auto-Layout

Component adaptability: Auto Layout allowed designers to create responsive components that automatically resized based on the content inside them. This ensured that components remained visually consistent across various screen sizes and use cases. Simplified design iterations: With Auto Layout, designers could quickly adjust the spacing, alignment, and distribution of elements within components. This made it easy to iterate and refine the designs while maintaining consistency across the entire system. Streamlined collaboration: Figma's cloud-based platform and real-time collaboration features enabled designers and developers to work together on the same file simultaneously. This eliminated the need for constantly exchanging files and reduced the risk of version conflicts. Seamless handoff to development: Figma's API allows developers to access design components and their properties programmatically. This made it easier to translate designs into code and ensured that developers were always working with the most up-to-date design assets. Consistent documentation: Auto Layout made it simple to create and maintain design system documentation. As components were updated, the documentation reflected these changes automatically, ensuring that both designers and developers had access to accurate and up-to-date information.

Results

The implementation of the Cargill.com Design System led to: Consistency: A cohesive visual language and user experience across all products, resulting in a stronger brand identity. Efficiency: Designers and developers were able to reuse components and patterns, significantly reducing design and development time. Cost savings: With a streamlined process, the overall cost of design and development was reduced. Collaboration: Design and development teams worked together more effectively, leading to better communication and faster problem-solving.

Conclusion

The development of the Cargill.com Design System exemplified the pivotal role of a design system in enhancing user experience, optimizing operational workflows, and mitigating expenditures. By allocating dedicated efforts and resources towards establishing a robust design system, organizations stand to gain substantial and enduring advantages.

Next Case Study →Home