17. Designing for impact: Exploring website styles and wireframes

Introduction

Let's dive into the world of impactful website design. You've got a visually stunning website, but there's just one hitch—it's not converting as you'd hoped. In our episode today, we have a solution that might just do the trick. Enter the realm of storytelling websites.

Here's the deal: a well-designed website is crucial, but what truly sets a site apart is the power of storytelling. It's all about crafting a narrative that captivates your audience, making them feel connected and engaged. And that's exactly what a Storytelling website does.

In today’s episode Simon Harvey and Daniel Kleber are joined by Austeja Dennehy, a web designer who will show you how you can become a digital storyteller, weaving together words, visuals, and user experience to create a captivating journey. With carefully crafted wireframes and a dash of artistic flair, Storytelling websites have the ability to turn casual visitors into loyal customers.

To help you create quality websites that convert, download the free storytelling website wireframe, which includes storytelling structure and techniques we discuss in our episodes, here (or copy and paste the link below):

demodia.com/storytelling-website-wireframe

---

Join marketing experts Simon Harvey and Daniel Kleber on Authentic Marketing, the biweekly podcast that provides proven marketing tips to improve your marketing efforts and help your business grow.

Subscribe to our biweekly episodes dropping Friday on your favourite podcast platforms like Apple Podcasts, Spotify, or any other.

Book a consultation with our Authentic Engagement coaches to help you navigate through the jungle of the business world: demodia.com/sales-marketing-review

Demodia Instagram: instagram.com/demodia_digital

Demodia LinkedIn: linkedin.com/company/demodia

Episode Transcript

You know how important it is to have a website that reflects your brand and captures the eye of your visitors. When your design falls flat, you can feel your audience heading towards that exit. Whether you're building a website for your business or yourself, Designing for impact is an essential aspect of the process. It's about crafting an experience that visually inspires users, but clearly communicates your brand's message. However, designing a website that stands out, but still connects with your audience can be challenging, especially if you're not a seasoned designer. On today's episode, we introduce our guide to storytelling website design and unveil four simple steps that will elevate your design game and ensure your website makes a powerful impact. Successful website designs are more than just aesthetically pleasing layouts. They have the power to tell a story. evoke emotions and leave a lasting impression on your visitors. So let's get started. Hi there and welcome to the Authentic Marketing Podcast in association with Demodia, where we give you actionable advice and help you create marketing that works. I'm your host Simon Harvey and I'm joined by my co host Daniel Kleber. Hi there Daniel. Hi Simon. Hello listeners. So for the last few weeks, we've been talking about AI and how to use it to support your sales and marketing, but Daniel, this week, you'll be glad to hear I've actually managed to get back to my day job, and I've been working on a couple of new websites with customers, which has been really great. Oh,

nice. That's good to hear. I hope

they're coming along well. Yeah, it's been good to get back to, you know, I know you're into all the modern AI and things like that, but I still love the more traditional marketing tools like websites, if you can call it traditional. Yeah, one of the most interesting parts of creating a new site for me is the journey of discovery. You know, we go through that with every customer whilst they're planning their site and trying to decide how they want things to look and feel. And this is the part that I really like. I don't know how you go about doing it, but I usually ask them to create a mood board of ideas, you know, containing elements from other websites that they particularly like or dislike. And I always find that really eye opening, it's a really good exercise to go through to see some of the things that they come back with, both positive and negative. What sort of

things do you mean? Have you got any interesting samples that you can

share? For sure, yeah, yeah. There's a couple of interesting ones that made us laugh in this latest project. I'm not going to give out any names of companies just to protect the innocent. But there's several websites that I must say appeared on the negative board, and they look really terrible. We made us all chuckle. I don't know how well established these companies were, so I'm not gonna... Name them, but it did look just like they've been given to a student as a project in the background, the pages had no real structure, the colors and images and things were all over the place. There was no consistency inside there. And there was just a mixture of fonts. I think even something pulled out comic songs in there somewhere. God, I can't remember the last time I saw that. Yes.

