Keystone design system

 

The problem

The TikTok monetization org lacked a dedicated design system tailored to their products. Adapting the TikTok consumer design system wasn’t practical, as the patterns, platforms, style, and users were fundamentally different. Earlier attempts to build a design system missed a crucial element: scalable, reusable content patterns and guidelines to ensure consistency, usability, and efficiency. That was about to change!

 

What I did

I am 1 of the 2 content designers in the TikTok Monetization org that supports the Keystone Design Systems team. In the first phase of the new design system's development I created:

  • Component level guidance that ensures all written and visual elements are consistent, user-friendly, and adhere to our voice and tone across platforms. They provide instructions for creating accessible and cohesive content. It includes:

    • Simple components: Focus on content design for specific parts of the experience or components that can usually be reused.


    • Complex components or patterns:
Focus on content design for patterns formed by two or more components. These can also be used in different messaging scenarios.

  • Messaging guidance that define each message type, their goals, and how to choose the right words. 

They also explain how we want users to feel after receiving these messages. 
We expect these guidelines to help stakeholders clarify their messaging goals, audience, and content, making messages more successful. By considering message types, tone, and components, choosing the right component becomes easier.

Results

  • Created a scalable, common resource that will help XFN partners write consistent content that follows best practices at the component and messaging levels.


  • Bridge the collaboration gap between product and content designers by leveraging Keystone, allowing both to work in tandem without placeholder text in early designs.


  • Free up content designers' and product designers' capacity for more complex problem-solving.

  • Reinforce the idea that content is a natural part of the design process.

 

Component guidance Message category guidance

 

People I worked with

  • Designers

  • Content designers

  • Researchers