Design system framework

On a project with tight timelines and constraints around open-sourced software being downloaded and used within the organisation, I needed to ensure consistency and build efficiencies when creating websites and building content.

Our project team was tasked with providing design standards for moving forward with a major enhancement to the organisation’s web presence. I recommended a design system as the best way to meet this requirement.

The Challenge: Managing Permissions and Tight Deadlines

One of the major obstacles we encountered was that we required explicit permission for every package downloaded, unless it was already available in-house. This created potential delays in adopting certain libraries or tools, which could impede progress. This limitation was particularly challenging since I had access to a limited set of tools. I would have to get approval for every package I built into the system, where I could so, I built a framework that leveraged tools and frameworks that they already had in-house.

Additionally, the project had a particularly short timeframe for implementation. To overcome this, I spent a weekend building the initial framework and core components. The project team and I then built out the design system and submitted issues we found with the framework during the day as we built the design system’s components, and I would resolve the issues with the design system framework and core components in the off hours.

The Solution: Building a Modular and Scalable Framework

To solve this issue, I created DS2-core, a flexible, scalable design system framework using PugJS, SCSS, and JavaScript, coupled with Prepros for compiling and managing the components. This allowed me to develop a system that could easily integrate with varying operational constraints while adhering to design standards.

The framework was structured to support a modular approach, using as few included packages as possible and using the components of the design system to build out the design system. This methodology ensured consistency between the design system and the products that would be built based on it. It also ensures the design system is demonstrative of the consistency and use of components. As part of the core, I paid particular attention to establishing core components required to efficiently display the patterns that would be exposed in the design system.

To ensure the framework would function as expected, I rebuilt my own design system using the framework. This not only tested the robustness of the system but also allowed me to iterate on the needs of the core components, ensuring that everything met the usability, accessibility, and branding guidelines, as well as testing the scalability of the framework. Through this process, I was able to uncover any potential issues early, resulting in a streamlined implementation.

The Result: Successful Implementation and Ongoing Enhancement

Despite the challenges of tight deadlines and system limitations, we successfully used the framework to implement the design system, meeting the project timelines. For the project, the status report helped the project team keep track of the state of each component helping to efficiently manage the work.

I continue to update and enhance the framework and core components. Importantly, the system has been made available for public download, contributing to the wider design community by offering a flexible, easily adaptable solution for others to build upon.

This project demonstrated the value of strategic thinking and collaboration to create a product that not only met immediate project needs but also provided long-term benefits in terms of design consistency and development efficiency.