I know exactly the sort of thing. I've seen small business sites like that all the time, and I can understand why, you know, they maybe don't have the money or technical skills to make a better site. That's true, yeah. But in the end, it still

doesn't look great. Yep, yeah, exactly. Yeah, that's one thing that we did agree, actually, though, you know, sometimes no website is better than a bad website. Even if you've got a well established small business that's great at what you do, the trouble is these days that the first place any prospects look is your website. And if that site looks terrible, it just reflects on your brand. And they see it as a reflection of your overall work capabilities. So, you know, I mean, from your perspective, what makes a good website for you, Daniel? Well, there's

definitely one great example that comes to my mind immediately. Whenever I think of a good design and I'm talking about Apple's website.

Oh, of course. Yeah. Yeah.

Specifically, it's design and user-friendliness really make it stand out from others. They kept it relatively simple and plain, but it still communicates what solutions Apple provides for potential customers in a really clear

way. Yeah, I agree. They're absolutely the extreme when it comes to budgets, the opposite direction. But, you know, Apple's website really is designed for everybody, you know, whether you're a young digital nomad or, you know, an elderly pensioner that doesn't spend much time on the internet, the design works, the structure works inside there. They've really spent a lot of time thinking about that for sure. That said though, Apple does a really great job of this, but design I think can go too far in the opposite direction. So another site that came up on this mood board the other day was a site from a, actually another web agency. Um, and one of our customers actually really liked it, so we had quite a bit of discussion about this one. Trouble for me was that I'd say they put design before function then, you know, it looked really good. There was lots of interactive elements on the page, you know, some really cool and then, you know, I'd say really quite unique elements inside there that I hadn't seen before. But when we discussed it, um, we decided actually it didn't work. And the reason that we decided it didn't work is when I asked everybody to tell me what exactly this company did, you know, how they were going to help them. No one could find the answer to the question. You know, they got lost in the clicks. They were all absorbed in all the fancy, whizzy UI elements, but they just couldn't find the information that they needed. So, you know, one warning I'd give you definitely is that whilst unique design is great, that shouldn't come at the expense of clear communication and an intuitive experience.

I know exactly what you mean. I really like sites that push the limits and show what can be achieved, but corporate websites need to provide information efficiently. Definitely, yep. I've seen a lot of corporate websites that look really impressive, but at the end of the day, You don't know what

solution they provide. And that's exactly my point. Communication is the most important function of a website. Yes. So that said, you know, of course you can communicate on different levels. Plain text is just one way of communicating, but these days with websites, you can use videos, you can use images, you know there's lots of things within the design of the website that you can use to help you communicate.

And you have to align each level of communication to tell users what they want to know, how you can solve their problem. Aligning your communication on all levels makes your online presence strong.

Yeah, you've hit the nail on the head there, definitely. A strong online presence is crucial for all businesses these days, whether they're focusing on selling to consumers or to businesses. So, the key elements that make up a great website have to be on point, otherwise your competition is going to leave you standing. And earlier this week I got to sit down and talk with Asteya, one of the designers that works here at Domodia. And she talked me through what I thought was really interesting, four key elements that every website should focus on that she considers when she's designing a website. So I think, listen to this interview, you're going to learn a lot, uh, and pick up a lot of good things from my conversation with Ustea. So, thanks for joining us today on the podcast, Ustea. So maybe you could just introduce yourself quickly and tell us a little bit about yourself and what you're doing here at Demodia. Thank you very

much, Simon. So, I've been working in Demodia for quite a while and I work mainly with web design and graphic design and, uh, As well, now I'm working with content creation. So looking after our social media and as well creating our blog posts and other material we

