Transcript from the "Initial Design & Content" Lesson
[00:00:00]
>> Let's move on and start getting into some of the nitty gritty cuz we've been very much at 30,000 feet so far. And I think it'd be helpful to get into producing that initial design, right? Sooner or later, you got to produce the design concept and actually start visualizing some of this stuff and yeah that can be fun.
[00:00:21] So let's start by looking at some techniques to keep in mind when you're designing, right? And this is to avoid, remember what we're trying to avoid? We're trying to avoid scope creep, we're trying to avoid kind of people's subjective opinions and we're trying to avoid iteration hell. Those are the key things that we're trying to get around.
[00:00:45] So what can we do as we do design to avoid some of those things happening? Well, first thing we can do is involve the client, right? And I said earlier about how this is somewhat counterintuitive that we wanna exclude the client. And so we tend to isolate them from the process of fear that they're gonna interfere in the design in some way.
[00:01:05] However this is really big mistake, stakeholders are more likely to reject a design if they haven't contributed to it. And that big reveal can turn into an uncomfortable surprise. So we wanna get them involved, point one to remember. Point two is we wanna separate out the two elements of design, right?
[00:01:26] Element one is the aesthetics, the visual appearance, things like color, typography, styling, imagery, that kind of thing and the structure, right? The layout, the navigation, those kinds of things because one of the things I've observed over the so many years that I've been doing this and I see this time and time again.
[00:01:49] Is a stakeholder can reject an entire design because they personally don't like the aesthetics, right? I don't like the color so therefore this design is rubbish. Well, no, that's not right, there's a singular issue here. So by approaching the aesthetics and the structure separately, you focus the client or stakeholder on one thing at a time, rather than letting them get bogged down with, get mixing up those different elements.
[00:02:21] So I'll show you how to do these things in a minute but I just want to lay the principles and set them in your mind. And the third one is to work with real content. Going back to the question that was asked earlier, you cannot separate design from content.
[00:02:34] The design process should begin with the content, in terms of how it's organized and how we users can easily access it, right? We should always be working with actual content, not Lorem Ipsum. That doesn't mean final content, but it does mean something, right? So those are some techniques to keep in mind as we move through things.
[00:02:58] So how do we start that design process? Because the temptation is let's open Figma and really very, very bad idea, right? In most situations, you don't wanna start with Figma, so where do you start? Well, you start by making the content findable with good navigation. Now I wanna clarify the word content here so that I don't fall into the same trap as I've been doing with using the word website all the time.
[00:03:28] Content in my mind does also encompass functionality, right? Content can be words or it can be functions. In other words, it can answer questions or enable tasks, all right? So just to clarify that. So really, the first thing you need to be starting with is that content to make it findable to organize it in a way that makes sense to the user.
[00:03:54] You can't design anything until you've got an understanding about how the site is gonna be navigated. And to be honest, have a good understanding of what the content is going to be. So this goes back to the question, we were dealing with of, well, hang on a minute, I'm not a copywriter.
[00:04:19] How am I supposed to do this bit? Well, obviously, if you can get your content creator involved, that's amazing and definitely do that. But you'll be surprised at how much you can do even if you're not actually a copywriter because don't forget you're not creating final content here.
[00:04:36] First of all, you can identify what content is needed, right? You can identify what different types of content needs to appear on the website. Whether that be some functional thing, an interactive map or an event system or whatever it be. Or alternatively written content. What questions the users need answering for them about this product or service?
[00:05:01] What's its benefits, what value does it provide, those kinds of things. So and that can include everything from how the products are described to whether there's gonna be blog posts on it, what features, benefits, questions. All the things you can identify. And that's really your starting point, is just identify what needs to be in this thing.
[00:05:24] Then you can start structuring it. So content needs to be structured into some kind of hierarchy, some way of navigating around it that enables users to quickly find the content that they require. So that's the second step. We haven't opened Figma yet. We've not thought about colors or type or anything.
[00:05:40] We're just focusing at the minute on the fundamentals of how this thing is gonna operate and then we need to draft it. We need to, you know don't wait for your stakeholders to deliver content for templates that you then prototype. Just draft some initial copy that deals with some of these different things themselves.
[00:05:59] Or how this functionality will work, etc. Now let's talk a little bit more about drafting the copy or the content. Now if that content is functionality that's not too painful. You're usually writing a little bit of micro copy and things like that and, again, it can be changed later.
[00:06:20] If you're getting into more of the kind of marketing content territory then that feels much more overwhelming. Cuz that's a lot more difficult and you have to agree on things like a value proposition, for crying out loud, whatever one of those is. And really this ideally does need doing in collaboration with the stakeholders, you'll find it a lot easier to do it.
[00:06:45] But again, I'm a great fan of just having a go at it yourself because when you show marketers something rubbish, then suddenly you'll find that they start doing their work. So [LAUGH] there is something to be said from having to go in it yourself. But so something like a value proposition is strapline, summary of what the company does and don't be afraid if they've got a rubbish strapline, right?
[00:07:12] Which doesn't actually explain whatever this thing is that you're doing. Change it, see what happens. They'll only change it back, getting into the benefits, how does this thing help people? Why would they wanna buy it, what do they wanna do on it, etc. And then the features of, what does that actually do?
[00:07:31] And that formula applies whether you're doing a marketing site or even if you're talking about a web app or a mobile app. You still need to in a single line explain what this thing does, right? You still need to say how it's gonna help people. And you still need to say what features it's got.
[00:07:52] So whether you're doing a web app, whether you're doing a marketing site, this kind of stuff is necessary. Now with the kind of micro projects you're talking about, then isn't relevant to you. You can pretty much, it's a lot less of a thing, yeah.
>> We have a question about the content.
[00:08:13] Sometimes we deal with content that is not fixed. Meaning when you're talking about translations.
>> Yes.
>> A sentence in English could be three sentences in Spanish.
>> Yes, absolutely.
>> How do you deal with that?
>> That is a big issue. I do a lot in Europe.
[00:08:40] And German is like a hobby. Even an individual word can wrap on to a second line if you're not careful, it's a big problem. In those kinds of situations, you've got to design for the worst case scenario, right? So in a scenario like that I would actually start with the German.
[00:08:58] Because I know the German is gonna be longer and then kind of work backwards. That said, it is a nuanced thing, interfaces do need to change for multiple languages sometimes. It's a huge area. So for example, I mean in your situation, I imagine you're only dealing with English and Spanish, yeah?
[00:09:23] But sometimes, you get into situations of dealing with languages that read right to left rather than left to right and that fundamentally alters the design and the interface. So in your situation my advice is start with, if you know Spanish is gonna be longer, work with Spanish first.
[00:09:40] But yeah, I mean, it's a difficult area, there's no magic answers I can give you on that one I'm afraid. Are there any more questions in the chat while we're paused for a second? No, I'll keep going then. One of the the other big things in content that I think I would encourage you to start thinking about almost on behalf of the content creators.
[00:10:04] Because you don't always get access to them early enough, is actually questions, objections and tasks. So in the kind of discovery phase that I talked about, one of the things I always try and explore is this idea of questions, objections and tasks. What do people want to know?
[00:10:26] What do they want to do and what are they worried about, right? Cuz your content needs to be able to adjust for those things. And actually, that basic principle applies whether you're doing a marketing site, or whether you're doing your little updates. Things like, for example, an individual question on a form field might throw up some objections.
[00:10:51] Can I trust these people with my email address is a classic example. Or why are they asking for my date of birth? Or obviously, it might have associated tasks or I've got to get my credit card cuz I need to enter my credit card number. All right, now they're gonna walk away, is it gonna timeout while I do that?
[00:11:10] Knowing those constitutional tasks that go alongside it is really important. And then answering questions that they might have. For example, a great example, I said I was doing a pet plan websites, insurance for pets earlier. And one of the questions that came up was I don't know my pet's specific date of birth, is it enough to put month and year in, all right?
[00:11:35] So all of those kinds of things you kinda need to know beforehand. And that's part of what your discovery phase needs to be about. And then when you move into prototype and you need to make sure that any content you put in actually does address these kinds of different issues.
[00:11:48] So it does need to address all of these different areas, so how do you go about collecting that stuff, right? You obviously, you can make some educated guesses but it'd be nice to be a bit more informed, presuming budget allows it. So I often speak to sales and people within the sales team if I'm working on a marketing site.
[00:12:13] For example, if they've got a sales team, I tend to talk to them because they're the ones that are talking to customers on a daily basis. They know the objections that customers have got, they know what questions they ask, etc. And the same is true if you've got a customer service team.
[00:12:26] So in your example, in your company, they will be getting calls all the time about, I didn't know to do this on the website or I didn't know how to do that on the website. Talk to those people, right? Because they're full of insights into what people are stumbling over, what questions they have, what objections they've got, that kind of stuff.
[00:12:45] You could also look at the search terms people use sometimes on your website, that can be pretty enlightening for questions. Ask users, it's not rocket science that you speak to some users, perhaps little survey or something like that can be really helpful. Sometimes I will just look at social media feeds, right?
[00:13:05] Who's following you guys on social media? Go and have a look at their their content and what questions they're asking there, what comments they're making. But the one thing that I probably do the most is, I actually just run a question and answer workshop. If I've not got a lot of time and a lot of money, I'll just try and get some stakeholders that have regular contact with the user together in a room.
[00:13:31] And we just brainstorm a load of questions and their associated answers just to get people thinking about the content. It can be quite a challenging area and you can feel like, well, that's not really design. That's the client's problem or that's the stakeholders problem. But in truth, I don't think we can kind of separate it out that easily and you kinda need to know these things in order to be able to do the design.