Screenburn Website v3 Update 1

[00:00] Hey folks, happy Thursday. Happy Thursday. So, big update here for the Screenburn site. This is obviously the first one you've seen since we chatted a few weeks ago.

[00:10] Appreciate your patience as I kind of work through getting all this stuff going. Plus, I know you guys are slightly distracted for the Halloween party, so I guess it's not that big of a deal.

[00:20] So, where are we at? Really high level. I would say we're a little more than a third of the way through kind of getting the site turned over. I, as you'll see, have done a first pass at all the pages that we need.

[00:30] And I think I've tackled the overall styling changes. So, that was sort of a big piece. It's kind of like rework all the styles and stuff without sort of breaking the existing site and, you know,

[00:40] defining something that fits a little bit more with what the brief had. So, that I took it as kind of stepping back on some of the intensity and the boldness,

[00:50] getting to a bit more of a kind of cleaner, more technical feel to the site, which I think I've achieved here.

[01:00] I'm trying to make it a little bit less, what's the term? Kind of AIE-ish and a little bit more of a kind of like harnessed brand.

[01:10] So, yeah. So, I took the Word document, sort of on one hand the Word document, the existing website on the other, tried to kind of cross-reference them and, as best as possible,

[01:20] put together the pages as much as I can without sort of starting to break or update live pieces of the site. That might not make much sense at the moment, but it will in a little bit.

[01:30] So, those new pages are a new homepage, the new work page, industry-specific pages, which are the CMS-driven ones, an offering page, which sort of replaces the packaging pages,

[01:40] and then an about page, which, of course, is like the company page, and then a getting started page. So, some of those are sort of changeover in theory.

[01:50] Some are not new. Technically, all the pages are completely new. So, I just made new ones, made it clean-built and kind of fixed some errors and stuff along the way.

[02:00] Okay. So, I'm going to go through each of the pages here and kind of highlight some of the stuff that I think is pretty interesting or cool and then some of the areas where we might need some more lift.

[02:10] So, just bear with me here. This might end up getting a little bit long. So, okay. Top of the – so, this is the homepage we land on. Obviously, you have the reel right here.

[02:20] You can see I'm trying to kind of get it. This is what the feel of the site might be. I'm using a skinned video player so that we don't have, like, the Vimeo branding everywhere,

[02:30] and you have this thing that kind of moves around, goes away if you let your mouse off of it, at least I think so at some point. Maybe it doesn't. We'll fix that. It's supposed to.

[02:40] Either way. The idea being that we have something that feels a little bit more part of the brand and isn't kind of like using existing players and stuff like that.

[02:50] As we scroll down, there's some text here and then, you know, the kind of the accolade pieces. We can have more of these or less of these and have, you know, edit the text as well.

[03:00] They also don't have to be a number, right? It could be something that just says, like, either, like, five million or five mil or, you know, some gold standard, whatever it is.

[03:10] Okay. Then below that, logos. So these ones is an example of where if I replace these, it would replace them on the live site. So I have to wait until we're at a point where we can change it over,

[03:20] and then I can swap all the images to be that white background. I know in the notes it also mentioned that there will likely be some other ones that we'll want to put in here

[03:30] and pull some of these out so we can go through that process. The landscape. So this one, not super exciting section. I could use some help as to kind of what you're looking for here for these.

[03:40] This feels a little bit slide decky. So I want to kind of figure out what to do there. There's some imagery on some of the other pages that might influence this, but I'll mention that later.

[03:50] Then we get to the attention piece. So, again, trying to kind of pull something kind of simple together here. We might end up with more of these and less text maybe.

[04:00] Also kind of made a graphic that tries to represent it. You'll have to let me know if I've gone sort of too far in the minimalist direction as far as kind of the layering and textures and stuff.

[04:10] Then we get down to the answer, and this is where the subscription service stuff starts to show up. These will be links that will take us to the Get Started page,

[04:20] and we can talk about some of the functionality there as we get closer. But the basis is all of them right now basically point to the same spot.

[04:30] Each one can obviously have its own image. These are all just placeholders. We're trying to get at kind of what it might look like. And then these pieces below here would be stuff that is kind of like across the board things that are either benefits or takeaways.

[04:40] Features are included regardless. There's more info on these on the offerings pages, which might end up influencing this more.

[04:50] But for now, this is where it's at. And then our process. So this one is obviously a piece that's repeated a couple times across the site.

[05:00] I would say I have a little bit more work here to kind of make these a bit more interesting. I just want to kind of get everything laid out first. But I would certainly want to go back and probably, you know, add something on the numbers,

[05:10] make the connections a little bit stronger, just make it a little bit more interesting than it is now. But, again, I wanted to kind of get all that stuff in. And then we have a base CTA.

