Coolfire Website Design Update

[00:00] Hello, hello, everyone. Good morning. Happy Wednesday. Now that you guys are out of your post or in your post Halloween coming back to it, I figured I would give you something fresh to look at here. So

[00:10] I'm going to walk through basically two versions of what I think the website could be. And I say could be because there's a big old asterisk. I've been playing with trying to actually build on

[00:20] the current WordPress sort of environment and the little builder that's in there.

[00:30] It's really difficult. I think that's the long and the short of it. It takes a really long time to do anything and to get it to look correct. So

[00:40] given just the kind of the scope and you know the idea that we're trying to kind of give it a facelift, there really is no easy way to do that. There isn't like an easy way for me to kind of

[00:50] roll something out across the board because every page is built independently of every other page. And so there are no components. There are no shared styles. It doesn't really work that way.

[01:00] Instead, it's basically loading in a theme or a style every time you place an object, which is just not a sustainable way to build a website.

[01:10] But what I tried to do is see how could I design within that using codecs?

[01:20] Which is a version of chatGBT that basically allows me to kind of work back and forth between Figma and then hopefully build into the WordPress environment.

[01:30] So I did a little bit of a rundown of how the WordPress environment is built and the editor that we'll be using and then basically use those restrictions to then kind of

[01:40] marry that to the usual design system that I typically use when building any of my websites, which without getting into the details, is basically a

[01:50] flexible system that puts things in simple groups and is sort of easy to edit and keeps the complexity limited. It's an easy way to kind of think about it.

[02:00] So with that, I then kind of went through the site and was like, okay, what were the things that I actually want to do here? What are the things that I want to achieve from just the perspective of where the website currently is to

[02:10] some future state that we want to be in? With the goal of kind of improving SEO, right? This is sort of in parallel to the other

[02:20] AI based SEO campaign that we're going to be running. And then kind of, you know, focus it on lead generation, right? So there's some span between those two, which is what the new website design is supposed to focus on.

[02:30] And so there's a couple of methods there that I'm trying to implement

[02:40] mostly around the idea of keeping folks on the site and then allowing them to go to different portions of the site such that we can get a better understanding of what they're doing

[02:50] or what they might be interested in or who they, you know, what cohort they might fit into. So the website is this new design. You'll see two designs here. Both of them are intended to effectively show the way that

[03:00] we could structure and use content to keep people in a three clicks to convert

[03:10] sort of methodology, which is to say that wherever they land on the site that within three of their clicks they will hopefully be filling out a form or, you know, scheduling a demo or whatever the form is that we wanted to take.

[03:20] That would be the goal. So, okay, that's kind of the high level. That's sort of where we're at with this. So what you're looking at is basically Figma designs that are mock-ups of what the site could look like

[03:30] or close to it. You can see that there are things like the width of the button and that kind of stuff

[03:40] which I'm just sort of riffing on in here because I don't necessarily know all the logics of how the page be built, but they would be close basically.

[03:50] There's also a difference in fonts. There's a licensed font on the website. I don't have access to that font here. It doesn't really matter. I picked one that's close enough that we can use for the mock-ups and then once the sites or once all this is moved to

[04:00] WordPress, all of those styles would be sort of fit in. Okay, so I'm going to walk you through two of them. I'll just sort of talk over them and then

[04:10] at the end I'll kind of give you a high-level comparison, sort of like what to do next, and then I'm sure you'll be hearing from me probably before you end up watching this in full.

[04:20] Okay, so the first version of the site. I'm just going to scroll through. This is the home page here.

[04:30] So on the home page, right, just having some high-level pieces about, you know, based in St. Louis. It's a collaboration capabilities piece. Obviously, this would be the video background that is currently there.

[04:40] And then we have a getting started and then a watch our reel. So a watch our reel would pop open a light box. And that way we can just type in, you know, whatever the most, you know, recent reel you want in there.

[04:50] But that would be kind of like the high-level one. Then scrolling down immediately below that gets into services. So the idea here is to really

[05:00] This is a screen recording transcript for a Voom video.

[05:30] This is a screen recording transcript for a Voom video.

[06:00] This is a screen recording transcript for a Voom video.

[06:30] This is a screen recording transcript for a Voom video.

[07:00] This is a screen recording transcript for a Voom video.