need. Cool. So we've been talking, Daniel and I were chatting earlier about design within websites and just really looking at how Design is sort of really important to getting across your message, basically inside there. And one of the things that we've been talking quite a bit about is this, this concept of user experience. Um, I think maybe what would be a good point to sort of start with, can you tell us a little bit more about, you know, what is user experience? What does this term mean exactly? And why is it important for website design generally?

So it's actually very important because that's what you think about. When you start designing the website, user experience, it refers to the overall experience of what user has when they're interacting with your website or any other digital product in that case. And it really focuses on creating a seamless and enjoyable experience. Cause what you want is someone not to get lost in your website and. That's what user experience is about, how well your website is designed, how well they can find things, how easy it is to navigate, how accessible it is. So it really talks about that. Overall experience we have when we enter a website.

So definitely says it's really important. It's everything that a user feels when they come into the website and the first experience to keep using that same word that they have of you basically when they come inside there.

Exactly. It's so important not to get lost when you go somewhere because then it throws you away from there and you don't want to. Enter that area again. So if you go on the website and let's say on the commerce website and you want to buy something and at the end, if you can't find the checkout, you'll possibly just abandon your shopping cart and go somewhere else where you can easily do that. So yeah, it's very important.

You're talking about navigation and how to do things. So from a sort of a design perspective, how does somebody go about creating a website that's visually appealing then and easy to navigate?

Well, um, I would say first thing you want to do is define your target audience and see who your customer is. And let's say if we think about the storytelling, think about who is your hero. So who is coming to your website? Who is entering your story? If our customer is from the banking industry, an executive, for example, you are really not going to look at the pinky colors. Swirly fonts, funny images, because they are very focused, they are, have very serious and focused way what they are looking for, and vice versa, if you, let's say you're renting out the bounty castles for the parties, you really don't want to go to very... dark themes. You don't want to use a lot of black, dark green, dark blue, and really strict fonts. You want to create that celebration on your website already for your customers to experience what they're going to have when they get your, that bounty castle delivered. They want to have a party. So start that party on your website already.

So you want them to take away a feeling from the design of the website, basically, in there that helps them to understand how you're going to transform them. So as you say, a bank would be a much more serious feel inside there, trustworthy feeling, and your bounty castle would be much more entertainment. It's going to give you a happy child and a happy life or whatever inside. It's going to entertain you, basically. And you want the website to entertain you as well, I guess,

then. Exactly. It's all about the emotion at the end of the day. We have on the website all... the content, which, you know, explains about the business, explains about the solution, but what really engages the customer is, uh, that emotion. And The first thing you get that from is the visual. Imagine going on the date or meeting someone new. The first impression is usually the visual. It's the interaction and then later on you get on talking and that's when you go into the details but Again, the, the visual is a very strong thing for us as humans. We see, and then we get attracted to the things, to people. So the same with your website. If it's visually not appealing, then it's most likely after a few seconds, your customer

will just leave. Yeah, it's interesting. You mentioned that the visual part is the thing that sort of attracts initially, but then you said the conversation, I guess, afterwards is the part that, you know, actually engages us and wants us to stay basically at that point in there. So given that this is the sort of the section talking about design in here, what do you have in terms of recommendations for images? You know, I see a lot of. People just pictures of people staring at laptops or something like that. And I also see quite a lot of sites with, you know, just various different random images all over the place. Do you have any guidelines or recommendations to listeners as to what they should choose and how they should go about choosing images within their

sites? Images are so important. It's one of the main. things on your website. Your content, your copy, of course, is very important, but the first thing which catches your eye is images. So what you want is really a very, very consistent theme with your images. Because again, if you have an illustration on one page, the photo on another page, then again, some completely different style photo. When you scroll down the page, you know, somebody will think, am I still on the same website? Am I still looking at the same company? So what you want is really very consistent theme of your images. And then. what your images have to show is the transformation. So you want to show what the world will look like after they have chosen your solution. You want to show that happy ending, the success story there. And you want with your images to spark that emotion. of how they will feel when they choose your solution. So