[05:20] And I put in a kind of like graphic that I made as a sort of placeholder for now. It just sort of moves and gets at the idea of like multiple videos and things.

[05:30] I'm not sure about the wireframe stuff yet and kind of how we feel about that. But it's an idea. And then this is the getting started thing, jumps you to the landing page.

[05:40] When it comes to that flow, there was a little bit of back and forth in the document as far as like put the form at the bottom and everything. We can certainly do that.

[05:50] We can certainly put a form on each page. It ends up being more to manage. And I think it's easier and better for tracking to be able to see how a user moves through the site.

[06:00] So I tend to put all of the conversion points on one landing page at the end of the journey, such that we can see all the pages they went on before they got there.

[06:10] So that's what I've done here. So instead of it having a form, it has the getting started. It also gives the opportunity to have more of like an image there instead of just like slapping another form in. And on mobile, it's a little bit easier or nicer, I should say.

[06:20] Okay. New footer as well with the actual links. You can see these are all nonsense at the moment and sort of still have some of the old brand in there.

[06:30] They're kind of doing some of the glow. So some pieces will have to work out, but kind of, you know, getting the ball rolling here. Okay. Then getting into the work page.

[06:40] So this is another net new page. You can see that the general idea here is sort of the portfolio overall, looking at the work outside of necessarily its client or the industry.

[06:50] So up at the top, I'm putting basically a recent section. We can get into the functionality of this.

[07:00] I think recent is the easiest way to approach it. It keeps it always kind of fresh up there. A lot of clients will ask for, like, can I pin something or feature something? Yes, we can do that.

[07:10] Yes, you will also forget about it. So I think it's probably better to just let it cycle through and then have things that we may want to avoid ending up there. We can kind of filter stuff out based on different tags and things.

[07:20] Then scrolling down a bit, you can see that all of the rounded rectangle stuff, all of the sort of flowy, soft stuff is gone, right?

[07:30] It's much more technical with this kind of blurred glass feel. And these are the big cards that would take you to each of the different projects. Right now they are not linked.

[07:40] They will be linked. I'll show you what the page looks like. But, again, just kind of getting there as we transform all the pieces over. And then putting some filters up here such that we could have different ways

[07:50] of looking at the different work. So I'm putting them in here as the different industries, but they could be whatever, in fact, right?

[08:00] So you could have 30-second spots or if you wanted to do broadcast or whatever it might be, whatever the categorical thing is, we can use the filter there.

[08:10] Yeah, there's probably more I could talk about there, but I'll keep it brief. I also added an all section. So this is a list.

[08:20] You can see that the thumbnails are all making this all garbage in the way. But when you hover over that, the thumbnail is going to move with the mouse, so I have to kind of script some of that stuff out. So there's some pieces that need to work, but I wanted to give you a solid update.

[08:30] And then, again, down to the quote and to the CTA again, right? So you'll notice that the bottom half of the majority of these pages ends up being

[08:40] kind of the same formula, and that's intentional, right? We want users to feel like they're reaching the end point of the website but not leave them with nothing to do.

[08:50] So as they start to feel like, oh, yeah, I'm kind of getting down to the bottom, okay, maybe it's time to get started, that kind of thing, right? Behaviorally, usually like less than 50% make it that far anyway.

[09:00] So the goal is to keep them moving across the site. So over to the industries. So under industries, right now we have legal and retail.

[09:10] I just made those up. We can have as many as we want. These are the CMS-driven pages. So they're CMS-driven pages, yes, right now they're filled with static content

[09:20] because we need to actually populate all of those CMSs, which I will help you do. I'll provide a spreadsheet that will have everything we need to fill in.

[09:30] But before I get to that, it's better to just work out what we want these pages to look like such that we can match the fields. So I have an eyebrow on it. This would obviously change depending on what it is.

[09:40] We also have the ability to have the heading up there be specific to each one. Each one has a demo reel as well. So we can have a list in place.

[09:50] If there's no demo reel, no problem. That gets hidden and everything on the page just moves up, right? So all of these things become conditional and make it a little bit easier to work with.

[10:00] Not have to have every single piece ready to go to get stuff on the website. As we scroll down, we get into some of the actual projects.

[10:10] I'm sorry, my browser froze there. We get into some of the actual projects. So highlighting two, as per the brief there, this could technically go to, you know, as many as we want. I wouldn't

[10:20] make it more than three, frankly, for this size, so I think two is a good recommendation. And this, of course, allows you to play the video right here or go and find out more information about this project, because each project does have its own page as well. But for now, I want

[10:30] the goal to be such that you can watch it, watch it right here. So I have the default Vimeo player

[10:40] in at the moment. It'll be this sort of feel with a nicer, cleaner look. And then you can see we also have some tags and stuff up here that we can build up to give a little bit more people kind of

