Speakers - Rachel and Travis Gertz

On the web, everything looks the same. Let’s fix that. Instead of a first or last approach, let’s look at design and content in tandem.

We’re going to walk you through a straightforward design and content approach that bites its thumb at boring trends without compromising the effectiveness of your UIs. Learn the business case behind flexible content and design systems that you won’t need to sell to your clients. We’ll teach you great ways to source, gather, position, and improve your content while giving examples of how design can create stronger microcopy, editorial messaging, and calls to action. By the end of this talk, you’ll be dying to trade your Open Sans and coffee cup headers for something a little bolder. Prepare your marketing team. They might not be ready for this.

Transcription

Travis: OK. The year is 1918, Munich, Germany. This man, Max Planke, he just wins Nobel Prize for his work in physics, in quantum mechanics, yeah, sorry. See, this is really hard, right? So anyway, he’s been touring around Germany for the last little while, just giving his lecture over and over and over again, and he’s being driven around by his chauffeur, and so after a while his chauffeur knows this thing like word for word. They’re getting near the end of this road trip tour and he looks at Max and he’s like, oh, man, you’re looking really tired these days, I’ve seen this talk like a million times, I think I know it word for word. Why don’t you just take my hat and sit in the audience, and I’m going to deliver your talk for you. Max goes, yeah, OK, yeah, that sounds like a pretty good idea, so let’s try this out, right?

So sure enough, Max sits down in the audience and the chauffeur does like a flawless talk, right? He just nails it, and so at the end, someone stands up from the audience, and has the audacity to ask this question: And so the chauffeur looks at him and he’s like, oh, that question is so easy, I don’t even know why you’d ask that. It’s so easy, I’m going to have my chauffeur answer it for you.

And it’s sort of a story about the difference between, like, real deep knowledge and understanding, and intelligence like Planck knowledge versus just sort of knowing stuff and cockiness. And that’s sort of like chauffeur knowledge. The greatest twist of irony, the story is actually bullshit. It actually didn’t happen. It’s a false thing, but it gets spread a lot in a lot of business conferences and things like that, but it’s still kind of a useful thing. So if you hear this story and no one actually points that out, there’s a chance that they didn’t do their own Planck knowledge. I think we have a lot of chauffeur knowledge, right? We get a lot of this kind of thing. We copy design trends, we blindly follow metrics, we just follow the same kind of marketing tricks over and over again, and it kind of leads to a lot of this kind of stuff.

Rachel: You guys see this before? Logo top left, open sans in the center, video or photo background, related to the content? Probably not. Also, you cannot create an experience. An experience is something your audience perceives. And don’t get me started on this little guy. Whose idea in the marketing team was this? Fred, it was yours, wasn’t it?

This concept that we introduce people to, this reminds me of basically showing up an your doorstep and having a giant flaming bag of dog poop that you have to interact with it in order to make it go away and we keep doing these things before someone has even had the chance to come into our house to come in and look around and someone said well we read an article that said we could get 50% increased conversion if we forced this on your audience. And this one, right? You guys know this one, right? If I had a dollar for every single personalized message that I got from a founder, oh, my God, you guys, I wouldn’t be here. I’d be somewhere really, really warm right now. What John was talking about earlier with this uncanny value of service. It’s personalized for you, but not really, we just sent it to everybody at the same time, let me show you something that you don’t need any help with. It’s a dehuman station, right? We’re kind of just like you’re all special. Oops.

So I said I wasn’t gonna do this, so OK, so this happened to me this morning. I woke up at like 6:42 and this app gave me this thing to like if I didn’t have my notifications turned to silent, like I would have been woken up at 4:30, for like a silly dog thing. So what does this mean? We don’t care about content, really, right. We just care about what it can do for us. It’s all about the money.

(Audience caught the meta joke of “Johnny Appleseed” on the slide.)

[5:00]

So with all of this kind of pushed us to really centralize our internet, right? We have more and more individuals in and larger companies, even, moving from like these add-driven, like marketing track like a place going to where people go to get a bit of solace, which happens to be like things like Medium and Facebook and stuff, but there’s an effect that comes with the centralization of content, right? In order to but able to handle all the sources, you have to neutralize it, right, you have to be as neutral as possible to be able to accommodate all the different types of content and so but this is a sort of a fake neutralization, right? It’s only really neutral to a very small perspective and a small corner of a single country of a certain demographic that I’m sure you guys all know, and they look kind of like me, but —

