Fernwood Design System
Like any other organisation with multiple digital channels, we started to notice that our web applications where becoming disjointed and were lacking the necessary cohesion across the entire ecosystem.
It’s because of this that I decided to approach the key stakeholders within the company and presented them with a possible solution, one that would maintain consistency across the board and make our entire suite of products more maintainable across all our teams.
It’s with this, that the idea of the Fernwood Design System was born.
One small step…
As our projects became larger in scale, so did our codebase and technical debt.
I decided that one of the first steps that needed to be taken was to create an interface inventory.
This process would allow the team to begin to visually identify numerous variations we had for our components and look into ways where these could be refactored and consolidated into a uniform solution.
Creating the foundation
I started by creating an exhaustive design system directly in the browser, then structured our pattern library using reusable variables and mixins to keep things simple using flexible modules defined by their parts and not their location.
The core foundation would be categorised into 5 key areas:
- Introduction
- Brand
- Code
- Copy
- Website
Each page would have it’s own corresponding sections which would provide a guide or reference to the corresponding team.
For example, within the Copy section, our communications team would be able to contribute to the design system by outlining how they would structure their content based on the required scenario.
The same approach could be used for all other categories, whether it be the Code section for our developers to understand how our component and modules worked and what kind of HTML structure would be needed to create these as shown in the guide itself.
The key emphasis was to make it as easy as possible for teams to contribute and understand what was being added to the design system.
Creating our components
By having our component HTML and CSS structure included within the design system it allowed for teams within the company to be able to use and maintain consistency across our projects.
Some of the components created included:
- Grid
- Navigation
- Buttons
- Inputs
Future
The Fernwood Design System was launched internally to key team members within the Engineering and Marketing teams.
As it stands the various components and sections are being used to update content across our projects as well as refactor our code base to create a maintainable and reusable library of patterns.
Our ultimate goal is to continue contributing to the project and make the Fernwood Design System the source of truth for the present and for the future.