A presentation at ProductCamp by Wojtek Aleksander
Managing text in the design system Wojtek Aleksander ProductCamp September 2021
this talk isn’t a HOWTO www.waleksander.design
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
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
source: IBM Carbon source: Shopify Polaris www.waleksander.design
design system without proper content is a collection of ornamentation patterns
www.waleksander.design
source: audi.com www.waleksander.design
The smallest functional unit www.waleksander.design
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
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
So, you’ve sliced your designs into components. Atoms, molecules, and organisms start to form neat wireframes. Still, there’s one thing that keeps you busy a bit too much: labels, messages, validations, etc. Perhaps there’s still something missing in the design system? Something like reusable pieces of text. Can they become atoms? They can! But is this the time to dissect components tissue to add another level of automation in the design work? Let’s see!
for free. You
can too.