Enhancing Human Interaction: Building an Agricultural Technology Design System
As the inaugural designer, I elevated UX for agricultural finance tech, culminating in the creation of their first design system, benefiting both in-house and vendor apps.
CHALLENGE
Building patterns and components architecture to suit 12 unique application designs, workflows, and user journeys across varied banking organizations with individual branding.
SOLUTION
Standardizing workflows, design patterns, navigation, and mental hierarchy across applications for intuitive and user-friendly products.
.png)
TOOL SET
RESULTS FIRST
Design Efficiency
Boosted efficiency by 85% in the design and development teams through reusable components and design patterns implemented across platforms.
Streamlined Products
Streamlined workflows and design patterns across our product lineup, enhancing user consumption, utilization, and reliability.
MY ROLE
-
Analyzing current application and system contexts
-
Assessing AgFirst products under Farm Credit umbrella
-
Conducting competitive analysis with three American competitors
-
Developing a Style Guide balancing Farm Credit mandates and user/stakeholder needs
-
Designing intuitive workflows and patterns for all users
-
Compiling templates of common components
-
Customizing branding for diverse clients within Farm Credit framework
SCOPE AND CONSIDERATIONS
As a solo designer, time was limited for developing the Design System alongside other rapid UX tasks. To ensure fast scalability, I collaborated with the Head of Product and Front-End Engineers, setting short and long term priorities. Rapid scalability and modularity were key principles, favoring reusable components and templated layouts to meet the MVP deadline.
LAYING THE FOUNDATIONS
Studying how top fintech brands tackled the challenge of enhancing human interaction through technology bolstered our resolve to realize our vision. We started by mapping out all components, determining guidelines for design and implementation.
From the outset, I firmly believed that the cornerstone of our design system's success lay in harmonizing UX/UI across both platforms. This approach ensured a system that was easily maintainable for both design and development teams.
It was crucial to clearly define visual specifications for designs to align with developed systems. Thus, we established spacing standards for various views and platforms.
A SYSTEM WITHIN A SYSTEM
After establishing fundamental guidelines for colors, typography, and spacing, we progressed to essential elements like buttons, inputs, and forms. These served as the foundation for more intricate components and flows.
​
The process of creating new components became straightforward, thanks to the foundational rules we set earlier. Each added component adhered to specific guidelines, specifications, and behavior derived from preceding components
Next, we embarked on building a dynamic set of components, following the Atomic Design methodology. Collaborating closely with developers, we ensured that naming conventions and component organization served both design and development needs.
Certain components transitioned into "hybrid" versions, blending custom elements with platform-specific ones. For instance, our header navigation was made brand compliant, facilitating clear differentiation between internal and external applications, while preserving Farm Credit and AgFirst branding integrity.