[10:50] a sense of reference. It's sort of like, what am I looking at when they sort of scroll through some of these things? So obviously, all of them right now are sort of the same, but if we have more,

[11:00] text is more appropriate or tags is more appropriate, that can help kind of clue people into stuff. And then you get the little piece of text. Obviously, you can see some of the stuff's

[11:10] already on the site. Like all these things are being pulled from the CMS as is. Back to the R process, right? So that same piece is in there. And then a similar grid for additional projects

[11:20] of that type in here. Now I'm looking at there's missing an eyebrow, which would say more work. And then we get into this same piece again, and then into the bottom, right? So you can see that

[11:30] there's probably some more to add to make these a little bit more specific to each industry, right? You might imagine that this graphic is not this, and instead on this page is more like a

[11:40] moving image of the law firm stuff. And I think grocery, and there's some other things in there. So those pages would have something specific to that. So that would be another thing that

[11:50] we would map in the field. The rest of these things are going to be more or less automated, right? As long as the projects are tagged appropriately, they'll show up in the right spots.

[12:00] Okay, then moving over to offerings. So this page is the one that's really focused on trying to kind of convey what you get and what the process is. Again, I kind of took what was

[12:10] on that document and sort of put it all in place here, tried to arrange it as best as I can. So

[12:20] some of these things were actually just like one sentence at the bottom that was like, yeah, and be sure to include blah, blah, blah. So I just sort of riffed on it, and some of this might not be right or might feel crowded or whatever it is. So just all feedback welcome, but just with the

[12:30] note, that's kind of where it's coming from. So we have these cards up here with the different packages, kind of monthly rhythm thing again. And then for the customizations, I'm trying to kind

[12:40] of start to show you what some of the graphics could look like, just sort of help illustrate some of these things a bit more and to make it a little bit more interesting. So you can imagine

[12:50] that we do something similar for maybe not for this one, but for the vertical process thing.

[13:00] And maybe there's a little sort of animation that happens for each one or on the homepage, where it's sort of like the kind of common problems or the landscape piece that might

[13:10] have some more of this sort of flavor to it, where we can kind of demonstrate a little bit of what we're talking about and not force the user to read everything. Okay, and then

[13:20] jumping to the about page. So you can see that I clearly need some more info here. I think there was a sales deck, which I think you shared with me via screen share. I'm not sure if it was ever

[13:30] sent over. I think it's referenced in the document. So if you could send that over, that might be helpful. It might answer some of these things. You can see the deck's version is more specific. That's

[13:40] literally what the document says. So there might be more info in here. And this section will probably get longer because I think it's more about like the origins. And then we have the

[13:50] meet the team section. So again, all of this stuff being pulled in from what was currently on the site. So if we need to adjust those, if we need to adjust the organization of it, such that it's

[14:00] not leadership team advisors and wants to be one big grid, whatever, we can do that. Still working through sort of the styling, I would say like this, I think it's feeling better. This still

[14:10] feels a little chunky and choppy to me. So some things I need to work out, but again, status update. Then our origins, right? So this starts to get it more of like the historical thing of

[14:20] where the company came from. I have this as our sort of like common generic placeholder image from the way, way, way original screen burn demo. But this ideally would be something that's

[14:30] more recent, but not necessarily something that's like a feature. Like, I don't think we need to

[14:40] have like Jim on or down here. I think it's more like something that shows a longer, like 30 second take of like a flyover or something that's more not with a bunch of jump cuts basically, and not

[14:50] super distracting. Something that would be a little bit more consistent.

[15:00] This one I thought actually was nice at the time. I think it was only like three seconds but that it would kind of like fly over the road or whatever so that it adds some movement without sort of taking away from the whole thing. And again into the same bottom piece down here.

[15:10] And then we go to the getting started page. So this is the you know an updated version of it. You can see just kind of like cleaned up the way that the whole thing looks and feels. Just

[15:20] edits here, you know, reducing down what it says. I think one of the big things here is

[15:30] conveying the trust to get people to actually convert. So I think this in this case it would be nice to have some image in the background. I was trying

[15:40] to resist that for the rest of the site but I think because there won't be else there wouldn't be much else on the page. This is our sort of opportunity to add that that depth and texture

[15:50] to it. So ideally we can have some sort of moving image kind of thing in the background. Another thing that I would need like a 10 second sort of looping cut for. Then one other thing I wanted to

[16:00] kind of bring up here is that we're doing a form which is fine, very standard. But there's definitely

[16:10] some opportunity to have like a calendar like request a time for a call which generally has a better conversion. I say that I'm sure you'll find data that says the opposite but it can offer

[16:20] a promise to the user a bit more right. If you just fill out a form you don't really know if you're going to get anything, you don't know how long if it's going anywhere, when am I going to

[16:30] hear back. When you schedule a meeting you get that well I got a time coming up you know. So even if I don't get an immediate response I'm going to talk for two days or whatever it is

