
Lime
This case study follows the process of building and evolving a multi-brand design system called Lime, aligning disparate teams on a unified design language for AgFirst Bank's global catalog of online brand experiences
Lime
Challenges
Until 2023, AgFirst lacked a systematic approach to designing user interfaces across its extensive brand portfolio. Teams worked in silos and independently defined standards for creating websites, resulting in fragmented brand experiences across the globe.
In 2023, the company embarked on a rollout plan to re-platform all of its brand marketing websites, spotlighting the following challenges:
My Role
Visual Designer
Researcher
Design System Manager + Documentation
Design System Advocate
Goal
As the Global UX team, our goal was to work collaboratively with teams across the organization to build and scale a design language that is flexible, accessible, and global.
Ideation + Research
Interface Inventory
To begin systematizing the interface, a teammate and I conducted an audit of current brand marketing websites across regions. The purpose of this was to collect a visual inventory that documents inconsistencies and defines the essential design patterns and elements. This information was the basis for determining components and patterns.
Market Research
After analyzing our interface inventory, we looked externally at other design systems. We explored established design systems, such as IBM’s Carbon and REI’s Cedar, to learn from their approach and structure. With the oversight of our team’s UX Engineer, we thoughtfully defined the three main parts of our design system: Foundations, Components, and Page Templates.
Accessibility
As one of our core design principles, accessibility was top of mind from the start. Our team built Henry to meet and exceed the accessibility standards outlined in the Web Content Accessibility Guidelines (WCAG). With guidance from outside partners and our team’s Lead Accessibility Designer, the design system was pressure tested for Level AA and AAA compliance. Areas we focused on specifically included color contrast ratios, tab order for keyboard navigation, input feedback, and content accessibility. Additionally, our design system documentation included accessibility guidelines, best practices, and recommended tools.
Foundations
Foundations were the system basics, which lived at the core of each brand and continuously evolved alongside the brands. They consisted of brand-specific visual elements (including typography, color palette, icon styles, spacing, image ratios, and more) along with interactive UI elements (buttons, form fields, etc.). Aligning on and adhering to Foundations enabled teams to achieve visual coherence and seamlessness across the board.
Typography
We used Roboto for almost everything brand and marketing — from banner ads to billboards. It was designed to be incredibly versatile with lots of range in terms of tone and playfulness. It can be quirky and expressive when it needs to be, or neutral when the situation calls for something a bit more serious. On rare occasions, we also use native typography for selected elements.

Colors

To have unified and recognizable consistency in AgFirst’s array of digital products and interfaces, here are set of well-defined rules about how to work with AgFirst Component library in context of internal and external themes.
Components
Each brand had a component catalog, a collection of reusable interface elements (such as Page Heros and Carousels) styled per their corresponding Foundations file. We categorized components as global, structural, content, data, or utility so that design decisions were efficient and accurate based on the page’s context.
Each component had thorough documentation, specifying interactive states, minimum and maximum content, additional breakpoints, tab stops, keyboard control requirements, and more.






















Page Templates
Page Templates represented structurally similar page layouts across brands that address common user objectives (such as a home page, product detail page, etc.). Each brand had a Page Templates file built with its corresponding foundations and components.
Documentation
After defining and designing the Foundations, Components, and Page Templates, our next challenge was to ensure our system included proper documentation and governance around brand implementation.
Our team created and maintained documentation resources in a Confluence space, working closely with our design, content author, and development partners to ensure we met their specific needs. The documentation included:
-
Our design principles.
-
Quick start guides.
-
Accessibility standards.
-
Best practices for designing and testing.
-
Brand governance documents unique to each brand.
Evangelization, Feedback, and Iteration
One of my primary responsibilities was socializing the design system with different stakeholders and teams. It was important to articulate the design system benefits in various contexts and provide team-specific resources to improve their workflows and processes.
For example, when presenting to leadership, I focused on demonstrating and quantifying the cost of inefficiencies and how implementing a design system would enable us to meet business goals faster and lower costs.
Additionally, we held feedback sessions with CMS Specialists-who had first-hand experience using the components to build websites-to assess which elements were working and which needed improvement. We worked closely with our development partners to implement cxhanges to evolve and improve upon the system.
My goal was to anticipate the needs of various teams and provide resources that show how the design system can alleviate their specific pain points.
Reflections
This was one of my favourite projects not because we did a good job but because we were able to identify some of our blind spots that were not identified before, while considering and accounting cultural needs. Lime was not just a design system that represented AgFirst bank but a guide that leads all the brand products with flexibility, consistency and accessibility. Lime is ever evolving and needs to be constantly improved, iterated and built upon.