Preview: So you’re not just another technical arm for them, you’re somebody who is actually understanding their business in that what you’re doing is in service of their business.
[Music]
Lea Alcantara: From Bright Umbrella, this is CTRL+CLICK CAST! We inspect the web for you! Today Emily and I are kicking off a new series where we talk about web design, development and content management systems from the client perspective. I’m your host, Lea Alcantara, and I’m joined by my fab co-host:
Emily Lewis: Emily Lewis!
Lea Alcantara: This episode is brought to you by our friends at Craft CMS who would like to tell you about the brand new Craft 3 Beta. Craft 3 has been rewritten from the ground up to be faster and easier to build sites with. It has exciting new features like Multi-Site support and a beautiful new image editor that you can use to crop, rotate and set focal points on your images right within Craft’s Control Panel. To find out more and download the beta, go to craftcms.com/3. Again, that’s craftcms.com/3.
[Music ends]
But before we get to our episode, we’d like to announce that Emily and I are going on the road. This May we’re headed to Chicago for HOW Design Live where we’ll explain how to choose the right content management system from a designer-focused perspective. We’ll go Beyond WordPress and break down how to evaluate a CMS, key ways the right CMS can save you time and money, plus alternatives to WordPress. Visit howdesignlive.com to register today.
Emily Lewis: We also wanted to remind our listeners that we have a donate link on our site, so if you love CTRL+CLICK and have a little spending money, consider donating to help us keep the show going. A dollar, five dollars, whatever you can spare will help us continue delivering great content, high-quality audio and transcripts for each and every episode.
Lea Alcantara: So one of the things Em and I have learned is critical to our business success is to talk to our clients in their language to explain the process of creating website in terms that they understand. We think this is important not only because it creates better client relationships and, of course, can lead to new sales, but because it helps those outside of our industry understand the value of what we do and why it’s important.
Emily Lewis: So what we’re going to try and do each quarter this year is have an episode on demystifying the web for clients. We’re going to kick that off today with where we start most of our projects’ web design and from the broadest perspective of design, so we will also talk about the specialties within web design such as user experience and information architecture. So I guess maybe we should say why we need to do this, why everyone should really consider doing this, talking to clients from their perspective.
Lea Alcantara: Well, the main thing is truly understanding that our knowledge is specialized.
Emily Lewis: [Agrees]
Lea Alcantara: That we take for granted what we know and perhaps we have a little bit of an echo chamber if all we’re talking about into our web design and development.
Emily Lewis: [Agrees]
Lea Alcantara: But for the majority of us, our clients aren’t web designers or web developers and the terms that we use so easily and so frequently and understand, they don’t. They simply don’t.
Emily Lewis: And they don’t always tell you they don’t.
Lea Alcantara: Yes.
Emily Lewis: Because it’s intimidating to say, “Oh, you just used this big fancy word and I just gave you a bunch of money for this big fancy word, but I don’t know what that word means.”
Lea Alcantara: Exactly, exactly. So when you kind of have this perfect storm of knowledge that you think is common, but isn’t, and then talking to someone who is intimidated by that, you kind of get a disconnect.
Emily Lewis: [Agrees]
Lea Alcantara: And I think in our industry, that’s where a lot of problems stem.
Emily Lewis: [Agrees]
Lea Alcantara: Problems in sales.
Emily Lewis: Yeah.
Lea Alcantara: Problems in the middle of a project.
Emily Lewis: [Agrees]
Lea Alcantara: And just overall, what it boils down to, it is that communication aspect.
Emily Lewis: Yeah, and even at the end of a project or six months later.
Lea Alcantara: Yes, absolutely.
Emily Lewis: Because their expectations of what should be happening six months after launch were skewed from the beginning.
Lea Alcantara: Yeah, exactly. So what we decided to do to prepare for this episode is we did talk to one of our clients to get her perspective specifically just to truly understand because, again, there are a lot of people who pretend they know what web design development are, but they actually don’t understand all the nuances, you know?
Emily Lewis: [Agrees]
Lea Alcantara: And then we hear all the time from both prospects and clients a lot of misunderstandings about the web.
Emily Lewis: Oh, you even see it in RFPs.
Lea Alcantara: Right.
Emily Lewis: How many times have we seen RFPs with you can sense that someone just grabs some buzzwords, but it did not context from this solves the business need like, “We have an audience that needs X; therefore, we need this technology.”
Lea Alcantara: Right.
Emily Lewis: It’s just we need this technology and it’s because there’s a sense from people who are outside of our industry, but need our services of the best way to get those services is to throw our technical terms back at us, which we know what those terms mean. We don’t need that. We need to understand their business.
Lea Alcantara: Exactly, and they need to understand why it’s good for their business.
Emily Lewis: Exactly.
Lea Alcantara: And if all we’re doing is throwing acronyms at them without relating those pieces of technology to how their website is in service of their organization or saving money or making them money, then the value of what we do is lessened in their eyes.
Emily Lewis: [Agrees]
Lea Alcantara: Explicitly or implicitly.
Emily Lewis: I think it’s also worth mentioning because this is something that’s particularly to Lea and I. We want our clients to like working with us.
Lea Alcantara: Absolutely.
Emily Lewis: Not just like the work we do, we want that, but we want them to like working with us, and part of that is helping them feel empowered during a process that can be confusing and it has high stakes.
Lea Alcantara: Absolutely.
Emily Lewis: Like websites are typically big investments for people, even if it’s perceived as a smaller budget in the grand scheme of things, it’s still an investment and it’s still important to our clients and we want them to feel that we’re not going off into our own little bubble and they’re not part of the process. We want them to be a part of the process not only so we can understand their business, but they can understand each part of what we’re doing and can contribute to it so that they get the best results so that their expectations are clear.
Lea Alcantara: Yeah, absolutely. I mean, if you do take a look at it in like that business perspective, all the marketing dollars that you put towards the web has a higher ROI than, say, other traditional forms of media and marketing.
Emily Lewis: [Agrees]
Lea Alcantara: And yet, there still seems to be a struggle to selling to services or having a good relationship with clients.
Emily Lewis: [Agrees]
Lea Alcantara: And I think it is because people haven’t defined these terms clear enough and don’t translate these terms in ways that clients understand that it benefits their business.
Emily Lewis: Exactly. So there’s no way we are going to be able to do this in one episode… [Laughs]
Lea Alcantara: Yeah. [Laughs]
Emily Lewis: It’s just not possible, so we’re going to aim for four episodes this year, one a quarter, and like we said today, we’re going to focus on web design as opposed to like front-end development or CMS development. We’ll tackle those in later episodes.
Again, we’re going to try and describe web design from its most broad definition and including areas that people within the industry feel are specialties and may not even be labeled as web design amongst our peers, but I think the point is we don’t want to be pedantic in this discussion.
Lea Alcantara: [Agrees]
Emily Lewis: We want to try and be open to defining what we do in terms that clients can be comfortable with. So if I refer to something [laughs] as information architecture and I define it in a way that just really rubs you wrong because you’re an IA specialist, you know let that go and think about the point of this. It’s really about the client. This is not about educating new people to the web design field, and I think it’s also worth mentioning, Lea and I agreed that this is an experiment. We’re not really sure how long this episode is going to go, so it might be a little long or we may find ourselves cutting it off midway through or we split it into two episodes. We’re just going to see how it goes and make the decision when it’s done.
Lea Alcantara: Yeah, because this is a complex process. In the end, this is kind of a language learning [laughs] episode.
Emily Lewis: [Agrees]
Lea Alcantara: And we’re right at the vocabulary section of that and all those nuances.
Emily Lewis: Right.
Lea Alcantara: But let’s get started with that. Let’s start with how we talk to clients in general.
Emily Lewis: Yeah, I think what you and I have learned, and we talked about this with Ilise Benun last year with our marketing episode.
Lea Alcantara: [Agrees]
Emily Lewis: It’s really important on our blog to not use industry terms when we’re blogging to our clients or when we’re writing our About content to our clients, and the same is true when we’re talking with our clients. If you’re dealing with a tech-savvy IT department, and we have a couple of clients like that, that they know the terms, they know the buzzwords, so speak in that language, but also recognize that if you’re dealing with marketing, PR or other stakeholders, they may not share that same fundamental tech vocabulary or understanding.
Timestamp: 00:10:15
Lea Alcantara: Right, right, absolutely. Like for example, do you have to say, “We are going into the IA phase of your project.”
Emily Lewis: [Laughs]
Lea Alcantara: When maybe you should say instead something like, “We’re next going to take a look at your site content, your priorities and your audience goals to decide how the content should be organized on your site, right?
Emily Lewis: [Agrees]
Lea Alcantara: And I mean, that’s a lot more verbose than saying, “This is now the IA phase.”
Emily Lewis: Right.
Lea Alcantara: But it’s a lot more descriptive, it’s a lot more specific and relies a lot more about business concepts as opposed to the technical aspect. So while to us, IA is the shorthand and we all understand that, when you’re talking to a client like the marketing person or even the CEO of a business, they might not understand what you’re talking about unless you phrase it more descriptively.
Emily Lewis: And I think it’s also worth maybe taking it a step further to explain why maybe in that same example the reason why we need to organize your site content is that you’re the expert in your business. There are a lot of things you do that seemed obvious to you but not to us, and this process helps us make sure that your site is useful.
Lea Alcantara: Right. And I can’t emphasize enough that it’s important to explain the why.
Emily Lewis: [Agrees]
Lea Alcantara: Because you can’t just say, “Well, this is the process and this helps me…”
Emily Lewis: [Agrees]
Lea Alcantara: They’re paying you to go through this entire process and they need to understand the value of each point in the process.
Emily Lewis: [Agrees]
Lea Alcantara: And sometimes, again, when they’re intimidated by the entire process without explaining why and just getting, everyone just gets frustrated.
Emily Lewis: Yeah. In fact, that was something that when we spoke with our client, she particularly pointed out about the IA phase.
Lea Alcantara: Yes.
Emily Lewis: It was an incredibly overwhelming to her because we took a big global look at her content and then we just kept drilling down. [Laughs]
Lea Alcantara: Right.
Emily Lewis: And that if you’ve done it, you know it can be intensive.
Lea Alcantara: Right.
Emily Lewis: And it wasn’t something I think she was prepared for and this was – what – three years ago?
Lea Alcantara: Right.
Emily Lewis: We did not take the time [laughs] to explain it to her the way we’re trying to do in this episode.
Lea Alcantara: Right.
Emily Lewis: And so it was overwhelming to her and I think she found it to be the most, “Why on earth am I going through this? It’s so difficult. Why do we have to do these things this way?” She just had a lot of whys, but she didn’t say that to us when we were going through it.
Lea Alcantara: Exactly.
Emily Lewis: It was only after the fact that she said it was overwhelming, so we’re just tip-toe-tip-toe-tip-toeing, moving along.
Lea Alcantara: [Laughs] Yeah.
Emily Lewis: And she’s getting frustrated and we weren’t even aware of it, and this was a happy client the whole time and still is a happy client so she still had frustration.
Lea Alcantara: Absolutely.
Emily Lewis: So I think it’s realizing that.
Lea Alcantara: Yeah, and I think that leads us to our next point, don’t hesitate to repeat yourself throughout the entire engagement.
Emily Lewis: Right.
Lea Alcantara: So because she kept that inside, if we were to do this engagement again, we would have explained it a lot better in the first place.
Emily Lewis: [Agrees]
Lea Alcantara: And while she was doing it, we’ll probably repeat ourselves again, maybe rephrasing it in ways we finally understand she gets as well.
Emily Lewis: [Agrees]
Lea Alcantara: This is something our listener, Andrew Armitage, actually mentioned on Twitter, “Communicate often.”
Emily Lewis: [Agrees]
Lea Alcantara: Don’t assume that just because you explained the IA process of organizing content during the kickoff, so you’re like, “Okay, I’ve explained it.” Will that client remember that three weeks when you finally get to that phase?
Emily Lewis: [Agrees]
Lea Alcantara: You should repeat yourself and don’t be afraid to do so because they’re going to forget. They have their own business to run.
Emily Lewis: And you could even take it a step further. When you’ve completed that phase and go into the next one, repeat it again.
Lea Alcantara: Yeah.
Emily Lewis: Remember when we organized your content? That’s going to help us as we do this next thing.
Lea Alcantara: [Agrees]
Emily Lewis: It’s tying it all together.
Lea Alcantara: Absolutely. And in service of trying not to intimidate them as well, Andrew also mentioned on Twitter, “Communicate little.”
Emily Lewis: [Agrees]
Lea Alcantara: We definitely agree with that. We think that’s quite smart. So like don’t answer questions that haven’t been asked, like don’t bombard them with your intelligence and technical skills and they already know all of that, they hired you.
Emily Lewis: [Agrees]
Lea Alcantara: So you need to make them comfortable in this process. Don’t overwhelm them; just get straight to the point.
Emily Lewis: Exactly. I think even though we want to speak a common language, there’s also the reality of industry terms.
Lea Alcantara: Right.
Emily Lewis: Because clients hear these terms and phrases. They go to conferences. They put together RFPs that have them in them and a lot of them are technically-sounding terms that may confuse or intimidate clients. So as much as we want to speak in terms that they understand and we don’t want to overwhelm them.
Lea Alcantara: [Agrees]
Emily Lewis: We do have to recognize that it is our vernacular. It would be almost impossible for us to never say terms like IA or user experience design because that’s how we communicate.
Lea Alcantara: Right.
Emily Lewis: So what we need to do is build a common vocabulary for the project. So we mentioned these terms. We don’t shy away from them, but it’s like, “IA process of organizing content.”
Lea Alcantara: Right.
Emily Lewis: So instead of we’re doing IA, we’re doing the IA process of organizing content.
Lea Alcantara: Right. So even if it sounds a little redundant to us because the term IA is organizing content, to your client it isn’t.
Emily Lewis: [Agrees]
Lea Alcantara: It’s just now reminding them and associating those concepts together, so that’s definitely interesting and important, and all of that, actually, it all really starts with understanding where our clients are.
Emily Lewis: [Agrees]
Lea Alcantara: Like who are they and what type of communication will they connect with.
Emily Lewis: [Agrees]
Lea Alcantara: So for example, what industry are they in. I would suggest that you should try to use metaphors and analogies that they would understand. So for example, if they’re a builder, we use the metaphor about home building.
Emily Lewis: [Agrees]
Lea Alcantara: And that actually works for anyone who’s built or remodeled the home for themselves or who’s addicted to HGTV.
Emily Lewis: [Laughs] Totally.
Sponsored by
Lea Alcantara: So it’s definitely an analogy I would use regardless of what industry your client is, but if you can be specific to their industry when you’re explaining these industry terms, you’re also demonstrating you understand their business, which demonstrates your value further.
Emily Lewis: [Agrees]
Lea Alcantara: So you’re not just another technical arm for them, you’re somebody who’s actually understanding their business in that what you’re doing is in service of their business.
Emily Lewis: Okay, so with that sort of stage set of the overall approach we want to take when speaking with clients, let’s get into the topic, the huge topic of web design from a client’s perspective.
Lea Alcantara: Right.
Emily Lewis: So let’s start with just the umbrella, theme, whatever you want to call it, web design itself.
Lea Alcantara: So the term “web design,” even within our own industry, is controversial.
Emily Lewis: [Agrees]
Lea Alcantara: Because it encompasses so many things.
Emily Lewis: [Agrees]
Lea Alcantara: Now, when we talk to our client, she actually described it more like what we in the industry would refer to as user experience and interactive design.
Emily Lewis: [Agrees]
Lea Alcantara: It’s specifically sad that to her, web design is what do you want the end user to do when they’re on the site, and then conversely, how do you want them to feel. She believes that web design is what fulfills that aspect, how you want the web visitor to feel.
Emily Lewis: Yes. And she’s pretty astute [laughs].
Lea Alcantara: Right.
Emily Lewis: Because I was really surprised and pleased to hear that because web design is indeed both of those things among many others, but I think if we were to get even more basic, and I think it’s important to keep definitions basic for clients, web design is the visual bridge between business goals and consumer action.
Lea Alcantara: Yeah.
Emily Lewis: It’s a way to reflect your brand online, and I just wanted to say that does not make any assumptions about non-visual users, but that I think is the most basic definition that most client’s will connect with.
Lea Alcantara: Yeah, absolutely, and since we brought up the builder analogy earlier, comparing building a website to building a home, I think, has a lot of parallels.
Emily Lewis: Yes.
Lea Alcantara: So in this context, web design is the house plan, its layout, and the interior decoration.
Emily Lewis: [Agrees]
Lea Alcantara: Like figuring out where to place things so that the home is useful and how to make it look like your unique space so it feels like home.
Emily Lewis: Yeah, I like that.
Lea Alcantara: Yeah.
Emily Lewis: And I think that’s something that a lot of people can relate to regardless of what their technical understanding is.
Lea Alcantara: Yeah, absolutely.
Emily Lewis: So, as we mentioned, web design is a broad term, a broad field, that encompasses specialties. Those specialties typically correlate to almost phases of an overall process of web design and so we wanted to sort of put or couch those phases, those specialties in terms that clients could understand.
Lea Alcantara: Right.
Timestamp: 00:19:57
Emily Lewis: So let’s start with IA or information architecture, which we were actually describing earlier.
Lea Alcantara: Right. So let’s go back to the home building analogy. So IA is very much like working with an architect, right?
Emily Lewis: [Agrees]
Lea Alcantara: You go work with an architect to figure out, say, what rooms you need and where they should go, like where you want the kitchen to be, where do you want the bathrooms, but more specifically, where do these rooms need to be in relation to each other.
Emily Lewis: [Agrees]
Lea Alcantara: For example, do you need easy access between the kitchen and dining area. Maybe you need the kitchen close to the laundry room. I don’t know. So for a website, IA is the process of figuring out what content you need like text, video, images, et cetera, and two, how that content should be organized including in relation to each other.
Emily Lewis: And this process, to take it just a little more specifically to the website, so it directly affects things like the site navigation or if the client wants to promote a product with another product or guiding the user through the site to get more information. So all of those things directly affect the site.
Lea Alcantara: Yeah, absolutely, and then the deliverable for you as a vendor would be wireframes, which are essentially blueprints for your website just like an architect would give you blueprints of your house.
Emily Lewis: Right. So if we ever hand over wireframes or even discuss wireframes, I always use the analogy of a blueprint because to me it is a blueprint. [Laughs]
Lea Alcantara: Yeah, well, it is.
Emily Lewis: Blueprint of the site.
Lea Alcantara: Yeah, absolutely, absolutely.
Emily Lewis: All right, let’s talk about user experience, which also goes by the acronym of UX.
Lea Alcantara: Right. So let’s continue on with this home building analogy because this is a pretty good one. So when you’re talking to a contractor or, say, an architect about how you want the house to feel to your family, user experience is really how you want your family to experience the house.
Emily Lewis: [Agrees]
Lea Alcantara: So for example, do you want an open concept layout so that everyone feels like everything is integrated.
Emily Lewis: Right. Everyone is in the same room, even though they’re all doing different things.
Lea Alcantara: Exactly, exactly, or are there practical things that you need to take into consideration like easy access from the mod room to the kitchen when the kids got home, right?
Emily Lewis: [Agrees]
Lea Alcantara: So for a website, this could translate to similar descriptions like easy to get from the home page to your case studies.
Emily Lewis: I even feel like when we were working with Gina, the client we spoke with for this episode, these were the kind of things that when she was talking about how she wanted her website to feel, it was like she was describing home. She’s like very open and airy.
Lea Alcantara: Right.
Emily Lewis: And things like that help you as a designer, Lea.
Lea Alcantara: Absolutely.
Emily Lewis: If say airy, what does that mean to you as a designer?
Lea Alcantara: Well, I would immediately think about layout and how things are related to each other and that we shouldn’t clutter the page.
Emily Lewis: [Agrees]
Lea Alcantara: That’s like my first immediate thought visually when somebody says airy, right?
Emily Lewis: [Agrees]
Lea Alcantara: I mean, we could go down a little deeper of a rabbit hole, but yeah, like just even having those types of descriptions that aren’t a 100% related to web design, they could really apply to almost anything that can be designed.
Emily Lewis: [Agrees]
Lea Alcantara: But having these types of descriptions definitely helps me as a web designer.
Emily Lewis: Yeah. So the user experience is, again, really how you want the person to experience the website or experience your home, you know?
Lea Alcantara: Right, absolutely.
Emily Lewis: Is it open and comfortable or is it very narrow and guide you specifically how you need to go along versus giving you 20 paths to get to a place.
Lea Alcantara: Right, right, and one isn’t more right than the other.
Emily Lewis: Right.
Lea Alcantara: For example, if it is a website, an information website, say, for a hospital, it would definitely make sense to have a lot more straightforward paths and structure, absolutely, versus one that’s a more marketing concept where you’re trying to make a user feel something and experience something so that they attach those experiences to the brand.
Emily Lewis: So we’ve talked a little bit about IA and then we moved on to UX, so that’s information architecture and user experience, and we do typically move in that fashion in terms of what we’re discussing with the client, how we’re moving through the design process, and then those two things kind of lead to the user interface design or UI design.
Lea Alcantara: Right. And I think this is what a lot of people in and out of our industry think web design is.
Emily Lewis: [Agrees]
Lea Alcantara: Because UI or user interface design is largely the process of designing the visual interface of the site, which is essentially what does this site look like.
Emily Lewis: Yeah. And I guess if you wanted to put it in the home building analogy, this would be both the process of designing the layout of your kitchen with the architect as well as the process of what your kitchen looks like after construction with the interior designer.
Lea Alcantara: Exactly. Now, you’re dealing with the details of paint color and swatches and the tile and the surfaces, et cetera and so forth, but you still first have to talk to the architect over saying, “I want the sink over there and the stove over there, right?
Emily Lewis: And so if you take that and apply it to a website, the interface design includes the layout of pages and the look and feel, how your brand translates to the web. A deliverable for UI design that we do often, and Lea, we talked about this with Samantha Warren, right, of Style Tiles.
Lea Alcantara: Right.
Emily Lewis: We called it an element collage.
Lea Alcantara: Right.
Emily Lewis: And it’s a lot like those design boards you see on home improvement shows with swatches of paint and fabric that give you a vibe of the design.
Lea Alcantara: Right.
Emily Lewis: Well, an element collage gives you a vibe of the website design, typefaces, some colors, and some potential ways content can be organized around each other.
Lea Alcantara: Right, absolutely, and the point of that entire exercise is you want to have something like that before you actually start painting the walls, so to speak, in a home.
Emily Lewis: [Agrees]
Lea Alcantara: Which you can’t take back very easily so that would be a good starting point for the UI phase of a project. Now, once that is done, just like in a home, once the swatches have been approved, once the element collage has been approved, then we go to the other more common deliverable that everyone knows in UI design, which are comps. So comps is also an interesting term that we also take for granted that we think everybody understands, but when we actually brought this up to our client, they weren’t a 100% sure.
Emily Lewis: [Agrees]
Lea Alcantara: I mean, they knew what it meant, but they weren’t a 100% sure. So I mean, the long story short, it really is what it sounds like, comps is short for composition.
Emily Lewis: [Agrees]
Lea Alcantara: It’s now going to be the accurate representation of what your site will look like without any interactive or clickable elements yet.
Emily Lewis: [Agrees]
Lea Alcantara: So that’s what a design comp is.
Emily Lewis: And just to take a little aside, Lea, I guess maybe before I really got into the web, I’ve heard these called mockups. Is that another common term? Is that like kind of a derogatory term for comps?
Lea Alcantara: [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: No, no. Mockups, I think, is also a common term like interchangeable with comps.
Emily Lewis: [Agrees]
Lea Alcantara: But I do believe that comps is a lot more common these days when people talk about them, and I also want to say like all the industry people listening to this*, yes, there are some comps that have interactiveable, clickable elements, but for the purpose of this show and also explaining to clients to keep things simple, just explaining to them that it’s now going to be an accurate representation of what your site will look like is the easiest way to explain it. Otherwise, they think it’s already a website.
Emily Lewis: Right. And if you are a designer, the front-end developer, and want to know more about some of these deliverables we’re talking about, we have a whole episode on that last year.
Lea Alcantara: [Agrees]
Emily Lewis: Or was it in the year before?
Lea Alcantara: Oh, I can’t recall right now.
Emily Lewis: Well, it was the one with Samantha Warren, I believe, where we talked about design deliverables.
Lea Alcantara: Yes, yes, right.
Emily Lewis: And so we go into a little bit more detail in those sorts of things. We’ll have a link to that in our show notes.
Lea Alcantara: Absolutely.
Emily Lewis: Oh, and another aside, if you don’t mind, Lea, so we’ve described or defined some terms, anyone in the industry know there is probably like at least four dozen more terms like predefined, so what we’re going to be doing is blogging about this idea of client-friendly information in mind because we want to have these kind of resources for ourselves and our clients, but also for our sales prospects, and one of the first pieces we will create is a client-friendly glossary for terms like in-browser or static or web app.
Lea Alcantara: Right.
Emily Lewis: One of the things that really sets Lea and I apart, I think, what sets Bright Umbrella apart is we really do connect with our clients and after all the help with Ilise last year with our marketing, we were learning how much we have to emphasize that in our content.
Lea Alcantara: [Agrees]
Emily Lewis: And so the blogging is going to help us with that, and it will help you along the way, so subscribe to abrightumbrella.com or follow us on Twitter @abrightumbrella and you can get new posts as soon as they come out.
Lea Alcantara: All right. So now, let’s talk about web design as a process that we follow for our projects.
Emily Lewis: All right.
Lea Alcantara: How would you describe that, especially in relation to the other parts?
Emily Lewis: I mean, I think the home building analogy is still great for this. To me, it’s like the perfect analogy for a home, building a home, or even just remodeling a room.
Timestamp: 00:30:06
Lea Alcantara: Right.
Emily Lewis: All of the different phases or specialties that we just defined are interrelated and build off each other.
Lea Alcantara: Right.
Emily Lewis: So you can’t decide what color your kitchen walls are going to be until you first determine where the walls will be.
Lea Alcantara: Right.
Emily Lewis: Which means you have to figure out where you want your sink and your fridge and your oven.
Lea Alcantara: Right.
Emily Lewis: And so as we described earlier, the IA phase informs the UX phase informs the UI phase. They’re all part of web design, and then taking that a step further, web design is just one part of building a website. Just like the color of your kitchen walls and where the sink and fridge are going to be located, they are just one part of building a home. When you’re building a home, you also have the foundation.
Lea Alcantara: Right.
Emily Lewis: And then you’ve got to frame the walls and then you’ve got to put the sheet rack up and all that other stuff.
Lea Alcantara: Right.
Emily Lewis: For a website, those parts are considered web development, which we will be tackling in the next episode, but you can’t do the web development until you have the web design.
Lea Alcantara: Yeah.
Emily Lewis: You can’t lay the foundation until you have the blueprint for the house.
Lea Alcantara: Yeah, absolutely.
Emily Lewis: So I hate to say it, but if something goes wrong in one of the earlier phases, the best thing to do isn’t just to push through. The best thing to do is to take a look at where you are and where the project could be shifted or you know. It’s not best just to go ahead and soldier on even though, “Oh, wow, we completely got our content organization phase wrong.”
Lea Alcantara: Right.
Emily Lewis: Because you’ll have a website, but it probably won’t do the things you wanted it to do.
Lea Alcantara: Right, and if we take it to the home analogy, it’s like, “Okay, I’m going to pay for this interior decorator to make my house look nice, but I won’t repair this leaking foundation.” Right?
Emily Lewis: Right.
Lea Alcantara: So it’s like, “Okay, I’m going to pay a ton of money to make this all look good and feel like home and yet my basement is flooding.” Right?
Emily Lewis: [Agrees]
Lea Alcantara: And so that’s why it’s so important to invest a lot of time in the earlier parts of a web project, all of the things that we mentioned with information architecture and user experience, so that all the things that you see that you might thing is only web design is actually just the surface part. We need a good foundation for the entire site.
Emily Lewis: Exactly. Also, to describe the process of building a website, just like building a home, you could go custom or you could go with a model home.
Lea Alcantara: Right.
Emily Lewis: So if you go custom, you spend some time with the architect figuring out what rooms you’re going to have, where they’re going to be located. You’ll spend more time with the interior decorator adding wall coverings and special lighting. You probably have a bigger budget and you have more time.
Lea Alcantara: Right.
Emily Lewis: The same is with the web. So if you have the budget for a highly-custom website, we can spend more time on your information architecture, closely examining all of your content to decide what you need, what you don’t, what should be related, et cetera.
Lea Alcantara: Right.
Emily Lewis: If you have less of a budget, we may just focus on the content you have and organize that.
Lea Alcantara: Right.
Emily Lewis: We won’t spend any extra time calling or figuring out what can be created or even considering that there might be opportunities for new content. We’ll just work with what you have.
Lea Alcantara: Right.
Emily Lewis: So essentially, budge is sort of dictating how in depth we can go in the different phases of web design, how much time we would spend on information architecture or user experience.
Lea Alcantara: Yeah.
Emily Lewis: But that said, for a smaller project, we may not even have dedicated phases to IA, organizing the site design, but it’s still happening as part of the design.
Lea Alcantara: Yes, absolutely. So even if you pick the model home, for example, they don’t put a bedroom in the garage just because you didn’t tell the architect the bedroom needs to be on the second floor.
Emily Lewis: [Agrees]
Lea Alcantara: There’s still established patterns and standards that we rely on.
Emily Lewis: And that’s the part that makes the web a little intimidating for clients is that those established patterns, they don’t know what they are, and that’s hard for us to translate, and instead of trying to translate that, which I think is what we’ve tried to do in the past, translate the higher level. Don’t get into those minutiae of how we know what to do.
Lea Alcantara: Right.
Emily Lewis: Just explain that we understand you’re picking a two-floor home and your bedrooms are going on the second floor. That’s an established pattern.
Lea Alcantara: Right.
Emily Lewis: We don’t have to go into how we know that and what the city permits need to be and all that stuff.
Lea Alcantara: Right, exactly, exactly.
Emily Lewis: So I think those things, I think those are good ways to describe a web project as a whole without really getting into any of the technical stuff. It’s hard to just describe it as this iterative process that’s all interrelated and all dependent on trying to get the right information in the phase that precedes the next phase so that everything is proceeding as expected.
Lea Alcantara: Yeah, absolutely, and I think one thing we need to remind everyone is that not only should you be describing your project in these phases in web design in layman’s terms that they understand, repeat how it relates to improving their business.
Emily Lewis: [Agrees]
Lea Alcantara: Because remind yourself why did they hire in the first place, right?
Emily Lewis: [Agrees]
Lea Alcantara: It’s not because you’re the best web designer or the best web developer, it’s because they feel that this website is going to improve their business.
Emily Lewis: [Agrees]
Lea Alcantara: And so throughout the entire process, if you can not only explain things in terms that they understand, but explain how, “So when we decide to organize the site this way, this means more people will contact you.” Right?
Emily Lewis: [Agrees]
Lea Alcantara: It’s those types of things.
Emily Lewis: Oh, I love that. I think that applies to the specific deliverables most importantly.
Lea Alcantara: Yeah.
Emily Lewis: What was that piece you wrote for us about justifying design to a client?
Lea Alcantara: Right.
Emily Lewis: So it’s this idea… well, you talk about it. You wrote blog post. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: When you hand something over to a client to get their understanding of where you’re coming from, why you chose a given approach.
Lea Alcantara: Yeah, absolutely. So a lot of it really is kind of just breaking down the user experience and information architecture actually. So you would go throughout the layout, when to say like, “Okay, which one stands out? So okay, if this stands out, did you want that to stand out? And does this thing or element or content or image that’s standing out in service of your business?”
Emily Lewis: Well, yeah, and I feel like even if it’s not a full-on project, even if you’re doing a small thing, like we just hand it over a comp to a client for really some adjustments to a web page.
Lea Alcantara: Right.
Emily Lewis: And you basically were like, “I chose this approach because it achieves these two goals that you said were your priorities, and then I chose this because it does X, Y, Z.”
Lea Alcantara: Right, right.
Emily Lewis: So it’s not just talking about the process, it’s also about your design decision, why you chose to go those routes.
Lea Alcantara: Right. And specifically, again, tying it back to what they asked you to do really, as in, “Okay, this will get you more clicks to do this. This fulfills the CTA. This is going to give you an ROI because X.” Right?
Emily Lewis: [Agrees]
Lea Alcantara: Or if it’s not a 100% tied to a specific action, does this reflect your brand?
Emily Lewis: [Agrees]
Lea Alcantara: Does color means this? And depending on how deep any of your discovery projects are, “The research shows the users were affected by these colors.” Right?
Emily Lewis: [Agrees]
Lea Alcantara: So every time you discuss your design decisions, not only do you have to describe it in ways that aren’t overly technical, explaining them in a way that they understand, always tie it back to why you’re even designing in the first place and how it’s in service to their organization or business goals.
Emily Lewis: So well, actually, it wasn’t really a question, but it was more like a snarky comment on Facebook. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: But our friend and listener, Ian Pitts, mentioned that he struggles to get content of any kind to support his web design work, and I used to work with Ian and I know [laughs] what he’s talking about. So we, as the practitioners, we know how critical content is for the web design process.
Lea Alcantara: Right.
Emily Lewis: So how do we explain this to clients because telling them it’s important doesn’t seem to usually move the needle very far?
Lea Alcantara: [Laughs] Right. I mean, just saying the word, “It’s important,” that doesn’t really do much. But let’s say we go back to the home building analogy, not having content for a web design is like saying, “Okay, I want a house, but I have no idea if I want two bedrooms, three bedrooms, two baths, or a laundry room.” “Well, what do you want in this house? Like how can we build this house? How can we even start the plans if you have no clue what you want in that home?” Right.
Emily Lewis: [Agrees]
Lea Alcantara: Or even details like, “Did you want a laundry and a hall closet? Or what are the ways to enter the bathroom?” Those kinds of things, right?
Emily Lewis: [Agrees]
Lea Alcantara: But you can’t even discuss that until you tell me how many bathrooms you’re going to have. Are we going to have full bath, like two full baths or just one full baths? Those types of things, right?
Emily Lewis: Yeah, it’s the same with the website. If you just say, “Well, we’re going to have some texts on the page,” that’s like saying, “We’re going to have some rooms.” [Laughs]
Lea Alcantara: Right. [Laughs] Right.
Emily Lewis: Well, what kind of text?
Lea Alcantara: Right.
Timestamp: 00:39:57
Emily Lewis: Are we talking headings? Are there going to be block quotes? I mean, and like let’s just take a simple blog post.
Lea Alcantara: Right.
Emily Lewis: Do you want to have a block quote? Do you want to have an image with a caption? Do you want to have an image without a caption? Like these are all things that we will need to know so that we can make sure that when your site goes live and you enter a blog post, that your block quote looks like a nice pretty block quote.
Lea Alcantara: Yeah, absolutely.
Emily Lewis: If we were never informed that that was a requirement, if we never got a sample blog post that had block quote content in it, that might not have been included in the design.
Lea Alcantara: Right.
Emily Lewis: Now, that doesn’t mean you can’t add it. A website is this living, breathing sort of thing.
Lea Alcantara: Right.
Emily Lewis: And so that’s something that we can add, just like if you decide you want a third bedroom, but you built your house for two, you can put an addition on your house. It’s really though more expensive than if you knew that to start with, you know?
Lea Alcantara: Right, absolutely.
Emily Lewis: If you know you need these things to start with, then that’s factored in from the beginning as opposed to an addition that has to be done separately.
Lea Alcantara: Right. And I mean, we don’t live in an ideal perfect world where everyone has completely finished content or complete ideas about a home.
Emily Lewis: [Agrees]
Lea Alcantara: If we do a home building analogy, if you’re discussing with your builder saying, “Oh, I think I’m going to have two bedrooms,” that builder is probably going to be like, “Well, the value of your home will probably be better with three.”
Emily Lewis: [Agrees]
Lea Alcantara: So you can always knock down a wall if you want to make it two bedrooms, right?
Emily Lewis: [Agrees]
Lea Alcantara: And that’s going to be easier than trying to shove in a third bedroom, and so in web design or development, when you’re trying to talk about contents with clients, you really do need to ask about, “Okay, well, even if you don’t have anything completely complete, do you believe that we’ll need this section?”
Emily Lewis: [Agrees]
Lea Alcantara: Those types of, you know…
Emily Lewis: Samples.
Lea Alcantara: Yeah, exactly, those types of samples and discussions. We were just talking with another client over saying, “Okay, fine, you don’t have your content yet and I can design without finished content, but at least I need to know how many headlines I need to work with here.” Right?
Emily Lewis: [Agrees]
Lea Alcantara: Because that can turn to an ongoing thing because just how many headlines you can have on a site, and you can just be like, “Well, the design rule is you should have maximum of three headlines” and we’re like, “Okay, are you saying that you’re only using a maximum of three fonts, but what about the side bar? What about advertising stuff, and do we need to differentiate advertising tax too main article text, right?
Emily Lewis: [Agrees]
Lea Alcantara: And then without that information, it’s hard to design.
Emily Lewis: Yeah. I think it would be worthwhile if you find other ways to talk about content with your clients. It would be worth listening to our episode with Stephanie Morillo last year on copywriting.
Lea Alcantara: Yeah.
Emily Lewis: Because she talked a little bit about what she likes to work with and how she likes to get started and how content does affect the web design process.
Lea Alcantara: Right.
Emily Lewis: We also have another episode in our archive, Steph Hay. We did a content-first design episode and that really emphasizes how content can really guide the entire project because it’s so important at the beginning.
Lea Alcantara: Yeah, absolutely, and I mean, again, the web, the way we’re describing a lot of these things kind of waterfall-ish, kind of like step one, step two, step three, but almost everything that we just said can be done simultaneously and usually is because they’re so interconnected that they almost have to be.
Emily Lewis: Yes.
Lea Alcantara: But for your client, trying to bunch things in ways that are digestible for them so that they can understand, I think is really important so that they understand your value throughout.
Emily Lewis: [Agrees]
Lea Alcantara: And then when you continue to do this, then by the time it’s at the end of the project, no one is surprised, right?
Emily Lewis: [Agrees]
Lea Alcantara: Like I actually hate like ten years ago, there almost always was this big tada moment at the end to show the design, which is kind of like the old school way.
Emily Lewis: [Laughs]
Lea Alcantara: Like it was a huge mystery on how you go from “I need a website” to suddenly it’s designed.
Emily Lewis: [Agrees]
Lea Alcantara: The process that we’re trying to go through is literally that demystifying part, right?
Emily Lewis: [Agrees]
Lea Alcantara: We’re now pulling back the curtains so they understand every single point of the project, and the more clients understand that, the better we are as web designers and developers and professionals and the better our industry will be.
Emily Lewis: Yeah, that’s really what we’re trying to do here. We’re trying to make sure that we aren’t disserving ourselves, you know?
Lea Alcantara: Right.
Emily Lewis: We’re not screwing ourselves anymore by continuing to try and talk about our technical skills.
Lea Alcantara: Right.
Emily Lewis: Because that really only gets you so far. You may have been doing okay, but at some point, you’ll hit a wall where you’ve got to somehow differentiate yourself and that can only be done if you can speak to your clients in a language that they understand.
Lea Alcantara: Right. And I mean, I feel like there’s also this underlying frustration that nobody gets what we do.
Emily Lewis: Yeah.
Lea Alcantara: But…
Emily Lewis: We don’t take the time to understand it.
Lea Alcantara: Yeah.
Emily Lewis: Yeah.
Lea Alcantara: Exactly. That’s kind of our fault. That’s on us. It’s because we’ve been perpetuating this mystery of tada-ness at the end of the day, and then of course using terms that are highly technical that make it sound a lot more exotic than they actually.
Emily Lewis: Well, I am really impressed, Lea, we are under an hour.
Lea Alcantara: [Laugh]
Emily Lewis: What? [Laughs]
Lea Alcantara: What? Oh, no! Woot-woot!
Emily Lewis: And this is the first time we’d ever done that with the two of us.
Lea Alcantara: Well, we did. We did cut off a lot of things that we wanted to say.
Emily Lewis: We did. We were afraid this is going to turn into like a 2-hour episode, but I think we established a nice pattern for how we can approach these topics in the rest of the episodes, and I think this is a good foundation to start with, I hope.
Lea Alcantara: Yeah, I hope so.
Emily Lewis: [Laughs]
Lea Alcantara: And I mean, I’m really curious for any of our listeners, like what kind of terms do you use with your clients and how would you describe it?
Emily Lewis: [Agrees]
Lea Alcantara: I mean, Emily and I went completely ham on this home building analogy.
Emily Lewis: [Laughs]
Lea Alcantara: But are there any other analogies that would work?
Emily Lewis: [Agrees]
Lea Alcantara: I’m sure there are and I think right now we’re talking to the home building stuff, but if you’re client is not in home building, they have no clue. Find it. What is their industry? What kind of terms do they use and try to translate it using their terms?
Emily Lewis: Yeah. I think also if you don’t want the home building analogy and you can’t quite do their industry as a one to one to web, just pick up anything that has a creation aspect to it, anything that you’re making.
Lea Alcantara: Right.
Emily Lewis: It could be maybe you’re setting a garden.
Lea Alcantara: Right.
Emily Lewis: You’re starting from scratch to garden and you have to figure it out. We’re doing this right now. We’re figuring out our layout for the backyard.
Lea Alcantara: [Laughs] Right.
Emily Lewis: We have to think about what we’re going to grow, our content, so we know how deep the beds need to, all that other stuff.
Lea Alcantara: Right.
Emily Lewis: Or a recipe, you know?
Lea Alcantara: Yes, yes.
Emily Lewis: Anything where you’re making something, I think you can draw a line to it from web design, because that’s what we are doing, we’re making something.
Lea Alcantara: Yeah, absolutely. But before we finish up, we’ve got our Rapid Fire Ten Questions, and this time, it’s my turn.
Emily Lewis: [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: All right. Lea, are you ready?
Lea Alcantara: Yes.
Emily Lewis: All right. Introvert or extrovert?
Lea Alcantara: Ambivert.
Emily Lewis: Ah, okay. The power is going to be out for the next week, what food from the fridge do you eat first?
Lea Alcantara: The cheese.
Emily Lewis: The cheese.
Lea Alcantara: Yeah. [Laughs]
Emily Lewis: The cheese stands alone. [Laughs]
Lea Alcantara: Yeah. [Laughs]
Emily Lewis: What’s your favorite website for fun?
Lea Alcantara: I am addicted to laineygossip.com. It’s basically a celebrity gossip website. [Laughs]
Emily Lewis: [Laughs]
Lea Alcantara: So I know way too much about Angelina Jolie and what’s happening in the Oscars.
Emily Lewis: [Laughs]
Lea Alcantara: But I mean, it’s just like candy.
Emily Lewis: Yeah.
Lea Alcantara: It’s like candy for your brain.
Emily Lewis: [Laughs]
Lea Alcantara: Yeah.
Emily Lewis: Or not. [Laughs]
Lea Alcantara: Yeah, yeah, exactly. [Laughs]
Emily Lewis: What’s the last thing you read?
Lea Alcantara: I’m still working through that, Never Split the Difference book.
Emily Lewis: Oh, the negotiation book.
Lea Alcantara: Yeah.
Emily Lewis: Excellent. What’s the best piece of professional advice you’ve received?
Lea Alcantara: That habits are everything.
Emily Lewis: [Agrees] What’s the worst piece you’ve received?
Lea Alcantara: Follow your dreams.
Emily Lewis: Totally. [Laughs]
Lea Alcantara: I feel like that’s the most empty kind of advice.
Emily Lewis: [Laugh]
Lea Alcantara: It’s also harmful.
Emily Lewis: [Agrees]
Lea Alcantara: I mean, the concept is lovely and romantic, but anyone who actually just thinks of that without actual planning and understanding what that means, that’s the worst.
Emily Lewis: Yeah. [Laughs]
Lea Alcantara: That’s the worst advice.
Emily Lewis: All right, what’s your favorite color?
Lea Alcantara: Pink.
Emily Lewis: Really? I didn’t…
Lea Alcantara: [Laughs]
Emily Lewis: I didn’t even know that, but our logo is pink. [Laughs]
Lea Alcantara: [Laughs]
Emily Lewis: All right, if you could take us to one restaurant in Seattle, where would we go?
Lea Alcantara: Ah, you’ve been asking me this question a few times in the past few years, so like, “Where would I go next?” Okay, you know what, I’m going to talk about not a restaurant, but I took your sister there actually last weekend, and it’s this trailer park in Georgetown in Seattle, and there is this cake bakery called Deep Sea Sugar & Salt.
Emily Lewis: Oh.
Lea Alcantara: And she makes the most amazing, amazing cakes, so I would take you there, because it’s also quirky. It’s like you go into this weird trailer park shopping experience. [Laughs]
Emily Lewis: Was it like those like the shops are the trailers?
Lea Alcantara: Yes.
Emily Lewis: Oh, okay.
Lea Alcantara: Yeah, yeah, yeah.
Emily Lewis: Cool. All right, what’s your favorite board game?
Lea Alcantara: It’s been a while since I played it, but Settlers of Catan.
Emily Lewis: Oh, yeah, good game.
Lea Alcantara: Yeah.
Emily Lewis: All right, last question, Hulu or Netflix?
Lea Alcantara: Netflix.
Emily Lewis: All righty.
Lea Alcantara: Yeah.
[Music starts]
Emily Lewis: So that brings up to the end of today’s episode. Be sure to check out our show notes for all the resources we mentioned today.
Lea Alcantara: CTRL+CLICK is produced by Bright Umbrella, a web services agency obsessed with happy clients. Today’s podcast would not be possible without the support of this episode’s sponsor! Thank you, Craft CMS! And don’t forget, HOW Design Live.
Emily Lewis: We’d also like to thank our partners: Arcustech and Devot:ee.
Lea Alcantara: And thanks to our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit ctrlclickcast.com. And if you liked this episode, please give us a review on iTunes, Stitcher or both! And if you really liked this episode, consider donating to the show. Links are in our show notes and on our site.
Emily Lewis: Don’t forget to tune in to our next episode when we will talk to Jess D’Amico about inclusion and diversity at Peers Conference. Be sure to check out ctrlclickcast.com/schedule for more upcoming topics.
Lea Alcantara: This is Lea Alcantara …
Emily Lewis: And Emily Lewis …
Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!
Emily Lewis: Cheers!
[Music stops]
Timestamp: 00:51:04
