Steal Our Web Design & Development Process Part 1: Onboarding and Discovery

What is good y'all John D Saunders here you know the Vibes in today's video well in actually the next five videos I'm going through our entire agency process. So I'm breaking down the idea concept of something tangible that we're making whether it's a website or branding, design, development. I'm giving you our five-step process that we've proven over the last 10 years to get clients, to secure clients and to keep them happy throughout our process.

So I'm going to be talking about our Discovery sessions, how we sitemap, how we ideate and come up with concepts and ideas. And so I'm using one example so we're going to do this actually in real time. This is going to be a five-part series that I hope will provide some tangible things that you could take away to improve your business, startup or any freelance idea that you're working on. So let's go ahead and dive in. In this first part one, here's what I'm going to go through.

First, I'm going to talk about onboarding once a client pays and signs that contract the process that we walk through to get the job done. Then I'm going to talk about the discovery call and actually show you snippets of a discovery with a client. Show you the questions that we ask and things that we get and assimilate so that we can do our job really well in telling their story and creating a website that converts.

Then I'm going to talk a little bit about drafting that initial sitemap. Working with the client to come up with that blueprint that we're going to use to design and develop the website. So part one is onboarding and discovery which we go through the initial process. Part two is content crafting and brand design, where we create the brand and tangible assets that will give the brand its overall looking feel. Part three is our High Fidelity design phase.

This is where we design the wireframe for the website and create the catalyst that will then become the website development. Four is going to be jam tight with web development, QA and testing the website. And then we end part five with the website launch and support thereafter and changes and updates. So stay tuned we're going to be dropping this over the course of the next month or so. And I hope you get a ton of value from this.

Let's go ahead and dive into my computer. We're going to jump into part one and I'm going to walk you through this process. 

Onboarding

All right y'all, so for any project that we start we always send a welcome email. Just so you all know Glowing Cheetah Studios is our internal company, but we're using that as the catalyst to run this entire process of how we do this with our clients. So we might show client examples of work that's been approved to show. So first thing we do is we send a welcome email to our potential clients. This is how it goes something like this: We're excited to work with you on your new project buildout. You're in good hands with us.

This links out ClickUp, which is the landing page that we create for all of our clients which I'll show you in a few. We also include a booking link where they can click here to book their link this is through Calendly availability. We set up a specific event for this to work with clients. And then we also link to a Brand Discovery doc as well. In that Brand Discovery doc there's about 15 to 20 questions that we ask clients after the onboarding process. So we already know what type of project they're looking to do. We've already know in what capacity they want to collaborate and so now we're kind of working through that process. 

And then we kind of ended with them collaborating with us on Slack. So a few key points here to point out. One we have them go to clickup which is the landing page client OS that we create for all of our clients. Two we include a link to book their initial Brand Discovery session and then we always include a link to the Brand Discovery document before the call. Main reason being is they might have time prior so they can fill it out before we even jump in there. And it's really great because we could take a look at it and then on the call we can fill in any gaps, ask any questions regarding content.

It just gives us a heads up on what type of content we're providing. And then the last piece is that Slack message that we send out to all of our clients. So once they get this and again we're using glowing cheetah as the buildout for this so that's going to be the company that you see content with that piece is there. So just so you all know just to reiterate: ClickUp link, we send the Calendly link, we send them the Brand Discovery document to start filling out before we call and then we send them access to Slack. And those are the main components of onboarding after we've signed on the client. 

Now once they're signed up. I'm going to go through these links here. This is ClickUp, so I created as you can see here we have Glowing Cheetah, I'm just going to go here to here and I'm going to start fresh here. So as soon as you get to and again ClickUp is a project management platform any one of you can use it. We have templates for all of this if you're interested in that, you can check out my course in the comment below.

But you can get most of the gist from this video. And so essentially we start with the board. On the board we'll have all of the tasks and so we duplicate this and we have an SOP or a standard operating procedure for this entire process that we walk through with clients. So as soon as they come to that email you saw they get access to the client portal. And what it looks like is this, I'll show you really quickly. 

All of our clients get access to this page called client OS and this is pretty much the only page that they need. It has an introduction, so the Hub talks about the project process, what we do. This is designed to ensure smooth collaboration with our clients. All they have to do is click this link to see exactly where we're at in the process of the project. So they can dive into the project, they can look at things that are going on and they can check out their list. So as soon as they sign on they go in here and they can see the assets.

As you can see our client manager Jay he created this doc and this template that we duplicate for all of our clients. Now in this two-minute video it's just a recap of me talking to clients about what client OS is so this is pretty generic across the board. So we keep this video pretty general and just goes through the same thing that I'm going through right now. Then we give all our clients a checklist.