images are really part of that whole storytelling process. I guess that's really an option or one of the first possibilities you've got instead of just using words to use visuals to actually show how you're going to help and what you're going to do in there.

Yeah, exactly. On your website, you are sharing your story. You have a storyline, you have a, you have a hero, your customer, who has a problem, and you are the guide who guides them to the success, basically. So throughout your website, you want to show that visually, if you have a website, which has a lot of visuals, that's when you want to embrace that every section of your story with a relevant image. And of course, you have to think that all of those images are. Working together that they are consistent. Well, even if we are thinking here about the visual, you know, about the design of the website, but nice colors and pretty pictures is not all you have to have a really good content on your website. Not too much, not too little, but really well laid out and which tells the story of your

business. So you've mentioned storytelling actually, maybe you can elaborate on that a little bit more and tell us more about how does, how do you use story or how do you build story then into the sites that you're creating?

So basically. You need a successful storytelling strategy for your website. And one of the ways to do that is to have a wireframe. I would say you really need to have a wireframe. And what we are using is the storytelling framework. And we have the whole set wireframe for the website. Which you can basically fill in and it already guides you what you need to have on the website, what you need to focus on, on the website.

So just for those that aren't familiar, what is exactly a wireframe?

So wireframe is... It's, it's like an essential tool really when creating your website design. So it provides like a visual representation of the webpage, the structure of the webpage, the, the layout, but it's typically quite simple, um, black and white or grayscale diagram, basically, which you fill in with your content, with your copy, with your images. And then you can share that around in your organization to align everyone with what that message is. And then you will submit this framework, ideally to your web designer, and then they can create it from there.

So it's a little bit like the blueprint that you get or the CAD drawings that you get when you're building a house or planning an extension or something like that. You need the, the simple line drawings to start off with before you get into all the fancy 3D renderings of what your actual apartment's going to look like, I guess, in there then.

Exactly. It's like your structural planning. So you create the structure for your website. And then you can really easily share that within your organization for anyone else to add to that. And it's a very good way to start building your website and designing your website because it's actually a very cost and time effective way to do that because you don't want to start building a website, you know, spend hours and hours on development and design. And then. It ends up that your stakeholders, they don't like what they see, you know, what they read there and you have to start all over again. So this is a very good way for everyone to have an input in that very early stage. And it gives you quite a visual layout on what you're going to see. And then you can start building from there. So we here use a really. I would say great wireframe because it's based on storytelling and that means it's very clear in one web page you go with your customer through the whole Story and they know what to expect at the end so Everything starts with the hero banner where you explain what does your customer want? You sort of answer the questions. What do you do? And as well you talk about how does that make their life easier? Their life better. And then you go on to the results your customer wants from you, what the results they are going to get if they are choosing your solution, but it comes to the point in every story where we talk about the problem, because if there is no problem, then there is nothing to solve then, you know, why are you there? So you have to always have this section. where you go into the problem. What is the main problem your customer is experiencing? And you give some specific examples of that problem. That includes emotion because emotion is very, very important here. You need to show them the empathy and the empathy is very important nowadays in business. And because we don't want to be seen just as a customer, we don't want to be seen as someone who just opens up the wallet. We want to be understood and

cherished. Yeah, I think that's really important. And I see so many people missing this section or being afraid of including this information on their websites. So many companies just jump straight from that sort of what do we do into all the features that we offer inside there? And they don't include that section, which really talks back to the customer and says, Yes, we understand that you have a problem. You know, you wouldn't be coming to us if you didn't have a problem. And connects to them at that sort of emotional level by explaining, yeah, we know you've got this problem when we know that's how you feel because of this in there. And I think that whole empathy and being authentic side of things, as you say, is so important these days. Absolutely.

