Tone Design System
The project.
Tone is Talkdesk’s website design system. With the Tone Design System as its foundation, the website consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
A design system is a set of pre-built, reusable assets—components, patterns, instructions, and code—that enables users to create consistent digital experiences more quickly. Tone's pre-built and universal assets reduce the amount of time teams spend creating and building. Instead of constructing and reassembling basic pieces, they can spend that time tailoring their products to individual customer use cases.
Tone Design System is built using the Atomic Design methodology.
Each component was created to handle a specific user interface problem, such as showing a list of alternatives, allowing the submission of a form, giving the user feedback, and so on, not only on the front end side, but also on the CMS. Tone's components have all been engineered to work together in harmony as parts of a larger whole.
As a result of the complete revamp of the design system, 36 components were redesigned from the ground up to be fully responsive, with some additional components added to the list to meet the demands of the team and company. And the Sketch artboards, or Figma frames were not even counted. 🤓
Tone was initially built with Sketch, and later in 2022 the design system had to be migrated to Figma, and it was a successful mission that I was the proud pilot of. Like any other mission there is always something to learn from it. The lessons I've learned as a lead on this process were the following:
- A comprehensive and detailed plan will get you far.
- There’s value in the valleys. Celebrate the highs, learn and grow from the lows.
- If you’re overthinking, move on or it will impact the delivery time.
- What we know today, is different than what we knew yesterday.
- Communication is key.
Results.
Tone design system was created to speed up work and deployment for the Web Strategy team as well as to guarantee that components were used consistently and in accordance with the defined standards and best practices.
- Enabled the design team to work much faster.
- Facilitated communication between development and design.
- Components were built and updated faster by the development team.
- All components had their own documentation.
- All stakeholders had access to components information, visual and written.
- Through our CMS, we enabled external team users to access the website.