Basically to access this client OS to schedule their Discovery call which we provide a link here as well. And then to bookmark this page on their browser so they can come back here to see how the project is doing. Then we ask that they join us on Slack and then we also have links to documents and important links like agreement, Google Drive, Discovery documents, invoices, figma folders all that good stuff. And then of course we have the task submission Hub.

This is a link to a place where they can submit tasks. So if they have anything like pages or content or things that they need to submit to us they can do it all through that tracker. Then we have the project tracker right here and it's essentially this is a table of where we're at in the project. So this piece looks kind of like this, where it's just a list of things that we're working on and it's just a tag that we add in there so you can see this on that page.

We haven't added it here because this is a pretty fresh install just to show you all what that looks like. And then we have project deliverables, training on resources. So they can click this to see how we use figma. They can click this to see how we use punchlist as well, so all the trainings here and then their main points of contact here are myself and our client manager Jay as well. Usually once the project starts and the discovery happens, I'm not really part of the process, I'm more in the managerial role.

So my team will take over um in that part of the process but it's always good to be able to be there just in case they want to jump on a quick chat or just kind of see where the project's at they can contact Jay. As a last resort they can always contact me as well. So every client gets access to this client OS area, where they can get a bird's eye view of where we're at in the project.

Discovery Call

Now once this happens we also do a Discovery Call. This is our Brand Discovery document. I filled this one out again for Glowing Cheetah, for our internal project. So some of the initial questions we ask really help us develop an idea of what we need to create for the sitemap, as well as site content for client websites. So for example we have the URL, email, contact names, normal stuff. We ask about the services they provide right and so Glowing Cheetah is an indie creative studio, crafting diverse stories through video games, books, comics and more!

We talk a little bit about the first releases that we're coming out with. I like to talk a lot about projects or services because that's the main catalyst for a lot of the content. So you can see here that we have a project overview here as well. Some of the features of the game. Also another thing that we're working on which is the Sci-Fi novel as well. We ask questions like about, what the vision for the business is, core values, company tone, all these things help us in regards to branding and creating content and documentation for the website.

We also have, location. I love this piece, the top brands you love. So we always ask questions to clients like what are some of the top brands in your space or what are some companies you really admire. They can even be outside of what you do specifically. And so what we like to do is look at the pros, look at the cons of those companies and be able to take and show our love and appreciation for those companies by including some of the influence and ideas they have in our own branding as well.

So we like to segment top brands we love and main competitors. Mainly because top brands can be something outside of the space, main competitors are usually direct competitors that are in most cases either doing better or at the same level as your company. So we like to use that as a benchmark to be able to make some ideas, competitive analysis, and do some research on those companies as well. We also ask what is unique compared to the competition.

How do you differentiate yourself from other companies and how do you make yourself rise above other competitors? This is something that's really important in our narrative because we're able to use this in copy, leverages on the website and include this in copy that gives our clients a competitive edge against the competition. We also like to talk about who the target audiences. For us in this case we're looking for the young dreamer, these are kids 5 to 12 that love to play adventure games.

The gamer parent as well, adults with a passion for anime and storytelling. So we have a pretty varied audience and so the products that we released should cater to all those multiple audiences. We also include questions like frequently asked questions or FAQs, most important call to action, that's that's crucial. Like do you want them to fill out a form, do you want them to schedule a calendar invite, do you want to just make it informative so people understand and know what your brand is in your specific space. 

It's important for us to know what that call to action is so we can make an informed decision on the design and development of that website. And of course what keywords you're trying to rank for. This will help us cultivate and develop that copy as well. And then one of the really important pages that we or questions that we like to ask are what pages does your website require. Main reason being is during the call or during that Discovery, we like to get a list of those pages because that's going to act as the basis for how we create that sitemap.

So if they're like ‘hey we need Home, Services, About, Contact’ that gives us a general idea of the main pages that they need. We tether that to the most important call to action and then we can use those to cultivate and create a sitemap which we'll go over in a few. And then of course we like to include what features they need on the website: contact form, newsletter, Steam wishlist button, which is something in regards to video games and then social media links.

And then the last question we usually ask is what the underlying goal of the website is. Now sometimes we'll have an expanded Discovery depending on the client type. So if we're doing branding as well as design and development I can say that for another video but we usually ask questions like do you have a preferred color palette, are you looking to do a tight face or icon, are you looking at Sans serif or serif. I'll make a separate video series for that cuz I didn't want to go too deep there.

But we also have a branding component in this discovery session where we don't only ask about the brand for the web design and development purposes but more so for branding and the assets that we create. So just to go through some of these questions again to reiterate we ask questions regarding Services, overall projects or services that they provide, we ask about or the like we call it the origin story since we're comic book geeks.

