Click here if you want only to see the screens✌️
Heart – Hartwell Design System
Based on the OKRs we set for 2024, I concluded that the most effective way to help the development and graphic design teams achieve their goals would be by building and promoting a design system.
My role was to coordinate this project, leading the design team and supporting the Product Manager, graphic design team, and developers to ensure all teams remained aligned.
high level goals
Increase productivity and consistency to design and development
Build a solid structure to our digital products
Decrease developer tickets to product design team
step 1 – inventory
We started with the main site, Sonco Crowd Control and cataloged the core components of the site to understand what was being used, its structure, and any inconsistencies.
step 2 – strategic alignment
In alignment with the developers, we chose the Tailwind library to structure the foundation of the design system, as the devs were already familiar with it.
The benefits we gained were numerous: naming conventions, foundational elements, and we inherited this entire base, adapting it to the product’s needs, significantly speeding up the process.
The benefits we gained were numerous: naming conventions, foundational elements, and we inherited this entire base, adapting it to the product’s needs, significantly speeding up the process.
step 3 – building
Token Installation and Component Creation: we created the tokens based on the product’s specific needs, and after several alignments and discussions on how to scale the design system, we established the following structure:
key screens
Previously, all we had were copies of other websites, developed solely by the developers. With the final result, we achieved a unique identity and implemented functionalities that are crucial to the business.
100%
of developers engaged in the project – we worked collaboratively with devs to make they part of this.
20%
Reduced time to create new components – still on library phase.
next steps
Implementing the First WaveWe will provide support to the developers and QAs during this process.
Document all decisions made to help new designers quickly familiarize themselves with the system.
Document the brand tone of voice in the design system and ensure it’s incorporated throughout the site.
100% of Product 1 must be implemented based on the design system by the end of Q2 2025.
Document all decisions made to help new designers quickly familiarize themselves with the system.
Document the brand tone of voice in the design system and ensure it’s incorporated throughout the site.
100% of Product 1 must be implemented based on the design system by the end of Q2 2025.
Reflections & learnings
This type of project requires close collaboration with developers, and it’s essential to have a basic understanding of code to ensure proper execution. I believe it’s the designer’s responsibility to take ownership of a project like this.
Selling such a project to the business team can be challenging, so I relied on the support of the development team. The key argument was the reduction in development time, which, in turn, means increased productivity, and that translates into more revenue for the company. This is the kind of language the business team loves to hear. 😅
Selling such a project to the business team can be challenging, so I relied on the support of the development team. The key argument was the reduction in development time, which, in turn, means increased productivity, and that translates into more revenue for the company. This is the kind of language the business team loves to hear. 😅
next case
(3)
Building a suit to Quincy-MA | Web App + Website
Go to this work