1 of 67

Connecting MSK's Voice, �Tone & Style to the UX Team

All the Words That Fit in 1920×1080 Pixels

Last updated 10/19/2021

David Shuey

Content Strategist & UX Writer

NOTE: Some formatting defects due to slide deck originally edited on Microsoft PowerPoint. No information here is proprietary.

See also David Shuey’s On UX Writing and Content Strategy slide deck that expands on the content analysis in these slides.

2 of 67

Today We’ll Cover:�

It’s Not Me, It’s Us: How to Research & Execute a Consistent Language for Diverse Audiences�
Where to Find & How to Use MSK’s Style Guidelines�
How MSK’s Voice & Style Works Within Design Systems Thinking (and our MSK Design System)

And You’ll Get: Resources

3 of 67

Voice means the unique worldview and word choices of the author or organization. (Think MSK itself, and its history.)�

Tone means the attitude conveyed in the writing and may encompass formality, objectivity, intimacy, and similar aspects.�(Think of a new ad campaign, or how .org language feels.)�

Style means the mechanical or technical aspects of writing and may be specific to the requirements of the subject or topic. (Think of how you stylize headlines or captions.)�

Definitions:

4 of 67

First Know: Branding and Marketing Tends to Change

The ad is so 2015. It has a specific TONE. �New branding coming soon.

adweek.com/brand-marketing/memorial-sloan-ketterings-new-ads-pitch-message-hope-159829/

SOURCE:

(Times Square billboard TBD)

5 of 67

But Patient-Facing Pages Is Our Focus for UXD Teams

Working on MyMSK Mobile with Bo & Melissa: �The STYLE is to use Title Case

i.e. not like this

(Not “Sentence Case”)

6 of 67

UX Style Guide: Key Project for M&C & UX Teams

Screenshot from Use Cases in Sharepoint Doc with UX Writer Michael Harrington of Marketing & Communications (M&C)

Bo, Melissa & I �worked through “menu” language & killed the “hamburger”

7 of 67

UX Style Guide: Key Project for M&C & UX Teams

Collab w/ Marketing & Communications; To be built by Design Team

8 of 67

Broadly Speaking, Our Design System is One Big Style Guide

UX Style Guide is ONE part. The Design System will be the “one stop shop” for so much MORE.

Knapsack Version��Sprint Completion: �Sept 15

LINK: Msk Oxygen | Knapsack

9 of 67

The Storybook Version of Design System is Current Focus

Design System Team: JZ (Saturn Rocket V), Joe (lead), James, Eduardo, Ben, & Austin (w/ scrum master Mike S)

10 of 67

Tower of Babel Lesson: Words Can Get Complex

Allegorically speaking…

We were once speaking on the same page, ahem, so to speak.

And then we were all speaking a different language.

11 of 67

Unity of Language & Voice at MSK: How to Speak to Audience

Patient-centered�
Easy-to-understand�(6^th grade level)

Helping people �understand & act�(don’t get �stuck)

12 of 67

Diversity of People Facing Cancer & Working at MSK

Language needs to be inclusive of all individuals�
ADA compliant

EXAMPLE: FORMS - How to categorize/describe gender, sexual identification (male, female, his/him/they, etc.), ethnicity (Hispanic vs. Latinx, for example)

13 of 67

Blast From the Slide Deck Past: Why We Need a Design System

14 of 67

Blast From the Slide Deck Past: Why We Need a Design System

15 of 67

Consistency, Consistency, Consistency

The Biggest Challenge will be paying attention to consistency�
Consistency: Within a Product or Design�
Consistency: Between Products�
This Requires: Research, Research, Research�
And Also: Resources, Resources, Resources

16 of 67

Language: Our Bridge to Somewhere

Let’s start with a personal philosophy of picking the right words …

17 of 67

Language: Our Bridge to Somewhere

We’ll start with how I joined the MSK Band: �Talking about words …

�… which I had 24 hours to create a presentation on How I Write!

18 of 67

19 of 67

20 of 67

Comic Martin Mull maybe said it.�BUT IT DOESN’T MATTER �“WHO” IT MATTERS “WHAT”!

