1 of 13

UX Style Guide: Proof of Concept

Last updated 01/10/22

Michael Harrington & David Shuey

2 of 13

Goals & Objectives of UX Style Guide

Create User Experience (UX) Style Guide that can be used across MSK products.
Develop use cases particular to digital platforms.
Ensure UX Style Guide is a living document (format TBD) to be shared internally. Capabilities include being able to be updated regularly and dynamically by M&C, UXD Team & other stakeholders.
Develop as a tool that may incorporate Editorial Guidelines. It must be scalable so it can be accessed both within the Design System, but also as a resource site (a link) shared in other spaces. �

3 of 13

What’s in This Proof of Concept

Core elements of our UX Style (will grow)�
What, Where, Notes & Sample Content/Copy Recommendation(s) (w/ source if applicable and/or available) for each element�
“t/k” = More info to come in actual initial version

And You’ll Get: Pictorial Use Case Examples

4 of 13

Additional Objectives

Bridge the voice/brand/tone of MSK from Marketing & Communications (M&C) into the Design System
Find overlapping collaboration points with MSK Design Team (User Experience Design (UXD) in DigITs) and M&C

5 of 13

General UX Best Practices

WHAT: Guide to begin with a brief intro to and rationale behind UX content style best practices—followed by list of informed best practices to follow when creating or streamlining text

WHERE: Beginning of Style Guide (to come)

NOTE(S): These principles can start as a “top-10”-type list and relate to editorial, tonal, branding, or other guidance.

Initial list will cover terms, copy elements, or language used erroneously/inconsistently, i.e.: “log in (verb) to” vs. “log into” as CTA vs. “login”(noun); using “&” vs. “and” properly in menu categories, page titles, headers, and/or body copy; full spelling of MSKCC at initial mention and then MSK thereafter; tonal guidance—i.e., language should be professional, yet clear and accessible to audience w/out being overly casual, w/special consideration given to Mobile (MyMSK app) vs. .org views and character limits; defining title vs. sentence case and relevant punctuation guidance; techniques for avoiding stacked headlines; proper usage of bullet lists; and more.

COPY REC: Will vary given topic range, but example provided below (w/clear rationale)

6 of 13

Use Case: Drop-Down Menus

WHAT: Proper formatting and succinct guidelines around type & amount of clear text to include in dropdown menus, especially for when patients/users encounter a typical form �

WHERE: International Patient Appointments | Memorial Sloan Kettering Cancer Center (mskcc.org); https://www.mskcc.org/appointments/request-appointment (example at right)

NOTE(S): t/k

COPY REC: t/k

7 of 13

Use Case: Sentence case preferred over �Title Case & rules for each

WHAT: Inconsistent use of Title Case vs. Sentence case, sometimes on same page

WHERE: https://mskdirect.mskcc.org/pediatrics/cancer-care

NOTES: There are many examples like this. Direction in future is Sentence case. Marketing & Communications should be consulted if unsure about particular usage on page. Pediatrics tends to have different typeface choice.

COPY REC: All titles should be sentence case. This involves capitalizing only the first word and any proper nouns. If title or header forms an actual sentence, punctuation is typically recommended; if a fragment, usually unnecessary to punctuate…but consistency is key across the page and/or section of site.

8 of 13

Export vs. Share (Action) Use Case: MyMSK Mobile App

WHAT: When to Use Export vs. Share in Apps, and how that’s presented

WHERE (Source): https://www.figma.com/file/Y1LaBZbSsFHeIAWTGmpiD4/MyMSKMobileApp_2021-Design-Board?node-id=656%3A21692)

COPY DECISION & NOTES FOR APP: Decided that “Export” is the direction when outputting any data or information to another format. “Share” (and share icon) is best for sharing information with a contact or outside media. �

RESOURCES: Did some work in this spreadsheet to research (More vs. Menu, and Export vs. Share) �User Experience Cases Research for Mobile App.xlsx (sharepoint.com)

9 of 13

Use Case (Action): Add a Medication

WHAT: How to have users “Add a medication” when in the medication menu �

NOTE & DECISION FOR APP: Decided just to use the word “Add” as it’s intuitive they’re adding a medication if within the section. The rule would be to limit the action prompts (“add,” etc.) if you’re already within the page where it’s intuitive that the word is in association with the subject (e.g.,: “medication”)

UPDATE: Bo and Melissa working on MSK Mobile sent this out for usability testing 10/15/21.

10 of 13

Use Case: Forms

WHAT: How to ensure forms and their fields and intended user actions look and behave consistently

WHERE: t/k (Brain Tumor Support Group (RLAC) | Memorial Sloan Kettering Cancer Center (mskcc.org); https://www.mskcc.org/appointments/request-appointment; Trivia Hour for MSK Patients and Caregivers | Memorial Sloan Kettering Cancer Center (mskcc.org); Is a Lung Screening Right for You? | Memorial Sloan Kettering Cancer Center (mskcc.org) (see screenshot at bottom left)

NOTE(S): Guidance is needed to ensure we consistently address gender (ensure inclusive language), as well as keep forms only as long/complex as necessary to get information needed from user; keep CTAs clear/easy to find, etc.

COPY REC: t/k

11 of 13

Use Case: Inline Linking and Underlining

WHAT: Ensure inline link behavior is consistent across products on .org, certainly within body copy text, to start

WHERE: Why Choose MSK’s Clinical Genetics Service for Genetic Counseling and Testing? | Memorial Sloan Kettering Cancer Center (mskcc.org)

NOTE(S): Many agree underlining links w/in copy paragraphs makes sense, but are they underlined at all times, only when user hovers over text, and/or are they always in blue? Are there cases where we use black text underlined but not in a different color? On our pages, light blue turns dark blue when link is hovered over.

COPY REC: t/k

12 of 13

External Resource Example: Health Data Standards

WHAT: A resource given by our UX researcher Ma, Qingyan./Health Informatics on Health Information Technology and Health Data Standards at NLM (nih.gov) ��LINK: https://www.nlm.nih.gov/healthit/index.html

1 of 13

2 of 13

3 of 13

4 of 13

5 of 13

6 of 13

7 of 13

8 of 13

9 of 13

10 of 13

11 of 13

12 of 13

13 of 13