[16:40] and that can be helpful. To that end the text that is on here this is what was currently on

[16:50] the site. We definitely need to rewrite this and rewrite these. The way to approach this would be we need to write the copy in a way that balances explaining how we're going to get started on the

[17:00] project without knowing what it is on the project that they want to do. But also conveying what they can expect to have happen after they fill out this form. So we'll reach out to you within two

[17:10] hours or whatever the thing is, whatever the SLA is. That's who you want to have that in here as

[17:20] well so that it'll increase the confidence of the user to actually fill out this form on some strange website right. So something to note there. Okay that's where I'm at with the sort of build

[17:30] of the actual pages. We will need to of course do mobile and all that sort of stuff. I tend to

[17:40] kind of work through it a bit but you can see there's some things that will just need to be fixed but for the most part you know there's some stuff that needs that's broken but

[17:50] I'd say about half of it is kind of already inherited some of that stuff from the previous site. But yeah so let's talk about the CMSs because I think that's where a lot of the other pieces

[18:00] live. So the CMSs previously we had basically projects. If I go to the existing site

[18:10] just to kind of show you, we basically had this big grid where we had all these different videos

[18:20] and I believe the behavior is that when you click on them it takes you to their page. Yeah so then it basically is on their CMS page and then it loads plays or whatever and you get some

[18:30] more projects out of it. Generally a good idea because every item gets a page that's good for SEO but it was just projects right there wasn't clients there wasn't like industries there wasn't

[18:40] all these other pieces and then they weren't necessarily tied together because they didn't exist yet. So now we have a few other CMSs in here. So we have projects which exist like it

[18:50] used to and then we can add as many as we want to these but then I've also added industries and

[19:00] tags. So industries is the CMS that's actually powering that page that I showed the law firms

[19:10] page the retail page whatever any other industries you want to add this is the one where it's going to take all those and auto build those pages such as long as that all the fields are sort of filled

[19:20] out. So you can see I started out in the fields we'll sort of finalize that once we lock in what we want on each one of those. Tags is a little bit different tags is also a CMS but there's no page

[19:30] that's generated for each tag it's just tags. So these can be helpful for us to use to filter later or to display on top of the project. So if I sort of jump back over to say like the work page

[19:40] you'll see that those fields are being pulled in right there's like the tags are getting

[19:50] placed on top there and then in this case they're being used.

[20:00] The industry CMS is being used to filter which ones show up where so in this case I'm using the legal one to filter those out so that means that in each project

[20:10] some of the fields now are tags and industries down there so we can just go ahead and say you know this is also part of retail right so that project now shows up in twice where we want to add another tag as motion graphics now on

[20:20] that on each card we'll have the motion graphics piece we can you can just add one too as well if you're sort of working right in here and you just need

[20:30] to dabble it's only got to go back and forth a billion times but yeah okay the last page that I didn't show yet is the actual work page which oh no yeah yeah

[20:40] here so there's the only other page that would need to be designed which hasn't been sort of changed over is the replacement to the individual project

[20:50] page which is currently this so this is the one that would need to be reskinned

[21:00] once we actually we have the site in a more stable spot but it should be pretty easy as far as just copying the pieces over and then going ahead and updating it so okay I promise you that would be a lot so I hope I kept my promise I think

[21:10] next steps here obviously this is a lot to digest we will need to probably hop

[21:20] on a call go through some of the stuff as well if this could be a good guide as far as sort of how to update the document that we currently have so now

[21:30] you can kind of see where stuff is and we can kind of go in and say all right we need to add more detail here or whatever and then otherwise the second

[21:40] piece would be starting to wrangle the actual projects themselves because we'll need to add or you know add more projects that specifically for the other

[21:50] industries but you can see that there's lots of pieces that are needed to write we need a one-liner we need a summary the actual details of the project an image for it which that I can make but we'll need a video link for each one the

[22:00] video has to be hosted somewhere so there's some steps that we'll have to go through to get all of these you know he's working so now that the pieces are

[22:10] kind of starting to come into place it's time for you guys to sort of like ramp up the content engine to kind of get this stuff going so that we could start

[22:20] plugging it all in if you're like hey can I use Claude for this or GPT or whatever your flavor of choice is yes you can we can work directly with your

[22:30] AI of choice on the site there are some permissions and ownership stuff that happens there but we can certainly automate getting this stuff on there I

[22:40] would say the easier place to do it for now as far as gathering CMS content is in a Google Sheet and then we can kind of just import all of it all at once

[22:50] which is really nice so that makes it easier to kind of see to like do we have a link for every single project and all that sort of stuff so I'll send an

[23:00] example of that stuff over next week we get a little bit more into it but yeah so that's the updates looking forward to hearing some feedback and you know

[23:10] starting to jam some content on here talk soon