Steal Our Web Design & Development Process Part 2: Content Crafting & Brand Design

Hey y'all John D Saunders here you know the vibes. In part two of this process we're talking about content crafting and brand design. Now we already talked about completing the discovery phase, onboarding the client and getting started in regards to the process. In today's episode we're talking about our copyrighting process. How we take the brand discovery that we initially went over with the client, taking that information, doing competitive analysis and writing preemptive copy for the website so it doesn't hinder our process.

We'll also talk about how our branding and design process coincide with that while we design the logo, brand identity, design systems and all the collaborative efforts that come together to make a website and brand come to life. Then we'll wrap everything up. I'll walk through the process as we're doing it with Glowing Cheetah our example client which is our business and walking through that process and how we do that with clients. We'll talk about what a brand guideline takes, how you can parse that down with a Bento Box to move quickly and swiftly through a project especially if you're working with a startup and how to work through that on the computer.

So let me get my computer. We'll dive in, we'll get this done and we'll walk through the process.

All right y'all we're back. This is part two of our five phase process. So we talked about onboarding and discovery. We talked about the onboarding journey, discovery meaning and sitemap design. As previously in this video I talked a little bit about that if you want to watch that video, go ahead and check out the description and you can see part one. I'm going to jump straight into part two. We're doing content crafting and brand design so that includes copywriting, logo design, brand guideline design.

Now as we all know most agency freelancer partnerships with clients always get caught up in the copyrighting field or copyrighting portion. We expedite that by leveraging all the content that the client provides us. Doing our due diligence and then sprinkling a little AI to help us convey the message that we want for the client. This is great because the copy comes out so great the clients actually end up using the majority of it. And we're talking in their voice. their tone so I'll walk you through that process and how we do that.

So first things first, regarding copy we go back to the sitemap we look at the initial sitemap. Now as you all know we are building out a website called Glowing Cheetah, this is for my son and I's Indie video game studio. We're doing an internal project for this coz we want to walk you through the exact process we use for 200 plus clients but we're doing it internally with ours. So last time I talked about the sitemap breakdown right, all the different sections, how we're going to have a hero section, a feature list, feature section, all this good stuff here.

So we have all the details and specifics here. So I can actually go here and I can take this and I can export this as however I want to right. So that's that, I just want to show you that piece. So the main components for this are the Brand Discovery Doc we talked about which is the session you have with the client initially when you onboard them. So you talk a little bit about their services, the project overview. You talk a little bit about the business, vision, core values, company tone, you have access to this so you can check this out at any time. FAQs, target audience, so this gives us all the ammunition we need to go ahead and make that site map which we've already done.

That's done, looks great. So now what we can do is we can take this to convey the copy that we want on the website. Now I suggest you do a competitive analysis, look at other pages and sites in the space, take your notes and then take everything you have and we're going to incorporate chatGPT into our process. So I do recommend chatGPT if you have a paid account even better. This is going to help you really expedite the process to get valuable content. 

So let me walk you through this is our SOP or standard operating procedure we use to develop copy for our clients. So first thing we do is we create the sitemap which we have here we have a website copy template, which looks like this just has like the main kind of pages, this is just an example of what you could use potentially, so you got the homepage, you got solutions, this is just a website copy template example, this is what a site could look like after you develop all that copy. Now we've migrated this to Google Docs but I did want to show you this visual example to give you an idea.

Then we have the Brand Discovery and then we essentially write out the Brand Guideline Doc and information about the brand, which is you could see here right. So we have a ton of ammunition and details and specifics to go ahead and write up this copy for the site. Now what we'll do is we'll go into chatGPT and I'll just show you my personal GPT to give you an example. I'm not going to walk you through the entire process because this could be a video in itself but essentially you want to set up your own GPT. You can Google how to do that takes 10 seconds you literally go to chatGPT and say I'm going to create my own GPT and then you create a GPT specific to each client.

So you type in the name, you type in the description, you type in the instructions and this is just the instructions that I have for my personal GPT. It'll be a digital version of me, a little bit of information and track record on what we've done and then what you want to do is supply that GPT with a knowledge base. Now this part is crucial. So you want it to understand you, know your nuance, know your voice. And so in the client's regard you want to update the Brand Discovery here. You want to update or add any blogs, content they've written, if they've done YouTube videos, you want to pull a transcription of that YouTube video and upload it here.

I actually took my last 30 YouTube videos uploaded them as a knowledge base here in the transcription and this helped them get my voice to the T. Like if I say write X in my voice, it's going to do it initially. You also want to update any copy or updates or ideas that they've had and incorporate that into this knowledge base. And then what you do is once that's done, now you're going to use our template to create and get that page. So for example I'm going to go back to my site map, here it is here, I'm going to say I just exported it right so I'm going to go to my downloads.

You can see I have it as a PDF, you always want to export as a PDF because it just makes it easy for chatGPT to read. And then you want to preface the platform. So let's go back to here. I'm going to go back to the template here and then we're going to go back to the GPT prompt that you should put in for this. So here's the brief. I'm going to copy this and we'll update it accordingly. So I'm going to go back, here remember this is our GPT, we already supplied with a knowledge base. So I'm going to put this in here, I'm going to say we're working on homepage copy for our business Glowing Cheetah here's a bit more about the business and then here is where you want to drop in a bunch of information about the business, the company, what you do so I'm going to go ahead and do that as well.