Yeah, exactly, because you need to go into that problem to show your solution then. So that's the next step, actually, what you're talking about. You show what you believe they deserve. What is that solution you can offer them to answer their problem. And then you list your solutions. You tell your customer about them, about your promises, your guarantees. Then you need to not forget to add in testimonials because it's very, very important. You need to show the authority as well. And you know where that authority is coming from. Is it for testimonials from your happy customers, maybe some awards you. God for your products. So, you know, it's a, it's a lot of ways you can do that, but you need to have a testimonial why your customer needs to trust you. And then it goes on to the plan section. So you need to show them the plan. And

what's the plan exactly?

So always think about three, I would say four maximum simple steps to show to your customer, to your hero, how you will solve their problem. You need to tell your customers how easy it is to do business with you. So, you know, in this section, I will, could call it a little diagram, let's say, where you show your exact three steps of how they will get on doing business with you. First thing, maybe they need to book a meeting with you. Next, they will receive a uh, plan from you and then what end result they will

gain by doing it. I know we talk about this a lot when we're talking about the storytelling process and this whole sort of call to action idea and the fact that, you know, heroes don't act until they're called to action in there. But they're also afraid at this point in time because they don't know exactly what's on the other side. You know, they don't know what's going to happen when they actually click on that call to action button or fill it in. And I think, yeah, that plan is so essential to explaining to them, as you rightly say in there. What's going to happen here? They're going to fill in this form or get in touch with you in some way. They're going to have some interaction with you or some exchange, and they're going to get some initial value out of that interaction, and then, yeah, there's going to be some sort of transformation that goes on in there. I think that's so essential to explain with insights. Definitely. Yeah, because it

makes it clear, they know what to expect and they know what they are getting into. And then one of the last sections is. You talk about how does your product or service solve your customer problems. So you can have a bit more copy, a bit more text here. I always suggest having a nice video or a visual here as well to show that transformation your customer will experience. How will it make their life better? If you are selling holiday packages, you want to have a visual of You know, happy people enjoying the sunset there, because that's what people are looking for. And the final part of your website, it should be the lead magnet, or what other thing we call it is like the transitional call to action. Because maybe your customer, they gone through all of this process through all of your story, but they are not really ready to commit yet. Maybe they are not ready to buy, but they want to have something from you. So that's where you can give them an asset. They can use the asset, which would be useful for them in the meantime. Well, until they are thinking to make that decision to engage with you. Really into by and the one most important thing possibly on your website, which I didn't mention so far is call to action. Oh yeah. Yep. And basically when I was going between each and every section, that's after each of these sections, you should have a call to action. It seems to be over. whelming with that, but it actually isn't because the one of the biggest even design issues I see and the biggest user experience issue I see often on the websites is not enough calls to action because you made your decision, you want to buy, you want to book a consultation, and then suddenly you have to look, Oh, where should I do that? You know, I can't see it, I can't find it, I have to go to the page back or maybe click another link to take me there. So if it's too many steps, it just gets too much for us and then our brain says, no, no, that's too complicated. I'm not, I don't want to

do this. Yeah, I often use the example of like a supermarket or whatever, you know, supermarkets have the checkouts right by the doors. It's really obvious where you've got to go to pay for these things. You know, if they hid them away in the changing rooms or something like that, you'd never find where they are and nobody would ever buy anything. And it's exactly the same with your website. Those calls to action need to be everywhere where people are, everywhere where they want to interact with you and potentially make a purchase or book a meeting or start a free trial, whatever it is that you want them to do at that point,

definitely. Exactly. And as a designer, I always say they need to be really, really clear, really prominent. You really need color there. It needs to stand out.

It's interesting. The other thing I was reading about that calls to action, they were saying the most prominent and the most effective call to action Is an orange button in the top right hand corner of the site. And, uh, it was interesting reasoning behind that is that everybody has been programmed by Amazon basically. And if you look at Amazon's website, when you click on the top at the bottom in that shopping cart, you get a little dropdown with a yellow button inside there. So I thought it was a very interesting sort of programming that we've all been subjected to over the years.

