Facilitating the production of a consistent and scalable interface: the t.ux Design Library
t.ux is a supplemental learning platform intended to aid aspiring UX/UI designers on their learning journey.
My Role
I organized and maintained the design library, reviewed t.ux activities for new components, created new components and variants and performed stress tests on elements for breakpoint limitations.
Tools
Figma
Notion
Zoom
Slack
Overview
The scope of work was to create the foundation for the design system. Although we were a small team working on a single application, given the potential scale of the product, we needed to build a go-to source for reusable components and patterns to reduce the efforts for both the design and dev teams and to facilitate the production of a consistent and scalable interface for t.ux. With the design system in place, the team spent less time pushing pixels and more time focused on the strategic design of the product.
FIG_01 Planning & Research
When faced with the challenge, I started small and like any other design project, did it in sprints. While my team worked on designing educational activities, I researched other design systems, created checklists, and met with designers, devs, and mentors to understand how the tool would be used so that I could set up a design system that served everyone's needs.
FIG_02 Assessing the state of the existing design
Product design was weeks underway by the time I began the design system assignment, meaning there were components and non-components created in individual files, which lead to inconsistencies across the board. Surveying the existing designs, I merged approved designs into the library, noted inconsistencies and areas of improvement, and worked with my team to select the designs to be incorporated across the product. After assessing the state of current designs, I listed styles and elements we had and would need in the future and set up the framework based on this inventory list, as well as on my research of other design systems.
FIG_03 Base system Elements
During the existing design audit, a clear need to establish base system elements stood out. In order to align the team on a cohesive brand experience and standardize the designs in progress, I defined the rules and styles for color, typography, and spacing.
Adding these base system elements to the Design Library gave the team a visual representation of the brand’s building blocks, and took the guesswork out of standardizing their designs.
FIG_04 Designing a tool for Cross Team Collaboration
After understanding how the design system would be used, which designs would be migrated, how it should be organized, and standardizing type and color, it was time to incorporate documentation.
Establishing a shared vocabulary and understanding of how the team should interact with the tool, was critical, so by adding a Design Library how-to guide I made onboarding and knowledge transfer effective by including resources available in the system and where to find them, in addition to documenting clear rules and use cases for each component.
FIG_05 The Design Library
The t.ux Design Library is a repository housing designs and documentation. As a new product, our foundational system supports the brand logo, grid and spacing systems, typography, and color, as well as a collection of reusable components and patterns. As the owner of the “DL”, I unified the brand's type, color, and other visual elements while building an internal tool to support a more efficient workflow and create alignment around centralized design standards.
What I Learned
Collaborating with design and dev teams took a lot of communication and coordination, ensuring we were all aligned and coming up with ways to secure the evolution of the product. As for my role as the system owner, maintenance proved to be more challenging than the setup, and as the product grew and changed, the design system did as well.
Design systems are never finished, and at least for me, not a one-man job. Although I was responsible for the initial setup, changes, and documentation process, a loose team model allowed my fellow designers to contribute to the system, and I could not have done it without them. We met daily on Zoom to discuss introducing new components, if an existing component needed to be updated or retired, and shared frequent updates so the team was aware of any changes.
Since its inception, the DL has gone through revisions and updates and continues to evolve into the solid resource we set out to create. In summary, I learned to treat the design system as a product, and switching my mindset to viewing it from that perspective helped me to better grasp the impact of the system on the product team.