Managing text in the design system

A presentation at ProductCamp in September 2021 in by Wojtek Aleksander

Slide 1

Slide 1

Managing text in the design system Wojtek Aleksander ProductCamp September 2021

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

Chaos in practice www.waleksander.design

Slide 5

Slide 5

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

Slide 6

Slide 6

One field - many labels

www.waleksander.design

Slide 7

Slide 7

Design meets content www.waleksander.design

Slide 8

Slide 8

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

Slide 9

Slide 9

style vs style www.waleksander.design

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

Excerpts of style guides

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

Slide 13

Slide 13

design system without proper content is a collection of ornamentation patterns

www.waleksander.design

Slide 14

Slide 14

Design system without content

source: audi.com www.waleksander.design

Slide 15

Slide 15

The smallest functional unit www.waleksander.design

Slide 16

Slide 16

Button vs CTA

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

Slide 17

Slide 17

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

Slide 18

Slide 18

Single sourcing and content reuse

www.waleksander.design

Slide 19

Slide 19

Create Once, Publish Everywhere (COPE)

www.waleksander.design

Slide 20

Slide 20

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

Slide 21

Slide 21

Text patterns www.waleksander.design

Slide 22

Slide 22

Excerpts of style guides defining patterns

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

Slide 23

Slide 23

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

Slide 24

Slide 24

Figma time! www.waleksander.design

Slide 25

Slide 25

Why does it matter? www.waleksander.design

Slide 26

Slide 26

consistency, fool! www.waleksander.design

Slide 27

Slide 27

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

Slide 28

Slide 28

good luck! www.waleksander.design

Slide 29

Slide 29

anything to add? www.waleksander.design

Slide 30

Slide 30

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