21 of 67

I had some Design Systems writing background with Salesforce

Which brings me to my portfolio, which are 100% always honest and true. Well, mine is, probably to a fault -- I have photos in there of me doing dangerous yoga pose at an arts festival I was communications director for, and also eating sushi with co-researchers in Japan. But within this portfolio is my storytelling process shown not only my samples, but how I present a consistent voice in CAPTIONS and STRUCTURE -- familiar, informative, with a slice of my own humor. But when it comes to matching voice with client, that’s my #1 talent in both writing and design -- and to an extent marketing and project management. I think the best example where I handled new and challenging content and managed the visuals and quizzes around it is my work at Salesforce as a UX and Technical Writer from May to November 2020. Let’s check that out.

22 of 67

23 of 67

Q: How did the CREATIVE WRITING concepts get developed?� ��

A: By a lot of seemingly boring (but actually fun)

PLANNING. ��

24 of 67

25 of 67

Showing the boring work behind the fun words probably got me get this writing job..

JZ would say my sassy Ronald McDonald [House] hair.

HOW TO RESEARCH: BY Looking at Everything

�And here’s a different tab, focused mostly on helping me manage this project. I am a journalist at heart, and I document everything so I can back everything up later. I want to focus here for a moment to talk about team structure and independence. At Salesforce I was hired by two Salesforce Lightning Design System developers because I’m a self-motivated thinker with years of experience as an all-in-one creator -- both in design and writing. That was the main appeal on both our parts when diving into the content of Systems Design. They knew, as you will now, that I spent years developing the brand strategy, taglines, headlines, and digital and print content in areas focused on health: cancer care, palliative care, end-of-life nursing. This was both in the university setting, and for a private healthcare technology company. All of this was done proudly working for a professor and nationally renowned pain expert, Diana Wilkie, who tapped me for a very long time across two universities as the go-to creative for her (and also shared with the College of Nursing itself for 5 years as their web manager and art director). She did this because, I believe, she knew I could empathetically work as an instructional and UX designer, which she saw early on as her videographer with dying cancer patients, and also as a script writer for end-of-life scenarios that we filmed for a $1.5 million Robert Wood Johnson grant that transformed healthcare nationally by sharing FREE software to every nursing and healthcare institution. (I lined up the actors via Craigslist and co-directed the scripts I wrote for the multimedia content.) Jumping into different challenges, both creatively and technically, was what I loved about the university life. And I love the mission, which keeps me around.

26 of 67

Research & Resources is key for writing in alignment with MSK’s brand & voice.

I can send upon request.

HOW TO RESEARCH: BY Looking at Everything

�And here’s a different tab, focused mostly on helping me manage this project. I am a journalist at heart, and I document everything so I can back everything up later. I want to focus here for a moment to talk about team structure and independence. At Salesforce I was hired by two Salesforce Lightning Design System developers because I’m a self-motivated thinker with years of experience as an all-in-one creator -- both in design and writing. That was the main appeal on both our parts when diving into the content of Systems Design. They knew, as you will now, that I spent years developing the brand strategy, taglines, headlines, and digital and print content in areas focused on health: cancer care, palliative care, end-of-life nursing. This was both in the university setting, and for a private healthcare technology company. All of this was done proudly working for a professor and nationally renowned pain expert, Diana Wilkie, who tapped me for a very long time across two universities as the go-to creative for her (and also shared with the College of Nursing itself for 5 years as their web manager and art director). She did this because, I believe, she knew I could empathetically work as an instructional and UX designer, which she saw early on as her videographer with dying cancer patients, and also as a script writer for end-of-life scenarios that we filmed for a $1.5 million Robert Wood Johnson grant that transformed healthcare nationally by sharing FREE software to every nursing and healthcare institution. (I lined up the actors via Craigslist and co-directed the scripts I wrote for the multimedia content.) Jumping into different challenges, both creatively and technically, was what I loved about the university life. And I love the mission, which keeps me around.

27 of 67

WAIT! Is This a Bridge to Nowhere?

No team, we are going somewhere…

28 of 67

STOP! What Is Clear Language & Clean UX Design Really About?

