Content Design for Non-content Folks
Cristina Simonetto presented “Content Design for Non-content Folks” at UX Camp Spring 2021. Enjoy!
Senior Content Designer, RBC
Cris is a content designer in Toronto with about 15 years experience writing for UX. Currently, she’s a content chapter lead at RBC, Canada’s largest bank. Her experience is split between technical writing, advertising, and UX, and people think she’s passionate about her work because she waves arms a lot.
In her spare time, she’s a terrible guitar player, half decent singer and an near professional television watcher.
The following transcript very likely contains typographical errors. Please forgive any mistakes!
Hi, I’m Chris, I’m here, I’m a content designer at RBC, which is a bank in Canada. And I’m here to give you some tips and practical points on how to create content if you are not a professional content person, because I know that a lot of people need to do that these days, so before we quickly, before we get to the actual tips, let’s talk about what a content designer does, and I’m gonna tell you about what I do at my job at RBC. So obviously it’s content was designed. But what does that mean? So on the content side, I work on IA information architecture content strategy, which is kind of layering what kind of content, what’s the best content and how is the best way to get through to our clients in order for them to achieve their goals and for the business to achieve at school, of course, content structure. So have you set by content up, what’s the head or what’s a page? What’s the sub-head? All that kind of stuff.
The actual writing. So yeah, if you do content, you’re Ward nerd, that’s pretty obvious. Translation, usually content people handle the translation of Canada were bilingual, so everything we do needs to go out in both official languages and accessibility… I just wanna pause on accessibility for one second, people usually think of accessibility as the domain of visual designers and developers, but it should really play a big part in content creation, because your content needs to be accessed and understood by all of your users. In my case, I work for a bank, and everybody, regardless of their cognitive ability, regardless of whatever language they speak at home, they need to be able to manage their money, so I need to create content that is understandable by people maybe who can’t read very well on screens, people who have cognitive issues, people who need to hear the content as opposed to actually read it, people who don’t do well with figurative language, there’s a lot of people who don’t understand metaphors or common idioms that we might use in everyday language, seem to be really careful and put out content that basically as many people in your audience as possible can understand, and when you do that, it just makes it easier for everybody actually, ’cause once you make it easy, it’s easier.
I guess that’s obvious. Okay, and then there’s the design half of my job, so in an ideal world, a content person will work on both of the diamonds and Double Diamond process to get the best product out and that’ll be working on everything from the requirement stage through the research, framing the problem, the content designer can be very helpful in coming up with a concise problem statement, concept-ing… Of course. And usability testing, I wanna stop for one second on usability testing to used to… People used to tell me that content doesn’t have to be final or done before we go to user testing. And in my experience, I find that that’s actually not true. Content should be as polished as possible because whenever I’ve gone to user tests with paper sketches, I’ve got a user tests with prototype that only have work with a visual design that is not there or incomplete, and people manage to imagine how all those things they can imagine interaction, they can imagine the visual design layered on top of whatever wireframes or sketches you’re going out with, but when you go out with rough content, people spend the entire test talking about either how they don’t understand what you’re talking about, or how they get hung up on the words…
And so the test, you kinda lose the point of the test, you’re not testing the interaction or the product, you just have people talking about content over and over, so I try to get the best words as possible before we put this in front of… Before we put our prototype in front of people, and I’m ready to pivot, if by chance some of those words aren’t really hitting what they’re supposed to do, I’m ready to change them so that we can move through the test and learn about the product as opposed to how people feel about my words. So that’s basically what I do. And that’s a full-time job for me. So how are you gonna do it if your job is actually something else, the best way is Hire A Content person, I know this is impossible, but I’d be lying if I didn’t tell you you should hire a content person to do your actual content… I wouldn’t expect my plumber to do electrical and I’m not gonna expect my visual designer to do content, even if that visual designer is actually having way on their off-time. And the reason is, it’s also a lot of time, they need…
You’re gonna need time to do content on top of whatever other job you do, so if nothing else, if you’re not able to get a full-time content person to help you out, make sure you build in time into your process, into your project timelines to do the content properly to edit it, to redo it, etcetera. Okay, so let’s jump into the actual process. So I’m gonna spend just a little bit of time on discovery and concept-ing, and most of… We’re gonna be speaking mostly about tools to do the actual copy writing, but very briefly, when you’re doing discovery for your project, try to approach it at least a little bit with the content hat on, and what I mean by that is just listen to however your clients are talking about your product or your experience, if you get to interview them, write down the words they use, read reviews, read comments on websites or whatever, but the closer you can get to their natural language, the easier it’s gonna be for them to understand you, so just listen, and also you should take a look at your competitor’s language because if you don’t go out with at least industry standard or improve on it, people aren’t gonna understand what you mean, so you should just be aware of the content in your space, whatever it is that you’re working on…
And when you get to concepts… And I do the rest of the discovery. It’s not just discovery than concept, but then when you get to concept-ing, at least what I like to do, that makes it easier for me and actually for the rest of the team to do their job as well. Is we do a content first concept-ing exercise. It’s just a little one. We split up into groups and we Intergroup of two. And in those groups, one of us is the client and one of us is the business, and then we have a conversation that mimics whatever it is that our product that we’re building is gonna be doing, and for each question or piece of information that flows in that conversation, we put them on a sticky and then we put them in the order that they happened, and then we look and see if there’s patterns, and what that tells us is we… From the patterns that emerge there, we learn the natural way that this flow between your product and the customer is gonna go, and you can also learn a little bit about the language that people use when they’re doing it.
And I’ll just make the end product feel more natural to your users, and you’ll have a good idea of how you should be phrasing things, and as a writer, you will now have some headers and sub-heads that you can use to fill in later on when you’re actually doing the writing. So now you’ve done a big chunk, the hardest drunk, probably of the work before you even get to sketching. Alright, so now, so the actual writing part.
If you… Actually, sorry, before we get to the right or we’re gonna talk about structure for one second, sorry. So let’s take a look at this title here, and this child is from an investment site, and I was looking at it, and I needed to figure out what I was trying to tell me to do and why I was trying to tell me to link an account but basically, this is what I saw.
The header, a bunch of words in the middle that I was too busy to parse and then connect with us, so I thought I had to call to link this semester account.
What you should do in order to be clear to the client is to use headers and CTAS to tell your story, the header should clear the date was happening on a page, it seems obvious, but a lot of times you get heaters like Hello Chris or Hello John. And that doesn’t tell me anything. If you have a new idea on a page, you should have a sub-head for that idea as well, and the CTA should clearly say what the user needs to do, again, it seems obvious it doesn’t always… And minimize your body copy and your instructional copy, if we take that and we go back to the Tao just showed you…
Let’s take a look.
So in this body copy, it’s telling me that I should like an investment account to get a deeper analysis of my personalized come… Okay, that makes sense. And to do that, I’d have to tap some things, some additional eligible investments that somewhere else on the page, and if I don’t have an account to link, then I should call, that’s what this connect with us to get an account to link. So that’s a lot of information and things to do and benefits all bundled up inside that body copy where and nobody’s ever gonna see it. So
Instead, if you rewrite it by putting what the client… So just get a deeper analysis of your plan, that’s what the client… The point of this, the reason you should think an account and what the client should want, so that should be the header, get it. This is why we’re even looking at this child, get a deeper analysis of your plan, there’s a little bit of information in here just saying that to do that, you gotta make sure your investment accounts are linked, and then the action is actually to link your investment accounts
So it should be a CTA, and it should not be a thing that I go to somewhere else on the page to do, the CTA should be right here to tap and… Boom, now I’ve done it. You told me why, and you tell me what I need to do.
The secondary CTA is if I don’t have an investment account, I should call to set it up, instead of using connect with us as the CTA, I put set one up as a CTA because that’s why you’d want the person to fall, so there’s a lot fewer words here, but by using the heater efficiently and the CTA efficiently and creating a hierarchy between the two CTAS, now it’s clear or what the person needs to do and why… Alright, now we’re gonna talk about the actual words, the content we’re gonna put words on to that structure, if you remember nothing else from this presentation today, just remember that on your copy needs to be clear, it needs to be brief and it needs to be consistent, those are the main main main main rules of copywriting, especially clarity and brevity. Let’s get into it, let’s see why so clarity, that’s what your client would say if they don’t understand you, and let’s take a look at this, this is a menu that’s inside of the banking app that I work on, so there’s support and then there’s help. What is the difference between support or help? What am I gonna find when I tap here? Is it gonna be a chat bot, is it gonna be frequently asked questions, is it gonna be a form of some kind…
A instruction manual, I don’t know, because help doesn’t really mean anything different than support in this scenario, if you go down, you’ll also see the sub-head, it’s called services, but
Everything a bank offers or any business really is a service, so what am I gonna find in that bucket called services to…
You know, I don’t know. So we clearly need to improve these two words.
And we can approve them by being specific and being accurate, the copy should clearly tell the user what to expect, and if something happened, what happened, did you take into account what they do with what they’ve done, and what they want to do, and it should never be vague, so let’s go back to that. What’s
Inside this little menu item here, it’s a frequently asked questions, so let’s use that as the title, now all of a sudden it’s way there… In this section here, this is actually a poorly designed little bucket, we’ve got alerts, we’ve got statements, and we’ve got tools and calculators, two of the things or communications, and the third one is something else, so this actually needs to be reorganized, I would move tools and calculators right out of here. And call this communications, and now people know what to expect because we’re being specific, always choose the most precise word that you can… All right, let’s look at this example. This is help or text on that same investment site that I was looking at, or for all you give you a couple of seconds to read it, but this is pretty difficult to purse. This is what I thought when I tried to figure things out.
What you need to do is you need to break up your text so that people can parse it so that they can break it down, what I mean by break it up is anything that’s long, break it into short sentences, if you start seeing a pattern in those sentences, you could probably break those sentences into bullets, and if you see a Patton still in the bullets, like words are repeated in the same way over and over, then you’ll know that that those bullets can probably even be turned into a table, which is super clear. Anything is better than long paragraphs, and honestly, in my experience, I’ve seen any time a paragraph gets longer than three lines, especially in the mobile setting, people start to just not read it or gloss over it, so really, really question copy that’s longer than three lines.
Use active structure, if you don’t know what active structure is, an active sentence is where the subject is doing the action, so for example, I’ll buy you a cake as opposed to a cake is being bought for you… The second example, a cake is being bought, that’s passive, and it’s much more complicated, people use it because it sounds fancy, business like or whatever, but it’s a complicated way of saying something that you can just say much quicker and more clearly by using the active voice and lastly, they should be obvious, but use common words, obviously, common words means something different if you’re talking to a group of engineers versus a group of… That’s the general public, but try to use the simplest words possible. So let’s go back to that dialogue I showed you before, it’s pretty small on my screen anyway, but the first sentence is one big convoluted passive sentence that’s really from the bank’s point of view, so it says run a recommendation is made to increase your contribution rate is based on the status of your goals as shown below, what it’s saying really is when we recommend to increase your contribution rate, it’s based on these statuses that we’ve defined, what does the customer care…
Why we make a recommendation, the customer cares about what the recommendation is and why they should do it.
So let’s flip it some more even and just change it to increase your contributions if you’re off track for your goals. And we don’t have to tell them that we define the goals below because they can see it’s like right below. So now all of a sudden, we took this convoluted three-line paragraph and turned it into something that’s meaningful for the client, and it’s active, and it gets right to the point… And these bullets, a metric when I learned when I was as a copywriter is whenever you see the same phrase repeated over and over, that means that you can pull that phrase out and turn that content into something else that’s more simple, and in this case, it’s when the goal percentage is just, it’s in every single one of those bullets that told me that I could turn it into a table, so one problem is the goal status on the other column as the percentage which represents their total or retirement. Now, all of a sudden, we’ve gone from this, which somebody would have to read and think about a little before they understood to this, which they can sort of just understand at a glance, and it’s much more simple just by removing unnecessary text, putting it in the customer’s point of view.
Making sure it’s active. Alright, how do you know if you need to do this to your copy, ’cause sometimes to you, it’s perfectly clear, you read it, it’s fine, prove your content out loud, if you are reading your content out loud, it tells you a lot, so if you stumble, that means that your structure of the page of the sentence probably needs some work because if the writer stumbles, imagine the reader… Right. So re-think your structure. That’s generally what you need to do there.
If you repeat the finders elf, repeating the same phrase over and over again, you can probably condense that copy into bullets or a table or something more tight. Do you find yourself needing to insert commas because you needed to take breaths at certain points that means your sentences are too wrong, so shorten them, and
If you’re reading it out loud and you realize it will only make sense to internal or technical people, that means you’ve gotta pick simpler words.
Okay, now we’re gonna talk about brevity, which is get to the point. And I have a feeling I need to get to the point because this is… Maybe going over here. Okay, quickly, this graph here, this wonderful, wonderful graph that I love is from the Nielsen Norman Group, but it’s an article called How much do they read, and that article is pretty old, is based on a 2008 study of the amount of time people spend on a webpage on desktop.
And how many words were on that page, and they used the amount of time to figure out how much people were reading, and what this basically says is people read from about 20% to 40% of a page over about that. That’s just major beer. I’d say that’s about 150 words, once you get to about 200 people are reading 40% of your page. So
Basically, the more words you put on a page, if you’re trying to achieve clarity by putting more words on that page, the less people will read, it’s counter-productive, and my guess is that in this age of mobile and if you’re working on a product that’s helping a person do something where they’re task-focused, they’re gonna read even less, so you really, really need to be brief.
Okay, so let’s look at some examples. This is a tool tip that is right here on the client card or user name field when people are signing into online banking, but I’d like to tell you about this tool tip is that that person should only write what the client needs to know and nothing else so that tool tip was on the client card, field client card or user name, so why would you put in the tool tip that they should enter their username or their client card, they know that it’s right there in the label of the field, so that content can just go.
So they’ve also put the phrase to access online banking, they’re telling people that they need to enter these things if they wanna access online banking… Well.
The thing is, this is a sign-in page for online banking, so you don’t have to tell people that they need to do these things to access online banking, because they know… That’s why they’re here. That can go… The only new piece of information in the giant tool tip was that if they didn’t have a client card, they can use the number that they were given at the branch, so that was the only thing that should have ever been in that tool tip. In general, I think tool tips are bad news and this could have been pulled out of the tool tip. Okay, this is another common thing that you find that fights against gravity, people use a lot of useless words, things like it appears or it seems, or current is another word that hardly ever means anything very, really? Usually, all of these modifiers that people put into soft and their sentences, they don’t really add anything to the sentence, in this case… Let’s take a look at this. It appears, can go because if it appears, it probably is. So off we go, their current time zone doesn’t match your calendar time zone, so current… Why would I be talking about yesterday’s time zone or the TAM zone you’re gonna be in tomorrow? It doesn’t matter. And anyhow, Tomlin really don’t change that much in general, unless you’re moving a lot, so the word current can go, usually get rid of it, and we’re repeating times on a lot. We don’t need to see this.
If you think back to when we talked about using structure to move people across an experience previously, the CTA in this dialogue was the word here, that doesn’t tell people if people just glance at this and they see the blue word here, they’re not gonna know what they need to do… But if you change a CTA to change your calendar time zone, then people know what to do and they can see it or the glands and they can just go do it. This could be even further improved if it had a little title that said time zones don’t match, and then you probably don’t even need that first sentence, so the header would tell people what’s happening and the CTA tells them what to do, and you’re done… It’s much clearer and it’s faster. Alright, this, I’m not gonna go too much into this particular example just because of time, but this is a landing page, we’re replacing a client card, somebody has already tapped that they tap a button to replace their client card and they’ve landed here… This is another case of repeating, obvious information, here’s what we’re gonna do, You never, never need that sentence unless it’s…
Unless you’re gonna actually introduce a process here, it says, Here’s what we’re gonna do, or do a replacement card. Well, I already said that I wanted to replace the car. Why are you telling me over again, underneath this title that you’re gonna replace my card… I get it, it’s what we’re gonna do. All of this stuff about when the new part arrives on which kind of cards you can replace, this is the kind of thing that should probably be before the CTA, so that they know before they get into the process, which card they can replace… It would kind of suck to get here and realize you can’t replace the card that you were thinking of replacing, now you have to go back, why not put that information first, if we edit that down, the only thing that we really need is this information about what they need to do to make sure that they’re replacing the card, doesn’t impact any other cards that they might have, and we can put that here, this can also go before we can just remove this landing page, I put all of this information in a previous page, but then the reason that we had this on the landing page is just because there was too much before, so you do have to balance how much information you give on every page, but you don’t have to repeat everything all over again.
Alright, and last, we’re gonna talk very quickly about consistently consistency, consistency, it’s a great tool to develop a brand voice and to be part of your design guidelines, but for content, it’s also a great tool to make it easier for our users, especially users with cognitive issues or issues reading or whatever, if you always use the same wording for the same thing and the same phrasing for the same thing, that people only need to read that to learn your pattern, and they only need to read the beginning of the thing, and they’ll understand what you’re getting at and the next time they see that, they’re gonna know automatically what you mean, so
On top of being a great way to build a brand, consistency is a way to teach your users and to make just the experience a lot easier for our users.
This is an obvious example, but it’s actually the word cancel as a repeat offender, to give you a second to read this dialogue, and
If you realize what does the button Cancel here, do does it cancel the trade or does it cancel the cancel…
I don’t know, you should always use the same word to mean the same thing, and it should never made two separate things. In the previous case, the word cancel could mean cancel the trade, or do we stop this action that I’ve started.
Simply by choosing the word delete and then making your CTAS a little bit more specific. Now, we’re avoiding this problem with the word cancel, meaning two different things, and it’s clear for the user… Be very careful with the word Council. This is an example from banking world, and it’s a little bit of a convoluted example, but just to show, for example, accounts accounts and banking world are that metaphorical hole where you keep your money, it’s your checking account, you’re a credit card account. That’s what it means, but accounts also means username and password, the profile that you use to get on to a specific site, and here on this page, we’re using the word profiles, are using the word accounts to actually mean that username profile, Erin password combination. That means profile. So in this case, we should just use the word profiles and always use the same word profile when we’re talking about user name and password, and there is an opportunity here to be even clearer than the word profile would allow, but the point is, don’t be using one word, especially on the same page.
Sorry, don’t be using two words to mean the same thing, especially on the same page. Alright, and consistency can be hard to achieve, especially if you’ve got multiple designers across an organization, but we found in my group anyway, the one way that we can achieve it is to port the words right into the components and the design system, and that’s especially great for all text, ’cause that would be built right in, and it’ll always be the same in cases where you can’t put the words in the component because a component can be used for multiple different things.
We can annotate them and give examples and tell people what kinds of words and how to set them up and whatever in this component, so that we can be a little bit more consistency… Consistent going forward.
Alright, and very briefly, I wanna talk about functional text, so things like errors, all tags, labels, etcetera, it is very important and functional text that you follow all the rules that I mentioned before, because this specifically things that people need to use to work to get through your process on top of that, when you write errors and labels or whatever, make sure you take user’s point of view, so for an error, for example, what that means is tell them how to fix the error, not what went wrong, what went wrong is our problem as designers and developers what… How to fix it is what they need to know, so that’s what we need to tell them, that’s their point of view, and again, as always, use their words, not yours.
Just a really quick example that comes up a lot. This field is required as an error.
You know what, I don’t really care that a field is required, that’s your problem, that the field is required… If I were just hearing this, I wouldn’t know what it is that we’re talking about, if instead of saying that you say what to do… Well, it enter your name should be entered the task name as the air message, then people know how to fix it, so I always say how to fix the error, and then just to be specific, use enter for text fields, you select for radio buttons or drop-downs anything where they’re selecting as opposed to entering, and I always use the same message for the same error… What we do at RBC, for example, in my group is we have a list, a master page of error messages that we all refer to and add to and take from… Okay, that’s it. Basically, Be brief, be brilliant and be gone.