A design system for a germinating brand
When I first started working on LiteFarm the tool was in it’s early stages of development. With the addition of new featues, the previously established brand and components quickly became limiting.
LiteFarm is a management application for small, diversified farms. It is an open-source and free tool developed out of the Centre for Sustainable Food Systems at the University of British Columbia.
Contributions
As the lead designer on the team, I updated the existing LiteFarm brand, expanded the component library, and developed an interaction library.
Responsive webapp design
Branding
Accessibility
Component Library
Icon system
Style guide
Design system
Interaction pattern library
The case for a design system
A growing brand
While the logo and branding elements already existed, standards for the brand were sparse. Continual development of the brand guideline was necessary to set a standard of use as LiteFarm grew as a product. I established a guide of when certain variations of the logo can be used in various instances online and in print.
I made sure Web Content Accessibility Guidelines (WCAG) compliant color combinations are a part of the brand guidelines. I adjusted the brand colors and ensured a large enough variety of color combinations passed the contrast recommendation for web accessibility.
WCAG Compliance
Icons are often used throughout LiteFarm to reduce the monotony of reading text and add engaging visuals to the app. Icons also strategically reduce the complications tied to translations since LiteFarm is available in English, Spanish, and French with additional language capabilities planned for the future.
Iconography
I standardized common elements used in LiteFarm including buttons, input fields, dropdowns, cards, tabs, and icons. Developing a standard for theme components speeds up the process of developing new features in the future. It allows for a consistent user experience throughout the application.
Component Library
Kevin Cussen
Product Manager
David Trapp
Farmer Success Coordinator
Crystal Arsenault
Organic regulations subject matter expert and liaison with Organic BC, UX Designer
The talented and dedicated LiteFarm engineering team