So people are frustrated, confused & upset with the very personal process of fighting cancer. �

I was close with one of those people. Like many of us here are.

29 of 67

PAUSE! Think of Family & Friends Who Face Cancer

My sister Sandra �loved life & family.

Her experience

with her cancer �center & medical �care was mixed.

30 of 67

GO! & Help Family/Friends Face Cancer & “Bad News”

Memorial Day, 2021 – Shortly after Rocky Mountain Cancer Center gave the “Real Bad News”

1980s Shueys

31 of 67

Editorial Resources for MSK & Our Design System

32 of 67

Style Guidelines for MyMSK and Patient Materials

Style Guidelines for MyMSK and MSK Patient and Caregiver Education Materials (sharepoint.com)

33 of 67

Style Guidelines for MyMSK and Patient Materials

34 of 67

Favorite Use Cases from Style Guide: Key Do’s & Don’ts

Do’s and Don’ts

Don’t use ALL CAPITAL LETTERS, italics or underliningfor emphasis because they’re hard to read.
Do use bold type.

35 of 67

Favorite Use Cases from Style Guide: Titles & Headings

Use APA title case capitalization style for resource titles and headings of main sections.
Capitalize the first word.
Capitalize all other major words (nouns, pronouns, verbs, adjectives, adverbs).
Capitalize all words of 4 letters or more.

Examples:

Fertility and Cancer Treatment: Information for Women
About Your Lung Surgery
Before Your Surgery
After Your Surgery

36 of 67

“Teach Team Style Guide Cheat Sheet” From M&C Communications�

To write clearly, start by thinking about how to say something simply. Don’t make your reader work hard and guess what you mean. Aim for a 6th grade reading level. �

If a word has 3 syllables or more, choose an alternative with 1 or 2 syllables (for example, use “help” instead of “assistance”). �

If a sentence has more than 20 words, break it up into ones with 8 to 10 words. �

A conversational style has a more natural tone and is easier to understand. Think of the words you use when you’re talking with someone. Use common contractions (you’ll, you’re, we’re, can’t). Exception: use will not, not won’t. �

37 of 67

“Teach Team Style Guide Cheat Sheet” From M&C Communications�

Address the patient as “you” to a impart a more intimate tone. �

Communicate as if you were talking to a friend. �

Clearly state the actions you want your audience to take using simple instructions. �

Use an active voice, not the passive voice. Example: We’ll send you a new link. NOT You’ll get a new link.

�

Style Guide Cheat Sheet for Patient-Facing Web Pages.docx (sharepoint.com)

38 of 67

New Branding Also In Design System (+ Logos, Components, etc.)

Branding | Msk Oxygen | Knapsack

39 of 67

New Branding In Design System

MSK guidelines prototype (frontify.com)

40 of 67

Remember: Style Guidelines & Branding Will Change

So where do you go?

�

41 of 67

A Bookmark Coming Soon: The Design System Built in Storybook!

Yes, keep this resource handy. (Pictured: Current Prototype)

�

42 of 67

What’s the Design System Again? (From Onboarding Deck)

Our Design System Management (DSM) Team within DigITs is building a NEW and powerful design system that will help hundreds of MSK stakeholders create branded products, from apps to web pages.��These MSK products will have consistent voice, look, and functionality. By making their creation easier and scalable, this leads to more profound outcomes and manageable solutions for people battling cancer on all touchpoints. ��Ok, What Is a Design System?

A design system is a collection of pre-built, reusable assets that allows its users to build consistent digital platforms more efficiently. Such assets include logos, patterns, components, typography, code, and more. ��See John "JZ" Zavocki talk about the DSM in this presentation:

Design System Management (DSM) - DigITs Design - MSKCC Confluence��

43 of 67

What’s the Design System Again? (From Onboarding Deck)

Themes & Origins

Just a few years ago IBM created a free and open-sourced design system named Carbon. The DigITs team leveraged Carbon to build the MSK design system and library. This time-saving effort is being executed in theme-based stages �

Carbon is IBM’s design system we use as a base
Hydrogen: our custom theme that implements the existing MSK brand on top of Carbon, to be launched mid-September 2021
Oxygen: our custom theme that implements the future MSK brand on top of Carbon, to be launched in the near future�

Key MSK properties and assets have come together to create our own unique scalable and adaptable design system. This means any changes in branding or technology in the future will be synchronized into this toolkit. No more reinventing the wheel!��NOTE: The terms Carbon, Hydrogen, and Oxygen are used internally to explain stages of development. A final name is TBD (also can say "DSM" or "design system.")

44 of 67

What’s the Design System Again? (From Onboarding Deck)

But let's say you're a designer and wondering, "How does this help me?"

You want pattern libraries. You want code. You want fonts. You want it all at your fingertips. (Or mouse clicks.) You will also find use cases for logos, icons, and more. The Design System will be intuitive and a one-stop resource for designers. But also for: Developers, writers, and managers.

Helpful Links

Carbon Design System

Soon-to-be Updated Resources �(MSK is going through a full brand update by Marketing & Communications)

MyMSK_Styleguide - Play (invisionapp.com)��Interim Brand Guidelines (Access requested needed)

lippincott.frontify.com/hub/26

�Style Guidelines for MyMSK and MSK Patient and Caregiver Education Materials

�

45 of 67

Philosophy of Design System: In So Many Words

Scaling Growth. Saving Time.

Simplicity is our objective. By making your work life easier, this leads to more profound outcomes and manageable solutions for people battling cancer on all touchpoints.

�

46 of 67

Philosophy of Design System: In So Many Words

Memorial Sloan Kettering Cancer Center has devoted more than 135 years to exceptional patient care, innovative research, and outstanding educational programs.

By saving hours using our scalable design system to build pages for the MSK audience, this frees up time for other work endeavors.

The cascading effect benefits the MSK physicians, scientists, and staff who are serving patients and our greater society.

�

47 of 67

Philosophy of Design System: In So Many Words

We give you the tools to build — the voice, brand, and style, as well as handy templates — and you give the world products that change lives, in the moments when people are the most stressed and in need.

And hopefully you can provide solutions that can add years of new meaningful moments.

�

48 of 67

MSK & Its People: A Reminder from Design System

Who We Serve | Msk Oxygen | Knapsack

49 of 67

What to Learn From … About Pages

50 of 67

What to Learn From … About Pages

51 of 67

MSK’s Breadth & Reach

The Big Numbers

20,000 employees
Located in 8 cities (12 buildings total) in NYC, New York State & New Jersey
500 inpatient beds

�

52 of 67

Patient Care

Patient Care in 2020

1,417 attending physicians
3,933 nurses
22,822 inpatient stays
781,924 outpatient visits

�

Sloan Memorial Cancer Center �Basking Ridge, NJ

53 of 67

Research

Leading Researchers

23 members of the National Academy of Medicine
14 members of the National Academy of Sciences
8 Howard Hughes Medical �Institute investigators
2 Lasker Award recipients

�

Mortimer B. Zuckerman Research Center

New York City, NY

54 of 67

Education & Training

Training the Next Generation:

1,619 residents and clinical fellows
580 postdoctoral research fellows, research scholars, �and research associates
303 PhD and MD/PhD candidates
507 nursing students
246 medical students

�

55 of 67

At End of Day: We Keep Words & Design Simple For …

… Those that are stressed out and busy making a difference at Memorial Sloan Kettering.

i.e. Nurses! �(An audience I served for 15+ years.)

56 of 67

Our Voice for Internal Shared Teamwork Can Be Our Own!

�It Can be Fun! Case in Point: Our Onboarding Deck for New Employees Worked on with Abby, Michelle, and Leemor.��

57 of 67

Welcome to MSK!

We want you to have an amazing first week. And to make things easier. That is why we've arranged an array of activities, chats, & tasks for you to learn about Memorial Sloan Kettering Cancer Center as an organization. We also want to introduce you to our DigITs Design Team, our processes, & offer tips about doing things around here!

This document is meant to be a key reference in your onboarding journey for support & guidance. Consider this your MSK Design guidebook!

58 of 67

MSK Resources: Public Facing