[07:30] This is a screen recording transcript for a Voom video.

[08:00] This is a screen recording transcript for a Voom video.

[08:30] This is a screen recording transcript for a Voom video.

[09:00] This is a screen recording transcript for a Voom video.

[09:30] This is a screen recording transcript for a Voom video.

[10:00] In here we would have the section about the studio, sort of high level, what the general process is, maybe a little bit about history, and then I think this gives a good place to actually put a lot of

[10:10] the culture photos. There's a lot of the behind the scenes photos, I think are really great, that we can incorporate in here a bit more. Then we can get the team and leadership in here, so

[10:20] reasonably there might be some more people in there. I'm aware of how the film industry works with contractors, and not everyone's always on the team and all that sort of stuff, so if we want to just keep it as leadership, that might be better, and then kind of fill in the

[10:30] other stuff with these behind the scenes shots that give you a sense of scale.

[10:40] And then there's also a partnerships page. This would be another landing page that, again, only from the footer, or maybe from that one partnership section, but this would sort of

[10:50] highlight a little bit more about what it is to be a partner with Coolfire, if that is the thing. And then internships. So this is another page that we have currently on the site.

[11:00] This, again, is really just designed to showcase what being an intern would be like,

[11:10] and then to actually see those posts. You can actually see where they are, view the program listing. I don't know where this is taking me. Oh, it's taking me to the live site. That's funny.

[11:20] But anyway, so you get the idea. So yeah, so that would be the first one. Then obviously, we're building out a blog, right? That's another portion of this. This part doesn't yet exist on the site. This would be the new piece. And so that would be very similar

[11:30] to the project setup in the sense that it would be a page that resembles a blog. It's a template

[11:40] that would get filled in each time. And this is where the SEO, AI SEO piece that we're building meets this world, right? Because all of that stuff would be populated by that system.

[11:50] Okay. There's also the customer story page, which again, is very similar to the projects.

[12:00] It's basically just allows for more information. So effectively, the moment that a project has more info, we can basically just call it a case study, and then it gets some of these extra fields that

[12:10] can go in there. And of course, I'm just riffing on what all these are, but you might have better data points and things that we might want to highlight. And there could also be other media

[12:20] here too, like images and other things like that. Okay. So that's version one of the site. If I jump over to version two, version two basically aims to offer a little bit of a

[12:30] different look and feel effectively for each of the different components. So I realize I'm going through a lot of stuff here and you'll be able to kind of compare afterwards. But generally speaking,

[12:40] all of the pages and the arrangement of the stuff that you've seen in the previous version is basically the same here. It's just been styled differently. So in the case of like the homepage

[12:50] here, if I were to jump to project A, you can see that the same stuff is there. It's just taking a

[13:00] different pass at how we might style it. So this one is basically less of having all of the heroes be these full screen videos. It's sort of a little bit more controlled and gets that a little bit

[13:10] more of a B2B style website than a kind of gallery media style site. So for what it's worth.

[13:20] So again, kind of scrolling down, you can see I'm also playing with like dark mode in this case, so that the site feels a little bit richer and serious in that way. And you can see that what

[13:30] used to be those just four sort of statements with the lines are now cards for each of the services.

[13:40] And then customer stories right here. So it's changing up the arrangement a little bit on this page. If I do a kind of quick compare, there's some services about cool fire, selected work,

[13:50] partnerships, customer stories. B is services. And then we jump right to customer stories. So

[14:00] making a relationship between the things that we do and then the success that we show for that. And then scroll down then into partnerships. So in this case, the grid of projects is not

[14:10] shown on the homepage. That can be kind of found throughout all the other services. If I jump to the commercial, you can see the heroes are quite different. I don't know if

[14:20] that'll allow me to kind of keep those pieces in place. It does not. Takes me to the homepage. Either way. So here's commercial. You can see this one instead of the big full screen video, we're putting the demo reel right here. So in the previous, the first version,

[14:30] it has a sort of button to launch the demo reel. This one would allow it to play right there on the frame. And then as we scroll down, the projects end up taking up that larger real estate. So

[14:40] the projects that we want to highlight for these different services can then kind of like really

[14:50] take the show and not be treated as background, right? In the current version, they're all like the backgrounds of the heroes.

