Managing text in the design system Wojtek Aleksander ProductCamp September 2021

this talk isn’t a HOWTO www.waleksander.design

about me

Wojtek Aleksander Content strategist UX writing trainer ● Over 20 years doing the digital ● Long- and short-term projects ● Strategy, design, leadership ● UX writing trainings (2 levels) (he/him) www.waleksander.design

Chaos in practice www.waleksander.design

Start campaign Start Launch Campaign Launch Run campaign Run Go Cancel Discard Go back www.waleksander.design

One field - many labels

www.waleksander.design

Design meets content www.waleksander.design

Label Label Label Label ACCOUNT Label Amount 00 1111 00000 1111 0000 1111 0000 Label CCY Label Hint HEADING Label Hint Label Label Hint Hint Label Label Label HEADING www.waleksander.design

style vs style www.waleksander.design

Your account is now active We removed the temporary block. You can use all platform features again. 23 minutes ago styling inspired by: IBM Carbon www.waleksander.design

Your account is now active We removed the temporary block. You can use all platform features again.

When you write a notification message, make sure to state the main idea up front. Notification title is the best place to do it. The notification body can contain additional information that will help users understand the situation or take precise action. The notification title needs to be usable as a standalone message. (…) The body is optional and will not always show for users. (…) www.waleksander.design

Excerpts of style guides

source: IBM Carbon source: Shopify Polaris www.waleksander.design

design system without proper content is a collection of ornamentation patterns

www.waleksander.design

Design system without content

source: audi.com www.waleksander.design

The smallest functional unit www.waleksander.design

Button vs CTA

Pre-order/Précommander Pre-order/Précommander www.waleksander.design

Your account is now active We removed the temporary block. You can use all platform features again. 23 minutes ago www.waleksander.design

Single sourcing and content reuse

www.waleksander.design

Create Once, Publish Everywhere (COPE)

www.waleksander.design

Your account is now active We removed the temporary block. You can use all platform features again. www.waleksander.design

Text patterns www.waleksander.design

Excerpts of style guides defining patterns

source: Deliveroo source: IBM Carbon www.waleksander.design

you’re now ready to split atoms www.waleksander.design

Figma time! www.waleksander.design

Why does it matter? www.waleksander.design

consistency, fool! www.waleksander.design

one system to rule them all, one system to find them, one system to bring them all, and in harmony bind them www.waleksander.design

good luck! www.waleksander.design

anything to add? www.waleksander.design

That’s all for today. Thank you! 🛴 Stay in touch www.linkedin.com/in/waleksander/ www.waleksander.design

Managing text in the design system Wojtek Aleksander ProductCamp September 2021