Yeah, exactly. But I mean, who haven't shopped on Amazon?

Well, that's true enough. Yeah. I mean, that's, that's great to go through those sort of bits in there. I mean, that's, that's fantastic. And I know you've put together a template that goes through exactly what you've just talked through inside there. So we'll share that with all of the listeners. You can go into the podcast description and find a link to that download inside there. So we'll make that available to everybody. Yeah,

exactly. You can download that. I mean, I use that myself all the time with every. new website or with every website I need to update because it's so clear it tells you exactly what you need to have where and just makes your life so much easier.

Fantastic. So I think we're drawing to a close from a time perspective today. Is there any last comments or anything that you wanted to add at all? So, uh, to

conclude, I really think you need to have a structure. That's the first thing. Think about the structure. Think about download our wireframe and fill in all of those sections. When you think about your design, always look at your brand guidelines. When you are creating a website, you don't want it to look completely different from your logo, from any other material you have anywhere else. So always think about the consistency. If you have a company and your logo is. It's orange, black, and yellow. Don't go creating your website using blue, green, and purple. Always think about the brand consistency and then always think about images. Always go for really quality, nice images, which fit your theme and which shows that transformation.

Cool. Well, thank you very much for your time today, Esther. It's been great to have you on the show. Great to get your sort of insights and particular. I think people are going to take a lot away from that wireframe that you went through in there. I think there's a lot of useful content and useful information that people can use to build their own websites from that. So thanks very much for joining us today.

Thank you so much. It was really very nice to share all of this with you. Thank you.

Thanks for staying for sharing that knowledge. Yeah, I think that was a really good conversation. In particular, I thought of stairs comment on how similar the relationship is between personal attraction and websites. You know, it's absolutely spot on, um, in both cases. The first thing that we're attracted to is, you know, how something looks, how someone looks, how the website looks. But ultimately, that's not the thing that makes us fall in love and commit. You know, relationships are built on communication. What's said and how we say it. So, think about the looks when you're building the site, absolutely. But don't do that at the expense of your content. You know, never forget it's the copy that's ultimately going to sell and it's ultimately going to seal the deal. So if you're having problems designing or optimizing your website, then you can hire an authentic engagement coach. Just go to demodia. com to hire a coach that will show you how to increase the effectiveness of your website and give you an easier way to grow your business. We're at the point in the show again where I like to give you a set of concrete actions that you can take to help improve your website and drive your business through your sales pipeline. I'm feeling quite controversial today, so today's advice is going to be direct and simple. Your website, as we've said, is the first place that people go to get an impression of your business. It's make or break, probably before you even knew that there was a relationship to be had. For that reason, what I want you to do today is to go to your website, whatever it may look like, And take a close look at it. And I want you to ask yourself this one simple question. Does this website that I'm looking at represent my company and the way I would like it to be seen? Does it represent who we are? If the answer to that question comes out as no, then now is the time you need to do something about it. You need to get your web developer to start working on a new design, and you need to create copy that tells your story. If you don't have the time or the skills to do that in house, then now's the time to hire a freelancer or an agency or someone to help, you know, they're all over the place at various prices. My controversial bit now is I'm even going to go as far as saying that if your site is one of those that looks like it was built by a student in the 90s, then take it down. Put up a simple holding page or something like that with just your contact information on while you rebuild your site. That's going to help you out as much if not more. As it stands at the moment, your website's probably doing you more harm than good. So that will probably help you far more. So it might seem like a lot of work, but your website's the foundation for your business these days, and any money and effort that you put into improving it is going to be returned numerous times as your business grows, I promise you. So that's all for today's episode of the Authentic Marketing Podcast. Thanks as always for listening, and don't forget to bookmark the podcast and share it with your friends and colleagues. We love to share our knowledge so that we can make your business succeed. See you next time.