But there’s an even deeper problem with this, right? As we get more neutralized, we’re also stripping away expression and culture where we take like a really rich world and as we become more ingrained with the matrix basically we also start to dehumanize, right, we take something that’s so rich outside of our world and just kind of strip that away and we all of a sudden people become users, which by the way, users is a derogatory term outside of our industry, right? So and we become conversions and numbers and so we kind of like get this —

We need to develop a real strong understanding of how this sort of media affects us. We’re constantly bombarded by all these targeted messages from different platforms and algorithms that are making it this way, so we all kind of like have these singular points of view, right? We start like seeing the same news on Facebook feeds and Twitter feeds and all our friends and we kind of get more insular and isolated and we start making like documentaries about ourselves, you know, without a critical eye of what we’re doing, which is —

But yeah, so we want to rehumanize the internet. That’s what we want to do. And really it’s going to take a bit of work to do so.

Rachel: Well we’ve got three big ways we can do that. They’re not easy ways, but they are very important. So we can adjust our priorities, look at our systems to support the work that we need to do today and tomorrow. So let’s talk about getting our priorities straight, all right? First I want you all to pause. I want you to pause and I want you to smell the bullshit, because my friends, there is a lot of bullshit in our industry, in our economy, our political systems, it’s Rife everywhere we look.

We’re pumping out so much content so fast, we have to put a background image that’s unrelated because we don’t have time to look at it and what the significance of it might be. Have you guys ever tried to Google something really important that affects you personally and you keep landing on all these pages that tell you you should go visit this site and visit this site and basically you’re not talking about stuff that’s relevant, OK? And again, this is blowing up, like our whole bubble is and it’s not sustainable, it’s not a sustainable way to look at it and see all of these like banner ads that we see, right? You can buy clicks for like 30 bucks. You want to buy clicks and right now someone in Bangladesh is spending 24-hour days creating user accounts, over and over just so you have the clicks and this stuff is not real. That’s pretty cool. It’s not going to last so what you’re saying if you are supporting a model like that u’ betting on subprime mortgages. That didn’t work out.

That again, sorry, sorry, that again.

But we can actually reprioritize, we can look at systems that favor people over money, quality over speed, right? We can rehumanize our web and it’s really important that we do that through asking why. This isn’t the first time it’s come up, not the last, but we can actually go back five layers of why and those layers will tell us more about the Planck kind of knowledge that we need to get later, right.

[10:00]

It also synchs us up and connected with oh, surprise, surprise, empathy. But I don’t want to burr don’t think of empathy as like a deliverable or something that you hand off to somebody else. You have to consider that you’re going to maintain it even when you’re really upset in a project. When you’ve given up, you’re not really happy about it, your teammates are bothering you and you don’t — it’s it’s a state of mind really and it does actually lead you like a compass to asking why and how a little bit more and digging into that deep Planck knowledge. So this is what a chauffeur might say, cool, let’s do this and this is what Planck might say, if we do this, what is it really about? Why should we care? And how will it impact us? And when I say us, I don’t mean us as company or just the client as a team, but humanity, how will it help us? Is it a good idea or is there a better idea? And you have to ask those questions. Data points? No, not just data points right? You need something else that’s going to root this in reality. You need to ask real people, you need to look at the impacts and get out of those insular views.

Travis: So if we have our priorities kind of straight and we’re thinking more humanely we have to start thinking a little bit practically about how we work this into our teams and our projects and like that. So on the web especially we’ve always really been told this, right? We tell ourselves content first, content first, content first because it is really hard to design something after you recieve content as many of us have experienced before? Right? And it really started, I think back in the early days when our budgets were like for web were kind of like the kind of weird fad thing out the side and you didn’t have a lot of money and then you had to like make something for somebody else, just to be able to pump up a ton of blog content out all the time and we had like these really fixed-width screens and with like very defined boxes everywhere so really content first was really kind of designed just so we could — sorry, this is really slow. Oops.

There we go so we knew how big to make those boxes, right? But since kind of responsive design came around, those boxes are completely flexible, right? Like it’s actually irrelevant, but what it ends up doing is it just kind of divides the design from the content, so in effect these days content first is no different than content last. If there’s still a division between whoever is writing and whoever designing it, so you miss a lot of opportunities. Like a perfect example is a product like square space where the entire thing is dedicated to the idea that you can dump anything in it and it’s going to be OK.

Rachel: And we want to be better than that, right? I’ve been in projects with clients in the past where I’ve been brought into the reis he search process but then kind of like, go on and do some content, core strategy, do your messaging and your voice and tone and when you’re done hand it back to your designer, who designs something up and you do end up in that water fall process. Just the idea that you’re not communicating, right? So the risk is essentially like I have all these ideas in my head, right and I need to translate those ideas so when they go down on paper, I’m basically relying on the next person to translate what I put on paper, and his understanding of what I under is going to be significantly less and so on and so forth.

