Outcome: Lead designer for the creation and maintenance of multiple Design Libraries, the process of updating them and documenting decisions. Bringing the whole company along for the journey of co-creating a design system.
How is Started
When stepped into my leadership position at FarmIQ, I discovered that there was a lack of Design Libraries and design documentation. Our mobile app had a minimal library, whereas our website experience didn't have one at all. Additionally, the mobile app was not aligned with our Brand Identity, and both applications were not cohesive as they had a different look and feel.
I arrived just a few months before a company brand refresh which kick-started my work on aligning our applications by creating a global Core Design Library tied closely to the new Brand Guidelines.
The first image depicts the state of the Design System before I joined FarmIQ, and the second illustrates the current situation.
Our Core Library
This contains everything that is used in both our mobile app and website experience. Ensuring that designers always use the same colours and core components consistently across both platforms. Currently, the library includes logos, colours, iconography, packs, and map pins.
The Core Library is a great resource for product designers. It contains various styles and components, along with comprehensive documentation that provides guidance, and instructions on usage and placement. I created a Product Design Confluence space to document important decisions and historical information allowing anyone at FarmIQ to access and understand what's happening in the Design Space.
I ensured all colours for in-product use, passed at Level AA in the Web Content Accessibility Guidelines (WCAG) 2.1, tweaking the brand colours as and where needed. This required collaboration on a short deadline with the Head of Marketing, an external Brand Agency and my Senior Stakeholders.
Our Web Experience Library
I started creating the Web Experience Library whilst working on my first project (updating the stock list) for that development team. This application is a legacy product that is over ten years old and written predominantly in Java with limited global styles, which makes updating the UI extremely time-consuming and tedious.
The stock list project's purpose was to improve the current experience by adding additional functionality and using this as the opportunity to align our applications UI, to create a united product.
I started with typography (font choice and styles), buttons, tables and navigation, aligning them with the newly created Core Library following the UI feel of the mobile app.
Our Mobile App Library
The Mobile App Library already existed, but with the initial back-end development work coming to an end there was a need for design to keep delivering UX and UI at speed, and for this, we needed an ever-growing robust design library to help automate our design decisions for speed and consistency.
We have different subscription models which we call Packs, depending on the pack you are on changes how you record things into FarmIQ. This means we have different patterns for different Packs which adds further complexity to our design flow, documenting this was my priority.
For Mobile we Utilised Storybook
The mobile development team uses Storybook to store and document all re-usable components. I started working with the Product Owner and Tech Lead to create a Storybook view for the mobile app that didn't require the developer's time to access it. This added another step to our design sign-off process (something I introduced) but it ensures that components are built right the first time so that the Design Libraries match Storybook and the live product.
Where Storybook was not Possible, we Introduced Style Guides
For our Web Experience, I first created style guides for the colours and buttons. Working with a tester we went through the entire application to replace all old colours and button styles with the new ones.
For now, we have updated the navigation, all colours and buttons. We have taken the approach of updating the most popular pages first whilst enhancing the experience, adding additional functionality, updating the UI and utilising our new patterns. Unfortunately due to the limited use of global styles in our legacy system, we must update and improve section by section. However, this does allow us to scrutinise each section looking through our enhancement requests and adding additional improvements to the experience at the same time as updating the UI.
Highlighting the Value of Design, our Role and Design Systems
During my initial three months at FarmIQ, I had the chance to present to the entire company during our quarterly Seasonal Planning session. My presentation was about the significance of design, our responsibilities as designers, our design libraries, and the importance of having a design system. I received positive feedback and engagement from everyone. Many key leaders from across the company expressed their interest in being a part of the co-creation process.
After this success, I now present my vision for design at every seasonal planning. I present what I feel is the most important information I want the whole company to be aware of about the Design Team.
Working Towards a Design System
We, the Product Design Team, recognise that building a Design System requires the company's support in terms of resources. Unfortunately, after a restructuring, we were unable to expand our team to meet the higher demand as we had hoped. This has meant a rationalisation of our priorities. However, as a team, we are continuing to make incremental changes and building our libraries and documentation gradually, involving other teams along the way to create our co-owned Design System over time.
Reimagining our Design Principles
Design Principles are a vital part of a Design System as they help make decisions during prioritisation, design, and building. After restructuring, we realised that our Design Principles needed updating as they were difficult to follow due to changes in our environment.
Holly, our Senior Designer, took charge of this process. Our new principles were created by taking the best aspects of the old principles and adding new ones. We aligned our new draft principles with our product vision and strategy, limited them to one title and a short sentence, and brainstormed how to share ownership of them. At our all-company conference, Holly explained the importance of having principles, the process of updating them, and our next steps for refining and implementing them. ⏱️🤝🚜♻️
It's great to see other teams across the company supporting design-led improvements, as design cannot be siloed in a SaaS product.
Work completed whilst at FarmIQ