What's the origin story of your business, what's the overall vision 5 to 10 years from now, what are you looking to accomplish, what are some of your for values, your company tone, like for example with ours energetic, it's youthful, it's fun, it's heartfelt, it's inclusive, we're not afraid to be a little quirky and playful much like our founder whose endless curiosity inspires everything we do. So this is again another catalyst for what we create and develop here at the agency. Talk about main competitors of course, target audience FAQs and all of these great questions. 

Drafting the Initial Sitemap

What all this leads to is after this discovery our team will sit down, we'll talk about the project as a whole and then we'll start to develop the sitemap and so let me show you an example of what that sitemap looks like here. So let me pull up the link here. So here's an example of our sitemap. This is a very simple sitemap again this is going to be a probably one to two page website. But I just wanted to show you kind of a visual of what that looks like. And as you can see this is the second version that we worked on.

We've already made a few edits for the first one. And the way we get this really cool design documentation is we actually use a tool called Relume, it's a phenomenal platform, again this is not paid promo they're just an amazing tool that we use all the time. They help us develop our sitemaps where essentially we plug in the content information that we want to supply it and then with that information it gives us the sitemap example.

So I will actually show you the look and feel of how we got this accomplished in regards to the design for this site. I'm going to go ahead and pull it up here, you can see here's a sitemap. So the great thing about Relume is it leverages your own data to put together your sitemap based on what you provide. So here's the primary sitemap: it's a homepage, we have a hero header section, features list, features section which is the specific products that we showcase, about, and contact.

So we have essentially an overview of each section and then a few sentences about that section that will help us cultivate this sitemap in real time. You can also click wireframe and it'll cultivate a wireframe for you but honestly and this is a little bit unorthodox we go straight from sitemap, straight into High Fidelity. We don't even do wireframes because what we've realized with clients is they don't really pay attention to it. They want to see the visual aspects of the website and honestly it just saves you a couple weeks of time in regards to the project basis. 

So again this primary sitemap is what we plugged In for the sitemap prompt. So essentially you prompt this like you would chatgpt or Claude any LLM model this essentially works similarly but it spits out a sitemap for you. So we'll put together a document like this where it's like a onepage long form website, here's the structure and then we'll provide the specific details. Here's a CMS content for example as well. It maxes out at 3,000 characters and then we put the number of pages, which is one to five English and then we'll generate the sitemap and then this is what it looks like.

Now what we do is we're able to export this into Figma. So there's a plugin that you can use on Figma to import this in and then we just make a few updates that make it easy for the client to navigate. And so we just essentially change the color of the main pages and then we also add this navbar and this footer nav so our clients can see okay this is going to be the main navigation, logo, projects, about, contact. This is going to be the footer navigation pretty simple again a one to two page website on this piece. And then that they're able to go in here and leave comments and provide feedback as well and we can work on this internally as a team.

So essentially what will happen is after that Discovery session, usually that's myself or Jay conducts those we send this to our specialist our QA specialist Pat she goes in and she develops the site map based on that conversation. We take the sitemap, we look at it internally and then we ship it off to the client for review. We send a quick one minute video of us just going through the sitemap and then they're able to leave feedback and comments here. 

Sometimes we're done in two iterations, sometimes it takes five right but this is a really easy and effective way to showcase what's on the site. Provide that content in real time so that the client can make a decision on if they want to make any changes or not in regards to that. And so again we send this to the client, we include a quick loom video kind of like this and we ship that off to the client for review. So here's the sitemap again and what it looks like and how we get that job done as well. So just to I want to reiterate this entire process.

So one we do the onboarding that's the first step in our process and so that's when a client signs on they get immediate access to our client operating system which is client OS, this is where we keep everything from timelines to feedback loop so the client can see progress in real time. Then the next step is that Discovery call. During that 60 to 90 minute deep dive into the client's brand we cover their goals and audience vision for the website.

It's crucial because it ensures we're all on the same page from day one and we get all that information we need to hit the ground running in the project. Then of course where we're at right now is the same map design and revisions. So once we've gathered all the necessary info we get work on the sitemap. This is basically the blueprint for the website so it shows the structure, the pages, the flow of content.

We share this with the client for feedback, usually working through one to two rounds of revisions to get the job done. So by the end of week one of the project, we've got a solid road map for the entire scope the foundation is set and we're ready to move into content crafting and brand design in the next phase.

Stick around next week and I will share all the info on that in the coming times. I'll see y'all! Thank you guys for checking out the video if you have any questions drop them in the comments below. I'm going to see you next week, peace.