So essentially, you just start transferring chauffeur knowledge, right? You don’t really understand why the person you’re working with it doing what they’re doing and it really dilutes things, right? You end up getting to the bottom and the worst part of it is you can’t really go back. Your content is stuck or even worse, you end up with a system where the design and content don’t even work together. So if you can’t do that, I think based on print and editorial systems, Jen was talking about this earlier and we have so much history that we can rely on that has actually pushed us further, we can do Design and Content together at the same time.

And then again maybe you don’t need the boxes, right? But writers need to write and they had need to be on the team, so you don’t necessarily need to hire a whole bunch of writers, but writers are incredibly valuable to the process. They can do a lot to interpret the message and make sure that everybody is pulling together for those core goals. Make sure that if you are considering it, they’re allowed to kind of put that humanity and that plank knowledge back into the process. This goes for app content, too. The argument is we don’t really need content writers for our apps but if you take this, you don’t have anything. Like what does this do? I don’t even know what this is for, right? So it has to exist together.

[15:00]

Travis: And also, that includes clients, too. Don’t let the client write the content for you. They don’t have any idea how to write for the web or four products, as well.

Rachel: Or your interns. That’s my advice. One of the other things that I think becomes a risk when you silo the content and design process is that you can end up stagnating the message, right, because the thing is, is like design evolves, right? You get iterations and you can even do feedback and concepting all these things and even like code will change and you can improve things hand make them faster and better, but if you don’t allow your words to evolve, you get like this block of ice and then at the end you have a product that probably isn’t even what you started with. It’s not even the right product, you’re creating the wrong thing.

So we think that designers should be very, very much involved in the collaboration process with content, so if you’re going to start drafting your documents, allow a designer to start coming in, and that person can again, take those messages, all those thoughts of content that you’re trying to put down and start to look at like is there a better way that we can do this, can we give it a visual identity instead of something that’s a word, right? You can have so much more impact, so much more meaning when you augment that message and another neat thing is I don’t know how often this happens to you guys, but ooh, yeah, error codes, I forgot if you don’t see them on the UI they’re usually forgotten about and someone fills in the default, right? I think someone else was talking about that.

Travis: Sort of like the default JQuery validation error message or something like that. And also designers, bring your writers to work with you on the products. It’s so important for them to be able to see the words in context and often this collaboration alone generates so many crazy awesome ideas, like writers have this constraint of having to pull their imaginations into like words. That’s all they get. They don’t get color and typography and everything to use to be able to illustrate that. So they often really have to think outside the box a little bit about how to say something, and then together, you can kind of — kind of really come up with some magic, we just did a full-day workshop with a room only technical writers and they came up with some of the best conceptual ideas that we’d ever seen doing this. So it’s so valuable.

So when you do — are able to connect on this stuff, and as a designer, you have a really deep understanding of the content, not just reading it, but understanding where it came from, if you were a part of that creation portion there’s really an opportunity for it to amplify the message, whatever that is. And that’s something that we were not very good at on the web.

And so here’s an example: Jen had some really great examples today which you guys should think about, but like really tie that to the content. That’s what — that’s what our editorial cousins did years ago and true graphic design is all about this, right? Use images that work exclusively with — and by the way, illustrations are awesome on the web. They scale great, they’re lightweight, and they’re actually paradoxically much more personal than a photo can often be.

Rachel: And if you make an illustration system, you have something that you can mix and match and you can use it as your brand system and it works like a charm.

Travis: And this helps you understand the typography much more. If you can work with a piece of content and really understand what it’s trying to say, you can use it to amplify what you want to say something verbally and represent that in type and really get some meanings. Better meaning out of it. And that same with color, right? Color is just, oh, such an underutilized tool in our tool belts, but you don’t need fancy tricks to make an impact. You can just use nice useful pieces of color that tie directly to that meaning again. And so what happens when we art direct something? Like, so this is the bold italic and many of you have probably read this before. This is a good art direction can take something like this, and make it look more like this, right? It’s more immersive, there’s no lines separating everything. Now, ironically this is the old version of this site. This is what it looks like now.

[20:00]

They moved to Medium, a centralized platform, so they have effectively centralized, neutralized and kind of dehumanized it. It just looks corporate. It doesn’t look like the Bold Italic anymore. It looks like Medium, and I find that troubling.

Rachel: The irony is that Bold Italic had moved to Medium because the cost to do that kind of work was staggering and so they thought they could extend their readership by going into a platform like Medium, but …

