Design system
Status
2+ years and going
Team
2 Product Designers
3 Engineers
Role - Product Designer
Component Design, Visual & Interactive Design, Prototyping, Guidelines, Documentation
When I joined Teamshares, the design system was limited to design tokens like colors, typography, spacing, and shadows, with no component library in place. This led to inconsistent styles and a less intuitive user experience, presenting an opportunity to build a robust design system that better addressed user needs.
The goal was to build a design system that improves design consistency across our products and facilitate better workflows between design and engineering. I partnered with senior designers and engineers to make this happen.
Design tokens (colors and spacing examples)
We conducted an online survey with 32 product team members 6 months after implementing the initial update.
Data source: Gathered from online surveys completed by designers and engineers
In the kickoff session with all the designers and engineers, we identified the issues with the current design system and the repercussions they caused.
Problem identification with designers and engineers
We initially attempted to build components from scratch, but the effort required to finalize designs for modals alone was significant. This approach wasn’t scalable, I brought together designers, engineers, and the PMs to discuss pivoting to existing design libraries, considering factors like development time and maintenance requirements.
Board outlining the reasons for adopting an existing design library
We gathered together and created design principles for the design system, as the new library would be changing significantly. It was time to put a stake in the ground and define how we want the design system to be. We landed on principles I’m quite proud of:
Build an inclusive design system that is easy to use and accessible for as many users as possible.
Ensure a unified user experience that remains consistent across all product.
Include a curated set of components that address the most common and impactful use cases.
Maintain visual harmony by aligning components with established design tokens, company aesthetics, and style guidelines.
Ensure seamless integration with development environment and tooling for smoother implementation.
Foster collaboration between design and engineering to create solutions that are both innovative and practical.
These principles provided the groundwork for us to start exploring the potential design systems for Teamshares. We eventually decided on the Shoelace design system.
Design and engineering work was inefficient because we did not have a single source of truth for design components. To address this, I worked with other designers and engineers to evaluate each component and tailor it to our product requirements. This collaboration resulted in the development and documentation of 50+ components in Figma.
Creating configurable components
Following the atomic design theory, we created consistent, responsive elements that could be used across all products.
Expanding variant selections
Following the atomic design theory, we created consistent, responsive elements that could be used across all products.
Revamped Shoelace components and variants
Introducing responsiveness
To address the limited responsiveness on mobile, I proposed an adaptable layout with breakpoints at Mobile (390px), Tablet (834px), and Desktop (1440px), each featuring tailored margins, grid systems, and responsive components.
Updated responsive screens with breakpoints
We held pairing sessions with engineers to ensure the Shoelace components matched the updated designs in Figma.
We also hosted handoff sessions to discuss updated code in Shoelace 2.0 and Figma’s dev mode with all engineers and designers across different products, ensuring everyone was aligned.
Walkthrough of codes on Shoelace 2.0 and dev mode on figma
Shoelace 2.0 transformed our workflow, delivering 60% faster development cycles and consistent user experiences across Teamshares products. This foundation has significantly reduced maintenance overhead and accelerated our ability to scale efficiently.
Published
Figma integrated
Code steady
Guideline
Documentation
Accessibility
Testing
Interactive
Responsiveness
Modern UI
Templates