I'm going to go here and I'm just going to drop in all of this. I can literally just take this, I can literally just take this I can hit file download as a PDF and then I can go here and I can say it's added as a PDF, okay. And then I can even you can if you want to get nuance, you can say please create the following sections for high-fi wireframe frame of the homepage, this is if you don't have a sitemap. But we do so I'm going to put here, I'm going to delete this, I'm going to delete this and I'm going to say I've also added a sitemap, can you develop the homepage copy, keep in mind our knowledge base and our style and tone, right. So that's done.

I've got my sitemap, I've got my discovery, I'm going to upload both of those here. Brand Discovery document got that and we've got the sitemap, okay. So we have both things, both items are being uploaded, they're both PDFs and then I'm going to hit submit  Now what chatGPT is it's going to search a knowledge base, so this might be a little bit skewed just because I'm using my personal GPT, for this we don't have a dedicated one for Glowing Cheetah but ultimately I want to show you how this would work. What it's going to do is it's going to spit out a document that will include all the copy for the site.

So as you can see headline welcome to Glowing Cheetah Studios, sub headline where bold stories meet boundless imagination, primary of course is to Wishlist Pigeons Mission on Steam which is the first game released we're doing at Glowing Cheetah and now it's going to show our specific products, coming soon, what to put in that section, about section. So here within maybe 15 or 20 minutes, I have a full page of copy that I can leverage for content and information that's needed on this website. As you can see it's pulling data from everything that I uploaded. It has the team names, it knows our origin story and this is all on point like I've already review this in real time.

So what the end product would look like essentially is you have this, you have this and then I suggest doing this in Google Docs. It's just easier to share with clients, easy for them to see everything that they need to be able to make it applicable. So this is the full copy doc for the site, as you can see it's got all the sections, we delineate, we add notes and everything is here for folks to be able to see and review and then you can see everything here in regards to the sections as well, the way we have this tabbed out and organized for ease of use. So the main reason we do this is so that we have copy to be able to use on the design phase of the website.

A lot of times when you're working with clients you might be waiting on copy, you're collaborating with a copywriter, this helps you expedite the process and any of this content can be changed right. You can update this to be more reflective of the client's tone or voice by communicating effectively with chatGPT or the client. But by uploading all this items and things to the knowledge base, you're equipping it with a lot of the things that it needs to make them inform decisions on copy and what you're going to provide. And this is going to put the client at ease because even if the copy is not perfect if it's 85-90% there you have the word count and the items you need for that design phase.

So going back to where we were here, the copywriting piece that is in a good place. So this takes us maybe less than a week to do, I would say probably two days, used to take a few weeks but two to three days now at max, what we parsing it with the client and talking over and we have a good solid standpoint for design. Now while all that's going on, we're actually doing logo design as well. And so our logo design process looks like this. We zoom in on the designer, we lock in and create two to three initial concepts. Now when we make those concepts we then pitch those examples to the client. So I'll walk you through our process that we walk through with Glowing Cheetah.

So here's our Figma file for our design process and so what we do first is we create a tab called inspiration and with inspiration we look at specific projects that we really like and have an affinity toward that we think just work really well. We'll point out comments, add specifics and so that way the designer is empowered with things that they need to decide okay I think we're going to go in this direction. Then we have a playground where really just the work happens right. We throw around ideas, we come up with concepts, we come up with color palettes.

So as you can see here you came up with different color palettes, different options, Bento Box examples, logo explorations, with different fonts and usage. How it looks condensed, how it looks expanded, how it looks with the brighter colors or more playful and so we'll play around with this a lot for a few days to get an idea and a sense of what direction we want to go in. Then once we lock in on logo we create a specific tab with the logo lock up in different versions. You always want to have different versions that you can access and so once we finally work together and agreed on a logo this is the final lockup, Glowing Cheetah Studios.

As you can see we have a hand-drawn illustration here, with a font that's been customized. We love the raw authenticity of it. We love this overlay that just gives it a nice, cool, fun, exciting experience and so we always do our logos in both vertical, a horizontal version, the text logo mark, which is just the text base logo and then we do our brand mark and so this is our full logo lockup. Main reason we do this too is because of trademark, if we want to go and capture the trademark we want to make sure we have these different versions for people to be able to access. 

Now once we get to hear with the client which can sometimes take a week, two weeks, we try to do two full rounds of changes there now we develop the bento box. So once we have the logo locked in, now we say okay here's the color palette, here's the headline font, here's the paragraph font and then here's how the logo could look in some conceptual areas. We have our custom icons, we have our color palette and we have all the items we need here to show a beautiful design.

Then we'll move into the design system space, so once that's approved now we create a very simple design system for use on design and developing the website. So we have the colors, we have the headline font here, we have the typography we'll use, our custom illustrations and icons and then the buttons that we'll include and then of course a dedicated illustration icon area as well. So this is essentially how we assemble the guidelines, how we set up typography, color palette and other design elements that we're then going to use in High Fidelity.

Now the great thing about our processes, we don't do low fidelity, mid fidelity, then high fidelity meaning we don't sketch out the website then do another digital sketch and then do the final what it's going to look like. The sitemap allows us the freedom to be able to say, okay we know exactly what sections we're going to have, we have all the copy for the site that we'll need we can take all of these and be able to push straight into High Fidelity design where the designer has that full freedom to be able to create and design how they want but within the parameters of hey this is the logo, this is the color palette, this is the sitemap and the all the items that you need.

Now that's the process y'all that's how you walk through and work through the copywriting piece, the logo design and brand guideline design, now we have essentially all the assets we need for part three which is the high fidelity design phase, actually designing the website in Figma and showing what that looks like in real time. So stay tuned, that's going to be next week y'all, if you have questions drop them below.

Thank you all for checking out the video content, if you have any questions drop them down in the comments and I'll see you for part three.