William Tigno –– Portfolio

Info

William Tigno

design system for skilltype v2

Crafting the building blocks of a unified product experience

Contributions

Strategy

•

Product Design

collaborators

CTO

•

2 SW Engineers

Duration

January 2021 – March 2021

Context

A core component to building Skilltype V2 was establishing an initial version of its design system. Establishing these foundational structures and guidelines first would allow us to dive into the features and work streams easily, while maintaining consistency throughout the process.

As the first designer, I also viewed this project as an opportunity to set a core principle for our design process and culture moving forward, thinking about the long-term vision of growing the design team.

incorporating tailwind css

Embedding collaboration into the design language

Skilltype V2 presented a unique opportunity by rebuilding the platform with a cleaner codebase, and leveraging Tailwind CSS as the front-end framework.

By integrating Tailwind's core concepts, the design system enables a unified language and understanding of the UI, fostering seamless collaboration between designers and engineers. This empowers them to address minute details effortlessly while scaling the system to handle intricate and complex challenges effectively.

This opportunity allowed me to instill essential values as a cornerstone of our design culture, emphasizing the importance of designers' technical understanding of product development and fostering a deeply ingrained culture of collaboration in our design practice.

Utility-first Primitives

Tailwind CSS provides a set of pre-defined CSS classes that exist based on how they alter styles properties. We use these pre-defined classes as foundational structures to our design system such as units of measurement, typography, color scales, and so on.

Constraints-based

Tailwind CSS embraces working within a constrained set of values for atomic-level details such as spacing or typography. Applying the same concept enforces a level of consistency and reduces decision fatigue–allowing designers to focus their energy on solving problems.