I have some exciting news for you. We actually just relaunched our brand new website. And I just wanted to show you the behind-the-scenes of how we came up with the concept and ideas behind this website.
Now as most of you know, I'm completely obsessed with Webflow, which is a CMS/Visual website builder that allows you to craft anything you want using their platform. So we built this entire site in Webflow because we wanted to have full control of the CMS, as well as be able to create multiple collections to accomplish all this great content.
So without further ado, on the left-hand side I've got the live site. And on the right-hand side, I've got the behind-the-scenes look at the CMS and Collections. And so first I want to walk through the site.
And again if you are a web designer, if you are a freelancer and you're looking to build up your site, here are some components and things that you'll need to create yours as well.
So as soon as you come to the site, you have a clear call-to-action that initiates what we do and what we provide to the client. So, "We craft profitable brands, websites for startups." That's it, that's all we do, that's our main source of income, that's our main service and that's we've created a process around.
And then, you can see right under that the WEBSITE, BRANDING, UI/UX and SITE MANAGEMENT.
Now, right under that I have a quick overview of our services. And again we have these H1s in larger texts just to help encompass for SEO, as well as paragraph content here. All of these are clickable to specific service pages.
And so the way we structure the site—and I'll show you here on the back end—is you have our main services, and then you have subpages under that, as well.
So as you scroll through the homepage, it will show you our tech stack right here. These are the main platforms that we used. And then we've actually created a CMS collection for each of our case studies, which is super important.
One thing on our older site was, case studies were something that people really looked at in detail. So we wanted to make sure that we had about 10 to 15 solid case studies to be able to showcase that are organized in three categories: WEB, BRAND, and then UI/UX. And I'll get into those a little bit later.
So that's on the homepage, where you can click through to go and see those as well.
I talked about our clients, I talked about our process. This was more detailed on the older site and it didn’t get a ton of traction. So we had Hotjar installed and got to see if people really looked at this part, and they didn’t.
And so we really compressed it into a quick image or illustration and SVG file where they can browse it pretty quickly and then go straight to see all of our services. And, of course, the call-to-action, testimonials or our social proof of our reviews and our track record, as well.
And then right here we have a link to our form.
Now one note is our consultation and our schedule, it actually takes you to a type form document. The main reason being is we wanted to make sure that this was a little bit off the site and we can fully control that form. So a little bit about that later on.
So back to this. All right, so that’s the homepage and so those are all the sections that we have there.
Now, when it comes to services, we have a primary services page and then we have these subpages. And I wanted to add this—almost like a mega menu—to make it easier for people to navigate and have these icons that correlate. Again, this was completely all built in Webflow—very simple, easy design as well.
So if I go down here, I’m just going to go and Browse All Services so you can see all the service pages.
So we have the main service page and then we have these sections under. So we have Branding Strategy, we have Web Design, we have Web Management, and then we have UI/UX. And then each of these have their own individual page, header, information.
So if I click branding strategy, it will give me the main timeline. We have some images and illustrations that we’ve worked on for our clients. And then we talked a little bit about the things in that overview that’s included in an identity.
And then for the Branding Showcase, you can click any one of these and go straight to their brand guidelines. So this gives clients everything they need. So whenever we send out a proposal, I always send out a link to this page where people can click and they can see examples of our visual work here in real time.
And then also, of course, clear call-to-action to request a quote.
Now, another important component is when you have these main pages, you only want to have the pages that are similar right under it. So they can go straight to UI/UX, they can go to Web Design, they can go to Management easily without having to go back to the top menu. So it’s all about ease-of-use for folks that are looking for content that want this to resonate with them.
So those are all of our subpages, and then we have our About, which we’re still adding the rest of our team members here. But ultimately, it looks at some of the tools and technologies that we use in the agency, a little bit about our main platforms—Webflow, Shopify—and then a little bit about our team members, right? So we still have to add a few more team members here.
We just launched the site that I’m so proud to be able to work with some amazing people. And we keep it fun and light-hearted. We have a bio, we have our favorite quotes and then our favorite food, and our favorite movies to keep it really personal and fun.
And so for case studies, this is probably the most important part of the site for me. This breaks down our process and examples of clients that we’ve worked with. And so I’ll click one as an example.
Let’s look at Netcon, for example. So when you click the case study—and this is all pulled from the Webflow CMS—you’ll be able to see the categories, some main images here. And then how we started the process, the plan, the sketches and items that we did, the breakdown of the process and then some gallery images here.
We can add more and elaborate on this. I just wanted to have it, keep it simple to launch—and, of course, the results at the bottom. And then right under that, of course, we have another section to View All, or you can just view another case study.
So it’s really easy and fluid to navigate throughout the site, load times are fast. And the site functions really, really well for those trying to find out more information about the brand and learn more about our business.
Another thing is, there’s always a clear call-to-action right before the footer that has the options to schedule a consultation. You want to make sure that’s on every page, regardless of what content's there, because people might be like, "Okay, this is where I’m going to make this decision. I’m gonna go ahead and pull the trigger, and contact this individual."
So if I go back to the list, you can see all the case studies that are organized here. If I go to the website back end, you can see I have my CMS Collections here.
So, Case Studies, you can see I have all these case studies published. If I click Digm Consulting, for example, you can see I have the name, the slug, the images that I have, the subtitle, the short summaries.
So all I have to do, once I have this filled—usually what I’ll do is—I’ll write this in a Google Doc and I’ll delegate it to a team member, and they can add it through the Webflow Editor. Right, so the Designer’s more for me to be able to manipulate, to edit the site. The Editor is more so I can find someone to jump in and make some changes.
So, that’s case studies.
Now what I also like to do is add resources to keep you coming back to the site. Now we have both Templates, and we have the Blog. So we build Webflow templates, resources, free items that people would be able to browse and collect, as well.
So we hit Templates, we’ve got a video game template which we just released last week. We have the Illustration Website Template, which is free—and we’ll just click that one so you can see what that looks like.
So we have visual options at the top, we have Review in Browser and Get Template—we have clear call-to-actions as soon as you come into the site or page, to be able to go ahead and clone this website template that we created. Then we have the images here, we have a quick little video, and then a blurb—you can click these to zoom in on the image and kind of see it in full splendor. And then, another clear call-to-action here.
And then, of course, under that is a link to check out more templates. So, this is just another component to add to your site to keep people coming back, keep them coming back for more.
Lastly, Blog: I keep this simple, don’t write a ton of content. I create videos, and so you can see all our recent videos here.
Now, when you click this, it has a video. The idea behind this is to go back and transcribe all these videos. So, we’ve begun the process of transcribing all the last 20-30 videos, and we’ll add the text version of all that content over here. That will just help with the SEO.
That’s still a work-in-progress, so I’ll let you all know when that’s done, as well.
And then, one of the final pages is Get Started, that takes you straight to our form, where we can vett individuals, learn more about them, and that brings it into our entire online process.
So, with that being said, there’s a couple more pages. Just the Client Login, which is for our client portal, we have all the social media buttons here in the footer, and then we also have the Terms & Conditions and Privacy Policy, so that we can collect user data with permission.
And ultimately, that’s it, that’s a wrap, y’all! That’s the whole site, it was fun building this out, and I’m excited to showcase it to you. Leave comments, ask questions, I’m happy to help, and we will talk soon.