Travis, when you adjust your process, you can start to see the world in a whole new way with our tools and the truth is we do have tools, we have tons but we have to reconfigure how we put them together a little bit. So that kind of leads me into systems. So traditionally, our way of building web things, this is very much like content first, right? They’re built for automation, repetition, consistency, right? We have the blog post template, we have the landing page template, all these things, and we just throw whatever goes into there, because it’s really hard to make things pretty fast or to put expression into T but I don’t think that has to be the way.

Like if you look at the most popular content management systems, like WordPress and Drupal, they actually encourage you to start from someone else’s template, and kind of like in the very chauffeur way, kind of just adjust it for yourself and customize it and you can throw a ton of plugins at it and make it do certain things, but it’s not real — you know, it’s still got this DNA in it and same with these front-end applications like bootstrap. So what we’re really asking for is systems that anticipate variation. We want to take it to the standard and then be able to build on top of that and so we’ve tried a few things out with our company. And I’ll kind of show you some things.

So we built this, it looks like a framework, and people confuse it as a framework, but really it’s more like a starting point and it so it started off as like a protein typing tool we could use to quickly get ideas into a browser and then we built like a style guide on it so we could make a set of general branding guidelines beside it and we kind of — but the thing is it’s basically a laundry list of all the things you can style and it kind of stays out of your way. So for us, it’s just like we can customize it to a brand look or whatever. There’s kind of things like this, but when we combine it with our favorite CMS, you should talk to those guys by the way, we love this one.

This is not an ad or anything for it, but with this, there’s two things that it has a really valuable to us, it’s like these agnostic systems, right? We can see what we’re doing on the left and on the right we can add any kind of field and rearrange them so we can start putting art direction fields and they can form in-line CSS and stuff, and so I can talk about this a lot but we can do things like this super-easy, like we have a magazine on our site and we can like design up blog pages or like these crazy layouts in like maybe a couple of hours, it depends on how crazy we want to get. It doesn’t have to be hard, but we have to rethink how we do it. So I’ll do a quick demo here of how we work.

Rachel: So on the left, if I’m starting from scratch, I can start and protein typing content in the CMS or, you know, take it and translate it over from Google and put it in here and I can start adjusting I know a little bit of HTML, a little bit of CSS don’t need it here. So the handy thing is I can start working with the designer, Travis in those case and we can start moving those content times around so we can see where the hierarchies exist. We can see what’s happening on the page really quickly. We set it up a little. I think this took what five minutes?

Travis: Five minutes. This allows you to work collaboratively, right, we normally flip the system. Normally you do the CSS last, but we do it first. First step, CSS. But we have the flexibility that we can do that and after that once it’s done, we can actually start art directing on top of our existing system so we’ll take our initial ad wires thing, and we can use those as sort of like a baseline and then start to add expression to our content quite easily, just by setting up a system that anticipates these things, so color and typography, being able top move these things around and we’re just kind of getting started with this.

[25:00]

So the idea of this isn’t for you guys to use any of this stuff. It’s more to rethink your tools, right? You can see this, but I want you to kind of like make your own. Like don’t use this one. Like it’s probably broken for a lot of you when you look at it now. But really think about it, and there’s lots of other tools that you can use, like WebFlow or there’s sim plis if you’re really stuck on WordPress, but I don’t recommend — and yeah, once we do that.

The main idea is it that our systems should augment our humanity, not replace it, right? We want to take our sites and our products up to the baseline standard, standards that are readable and accessible, but then be able to go beyond that, and add expression and humanity into this work.

Yeah, so standards not sameness, right? And really, guys, I mean we know that change is not an easy thing to do. It’s not a quick thing to do, you know, you’re not going to be able to walk into your company and in one day change your entire process or your systems or your priorities, but if you could just pick one thing from these last two days, take that one thing and talk to one or two people and maybe start with like a headline feature, right or maybe you take with a product team whatever that thing is, keep it small and manageable because for people to see results, they have to be invested and that buy-in takes a little bit of time and people are scared to change. It’s a really terrifying thing, right?

But if you can ease them in slowly. We have the capacity for this. It’s almost like if we don’t do it, how are these brands and businesses going to last? It’s not good enough. Prepare for a whole new world, guys, it’s going to get crazy. I can see a couple of you guys wearing hats in here, yours are not chauffeur hats, the ones on your heads, but think about this, when do you usually put on a hat? You’re usually does it because you can I throw it on, and all I’m asking you even though you have great hair is consider taking that hat off for one try, just put it aside, that chauffeur hat and really start to think of a different way that you can approach your work, not just at work but in life and really refocusing that process, because I think what it means is that we can be a little bit more human. Thank you.