[15:00] This is a video that you want people to watch, but then force them to read text in front of it. This case allows it to be like, no, here's the huge video if you want to watch it,

[15:10] and then here are the services, capabilities, whatever, that are related to this service. You can see these get more real estate. The last ones, they were sort of little cards.

[15:20] This one says, no, these are bigger things that we want to pay more attention to effectively. Client feedback in there, otherwise known as testimonials, and then a getting started section down here at the bottom,

[15:30] which again tries to get at that brand promise of kind of what would you get after you actually click the button.

[15:40] Okay. The other ones you can imagine are similar, right? They're all more or less using that same shared format. If I jump to the About Coolfire page, so this one leads a little bit more with the culture stuff,

[15:50] and then is more or less the same pieces of content going all the way down.

[16:00] You can see that this one just says, oh, maybe we could do a scroller instead, right? So just offering different formats for some of the stuff here. And again, the partnerships page in there as well.

[16:10] So, again, you get the idea that it's basically the same things kind of restyled, so that I can get a sense from you guys kind of the direction that you're thinking when it comes to the look and the feel.

[16:20] I would say one of the bigger ones that I'm introducing here for the second version of this is moving away from just having a form

[16:30] and into actually scheduling some time. So when I say that, usually everyone's like, no, my God, my calendar.

[16:40] Everyone's just going to book meetings all the time, blah, blah, blah. That could be the case, but there are basically some kind of gates that you can effectively put in place.

[16:50] So I'm going to quickly talk about why I think this is actually worth considering. And the first thing is when you fill out a form on a website,

[17:00] you really don't get any understanding of whether or not you're ever going to hear from this person, right? Which is probably why you guys also have your phone numbers on the site or direct email. So I would argue that having your direct email or your phone number is one just generally a bad idea for identity theft and spam.

[17:10] Not a good thing to have those two pieces there.

[17:20] You're basically giving three or four pieces of information, five really, because you have address, where you work, name, phone number, email. There's a lot of stuff already right there that you're just sort of giving away to spammers.

[17:30] So whether or not they're good spammers or bad spammers, right? It could be B2B spammers. The second piece is that when you fill out a form, you don't really know when you're going to ever hear from this person or how or if it goes anywhere, right?

[17:40] So there is a logic to sort of conversion on a website where if you give someone the ability to pick a time when they're actually going to be able to speak with you,

[17:50] that can go a long way in getting conversions on the site that are better quality leads.

[18:00] So it might be like, hey, we're not going to get as many people to fill out the form. Yeah, that might be good, right? You might want less just automatic trashy form fills and more real conversations with people.

[18:10] So that's sort of the argument for it. The issue about like, okay, the calendar will fill up or whose calendar and all that sort of stuff. All of those logics, there's plenty of software to deal with that.

[18:20] Yes, it's like another subscription. You'd be adding 30 to 50 bucks a month from any one of these different vendors. But basically, like this one I have is a mock-up of TidyCal, which is one that I use.

[18:30] It's really cheap. It's like 30 bucks once or something like that.

[18:40] But basically, it allows you to sort of sync some calendars, set availability, set some times when you want people to actually be able to select stuff,

[18:50] and then have a gate so that if they pick a time, it doesn't just automatically put the time on their calendar. It sends you an email and says, this is what the person's interested in. Like, do you want to accept this meeting, basically?

[19:00] And if you say yes, then it actually like initiates the meeting set up or call set up, whatever you want. You can have it just set up a phone call if you want or whatever. Like, there's a bunch of different options.

[19:10] There's routing in there. If you want certain people or certain types of requests to go to certain people, you can do that as well. And it's not a, like, oh, well, you're not going to capture any of that other lead data as far as forms and things,

[19:20] because you can have plenty of questions that are asked as someone's filling out.

[19:30] Name, company, email, yes, but also, like, what are you interested in? How did you hear about us? All those sort of things can also go in there. So think about that as a way of introducing lead capture on the site.

[19:40] I think it might be worth at least considering or playing with or maybe even just testing with, like, a smaller subset of the site or whatever.

[19:50] But, okay, that is the sort of overview of where I'm at with the new website design. The next piece for me here is to.

[20:00] Get some feedback from you all.

[20:30] https://www.coolfire.com

[21:00] www.coolfire.com