Empowering consistency

How I unified a vast UI library in a multi-service product

About

FarmCloud is a system created by AgriSolutions to support various participants across the agricultural supply chain. It was trusted by clients like Grupa Azoty and Microsoft.

Challenge

As the first UX Designer in a prior dev-only team, I had only
6 weeks to unify a fragmented UI and modernize the system.

Impact

I reduced front-end tech debt by 83% through increasing reusability rate across 2 key components & refreshing strategic UI elements.

My role

Design strategy, UI design, UX design

Team

PO, CTO, Me as a Designer, FE Developer, BE Developer

Timeline

January 2024 - March 2024

TL;DR

1: FarmPortal before | 2: FarmPortal after UI library improvements

✅ Results

In 6 weeks we delivered 4 key UI library improvements:

unified color palette (variables)
consistent typography
refreshed layout
consolidated button & input components

📈 Impact

front-end tech debt reduction by 83%
button - 5x increase in reusability rate
input field - 7x increase in reusability rate
more scalable codebase
faster development for future features
lower maintenance costs

Beggining with feasibility check

🔍 Quick interface inventory

I've been tasked with unifying multi-service UI library and it seemed like a design system case. But after performing an interface inventory, I knew that a design system, adopting all 3 services wasn’t feasible in 6 weeks.

Simplified interface inventory

🎯 Mapping previous versions of key components: buttons & inputs

I suggested that in place of a full design system, we should refresh only UI fundamentals & prioritize redesign of most crucial system components.

Buttons:

7 different components
used 464 times across the system
random usage

Input fields:

5 different components
used 1179 times across the system
random usage

1: Variety of buttons found in a system | 2: Variety of input fields found in a system

UI improvements

⚙️ Redesigning UI fundamentals

I used atomic design workframe and then based final UI on ng-bootstrap components, a familiar library for our devs.

1: Redesigned button & input field | 2: Table component | 3: UI basics

⏰ Last-minute custom build

With time running out, we realized a custom date & time picker was needed. My CTO agreed I'd create a quick POC and I suggested we also prepare separate UI components as backup.

1: POC for combined date & time picker component | 2: Backup UI for separete date & time picker components

Final results & learnings

🚀 Main service after redesign

Improved UI library was first adopted across company's top ROI service, FarmPortal. Below you can see the service main screen.

FarmPortal main screen

🎨 Bonus: improved UI library example of use

I put together visual concepts to showcase how the unified library would work across the other 2 services.

1: FoodStock - agro marketplace | 2: FoodPass - CMS service

💡 Key takeaways

You don’t always need a full design system.  Targeted component optimization can go a long way.  
Always plan for a fallback. Having a simplified version ready can save the project's timeline.
Working closely with devs is invaluable. They’re a goldmine of insight.