MSK Instagram	https://www.instagram.com/memorialsloankettering
MSK Twitter	https://twitter.com/sloan_kettering\|
MSK Facebook	https://www.facebook.com/memorialsloankettering/
MSK YouTube	https://www.youtube.com/channel/UC7CfDrRVN3yMVq7gq17hZdQ
MSK Wikipedia�	https://en.wikipedia.org/wiki/Memorial_Sloan_Kettering_Cancer_Center
MSK home (.org)�	https://www.mskcc.org/�
MSK's News	https://www.mskcc.org/news

59 of 67

MSK on YouTube

60 of 67

MSK Resources: David Can Share

David’s Link to �All Key�Resources	https://mskcc-my.sharepoint.com/:x:/g/personal/shueyd_mskcc_org/EbFKRFrB4sBFrL8mSpdyMT4B_Xqp08_2ZOLDae-3Zdp4_A?e=tpkdrn
��EXAMPLE: Marketing & Communications Team	https://mskcc.sharepoint.com/:b:/r/sites/pub-Communications/Shared%20Documents/210715%20MarketingCommunications_orgchart.pdf?csf=1&web=1&e=m2zY46


��EXAMPLE: Onboarding �slide deck	https://mskcc.sharepoint.com/:p:/t/DesignTeam/Eau2fbBncOdOrpXhbBgtZDwBXYcja17NI5y6XO-5tRlCLw?e=lLkavh

61 of 67

MSK Resources: Link to Other Departments

62 of 67

MSK Editorial Resources: From Design System & M&C *

MSK has a number of platforms that connect with a wide range of different audiences. The language we use should follow best practice and style depending on who we are communicating with. For example, content on our mskcc.org pages is considered one voice going out to many different target audiences. However, patient portal messaging on MyMSK is one-to-one.��People To Help You at MSK

As you develop content there are a variety of in-house content creators available for collaboration and partnerships:

For content on mskcc.org: Margaret Breuninger

For UX copy: Michael Harrington

For any patient content or messaging: Allyson Collins

For patient education materials: Barbara Benson

For digital news stories: Katie Sobolik ��

* A reminder again: � All subject to change � but will be updated in � Design System

63 of 67

MSK Editorial Resources: From Design System & M&C

Editorial Resources

Style Guidelines for Writing Patient-Facing Communications�- https://mskcc.sharepoint.com/sites/pub-PE/SitePages/Style-Guidelines-for-MyMSK-and-MSK-Patient-and-Caregiver-Education-Materials.aspx ��This style guide is for: People who are writing patient-facing content. While this guide was written for the Patient and Caregiver Engagement department, it is a general reference for anyone interested in using clear, simple language. �

MSK Marketing & Communications Style Sheet�- https://mskcc.sharepoint.com/:w:/t/DesignSystemCommunityofPractice/EVYyTQi2mxRJtB7P550Or6MBHlEgdKmF9P_UW3qEeMUumg?e=a6ciqh ��This style guide is for: People who are writing for Marketing and Communications. This document will have future iterations, and will be hosted in a new site and updated here.��

64 of 67

MSK Editorial Resources: From Design System & M&C

MSK Digital Asset Library (photos and other imagery)�http://digitalassets.mskcc.org/index.jsp

�This asset is for: People looking for photos or images to add to their content.��Interim Brand Guidelines (from Lippincott)

https://lippincott.frontify.com/hub/26 �

�This site is used for: People who want to understand the interim guidelines for branding. Marketing and Communications, working with the design firm Lippincott, are facilitating rebranding efforts for MSK. Request access via the link above.

�Style Guide Cheat Sheet for Writing

https://mskcc.sharepoint.com/:w:/t/DesignSystemCommunityofPractice/EdLprYMcLIdJkB0hX8kicvEBK8j_wvXZLGdqNyCp2t8ATw?e=DVpoGJ

This style guide is used for: Tech teams and writers who need quick pointers on consistent wording and style.

65 of 67

Questions

On a scale of 1 to 10, how painful was it?

66 of 67

Check it Out: We Have FIGMA Licenses

67 of 67

And Thanks To My Sister & Family