How to Build the Perfect Website Project Framework

If you’re like most web professionals, you’ve probably been in a situation where you had to start building a new website without a solid project framework in place. This can lead to wasted time and money, as well as frustration on the part of everyone involved.

Building the perfect website project framework is no easy task. You want to find a balance between good usability, speedy loading time, and flashy graphics without overwhelming your visitors with too many distractions. It’s important to develop something that will satisfy both you and your client. A website project is only as good as the framework that it’s built on.  With so many frameworks out there, which one should you choose?

You’re about to hear from Vito the atarim founder on how he’s been keeping his game organized. From selecting a template and adding SEO tools before launch, this Podcast is going to give you all of the tips that will keep everything running smoothly in development or before launching your new product!

YouTube video

Transcription:

This is the agency profit podcast, the podcast for agency owners that want to run a more profitable business that doesn’t depend on them. Introducing your host CEO and co-founder of Marcel. Petitpas.

Hello everyone. And welcome back to the agency profit podcast. Today, we have a very special guest he’s here from atarim, which is a platform that helps website agencies build more efficiently, give amazing service to their clients. Cut down the time. It takes them to build websites by 80%. This guest’s built his first website on geo cities. When he was 14 years old for a skateboarding crew, then started his agency out of the back of a van while he was touring the world with a hard rock band. Eventually built that to 12 people before creating what at the time was WP feedback. And today is atarim. today he’s got over 5,000 agencies. To build their websites and over 130 clients running on top of it.

So he’s here to share with us how to build websites faster, more efficiently with better margins with all of that. Vito, thank you so much for being here, man. It’s great to have you. Thanks for that. Marcell. I’ve been looking for it for this session now for a long time, and I’m glad to be here.

Me too. Like we, so we know each other, of course, through SAS academy. we’ve been friends through that for a while. I think we scheduled this podcast interview like almost a year ago. Because we had this really nice long backlog of guests, but yeah, I’m super happy. We’re finally making this happen and really interested in this topic because I know a lot of people that tune into the show do website design development for their clients. It’s a core service that a lot of our clients have. And I think you’ve got some really incredible tactics and thoughts and ideas on how to make that process way more efficient. So excited to dive in before we do that, I want to dig in a little bit more to the backstory.

You were running your website, design development agency. And you had a problem and that led you to build a tool that today is, the atarim platform. What drove you to develop that tool? And when did you realize that it was a company in and of itself that there was a business behind that idea?

Collaborating with clients was a nightmare through the agency. And when I first started as a freelancer and when you have one or two clients, it’s not such a big deal you just go with the flow. And when they reach out to you in the middle of the night or on the weekends on WhatsApp, you just say, all right, I guess maybe that’s part of being in business. But as I was starting to scale and bring in some team members onto the agency, that’s when it started becoming really annoying. When you have one or two clients that reach out to you, that’s fine. But when you’re out 20-30 clients that are reaching out to you with this nonsense then it was just a nightmare. And we tried everything and I’m sure that a lot of people that are listening to this have also gone through this process. From, spreadsheets and Google docs and trying to bring them into our project management system, trying to build our own client dashboard, a client portal for them to log into which they never did. And scheduling loads of time on zoom and face to face back in the day just to get. the basic stuff that you need from clients like the content and design approvals, or just to explain what they meant when they said that the thing is not working and they actually meant a button on the fourth page, out of 50, all of those kinds of things was just a huge headache for me and it stopped me from growing.

So one day I was just telling my team, how about we just try and look at this from the client’s point of view, instead of just trying to fix it from our side and see what makes sense for them. And when we’re doing this video calls it empowered them to just share the screen and just point at something and tell us, change this, we don’t like this image, so it became these three words strings instead of days of back and forth or trying to get what they’re, what they mean. And I told my team, let’s just try and build that into the website, like a layer where they can click on any part of the website that will allow them to just point click and say, what’s up. And we did that and it worked like magic. And that’s when I said, all right, I might have something here that other agencies might need. And so I actually ran a survey before we went to market. I was already part of the the WordPress community and I was active in all kinds of Facebook groups with agency owners. So I just posted while we created like a. 15 second screencast of a version, 1.0 or 0.1 of the tool. And and people were just amazed. Within 30 days after this post, we had a little more than a thousand emails from people that said, when you’re ready, I want to try it out. And so that kind of gave me the confidence and the and understanding that I have something that might be beneficial for a lot of people.

And now we’re with thousands of agencies, hundreds of thousands of users. And client websites. So I think it was a good choice. Yeah, I would agree. And the platform has evolved so much since then. You’ve added a ton of features and functionality. You’re releasing some really cool stuff. I’ve been fortunate enough to get in and see in the weeds because of course we’re through SAAS Academy, we’re nerding out over each other’s products.

Give us a little bit more insight into like today what the platform looks like. Just so everyone’s. Yeah. So I thought it was a platform that is that has two sides to it. We have the client interface plugin, which is a plugin that you install on the client’s WordPress website, and that allows them to interact with the website, like never before they click a button and they can choose anything on the page to just say, I don’t like this icon and make the logo bigger.

Here is the text that we need here and so on. And on the backend, we’re collecting all of the information that we need as agencies to actually execute on this task. And that is all feeding into the second part of the product, which is the agency dashboard. This is where the agency works. It’s getting all of these requests from all of those multiple websites into one type of inbox or support desk, if you will. But also collect automatic screenshots from what the client saw at the time of creating that request, marking the div or the element clearly with like red borders. You know exactly. What to focus on we’re collecting the browser version, the screen size a and then from there, it just becomes a matter of collaborating with the client through the app itself.

So you don’t have to visit the website or look for anything it’s all right there, but then there’s all kinds of cool stuff. Like we tried to automate a lot of the experience and systemize the experience for the client. We also went down and did that for the agency itself. So for example, you don’t need to share logins with any of the team members.

One click takes you directly to that website directly to the relevant page and scroll down to where that request is so that And all you have to do is just click one button instead of trying to find what this is. Or even when you receive an image nowadays, when you receive an image or without with the standard flows that users that agencies have.

Is that you would ask the clients to upload the image to Dropbox. Then you would need to go to Dropbox, download it to your machine, go to take this image into Photoshop, to minify it or tiny PNG or something like this. Then you would need to log into the website just to upload that image in there. So we made it one click, you click that button.

It minifies, the image takes it directly into the relevant media folder. And it just sitting there waiting for you to use. All done. There’s more than a hundred small bits and pieces and bigger stuff as well. That add up to this 80% savings that we’re using for we’re doing for users.

Perfect. So these are the components of a perfect project. And as you will see, we’ll probably identify a bunch of those things that you already have within your workflow for the people that are listening. There are a few things on the screen. Now we’re looking at at basically a flow chart of how projects should go from one step to next.

And we were starting with getting the proposal signed, getting the deposit paid. That’s one of the most important things. And then once we get about 30, 50% of the project, that’s when it really starts to, that’s when we’re starting the work. So we’re probably going to do a bit of a discovery process that could include like a form or a conversation with a client.

I suggest just doing the type of interview. For this discovery. And usually what happens at this stage is that we would send the client off to give us the content, and that’s where things start to go haywire. Because at this point we haven’t really done anything. We just did a, we just sent a form or we did 30 minutes conversation.

Energy is at its peak. But then all that we did is send the client off to do some homework that he probably doesn’t know what. And that’s when things starts to crumble, really. So here what I’m suggesting right after, and he will see this from the discovery from right after the discovery, we have the architecture building up at the site map.

After this, we have a wire frame stage and that a product or a prototype stage after this, we’re going to start doing the development and the design. Before we’re launching the website and a really important step right after the launch is getting the client on some kind of a maintenance plan or a support plan.

Because especially if we’re talking about profitability and we know myself that the profits, when building websites for clients comes on the back. It’s not really from the initial project. In most cases, it comes from building that relationship for years to come for them, to, for you to become the guy that they go to for everything that they need from that point on.

So nailing that initial process and creating an amazing experience for the client as you’re doing your first collaborative process with them is key to getting them to stay with you for. 3 5, 10 years after. And so another thing that we see here on this on this a screen is something that is often not considered, which is what’s happening here below all of the client touchpoints that we have.

Throughout the project. So the discovery is a client touchpoint. When we have the site map created, we need to get that approved by the client. So we have a client touch point right here. When we have the wire frames, we need to get that approved. So we have some kind of a revision step happening on this stage as well.

Then we have two revision rounds doing the development when we deliver the homepage or something like this. And of course, when we’re providing the support, this. Constant communication with the client for them to ask a staff for us to deliver stuff for them to point out any bugs or any additional stuff that they want from their website features and so on.

So there’s a lot of this is not just building a lot of this is communication is collaboration. And so also I know that a lot of the people that are listening to us right now skips. Because why would I build the site map and why would I create the wireframes? This guy is just, he just needs a basic website, just needs like a 10 page business website.

I know what I need to do. So let me just do it and start from the development and the design already. But what we’re forgetting is that the client needs to go through a learning curve through the project. So when we’re adding stages, And we’re going to see how to make them super efficient. But what we’re actually doing is we’re removing friction because we’re taking the client through a natural learning curve that allows them to go buy us.

And really, they need to understand what is in our mind. And we need to draw a picture of what is in our minds so that they can feel. With us through this project and getting through the launch or investigating what we call a scope creep, familiar with this term. I think we’re all very familiar with scope creep, unfortunately.

And that happens when we haven’t communicated the right things at the right time because the scope group is that is the exercise of of. Expanding the scope throughout the project and coming up with ideas when they don’t fit anymore. When you’re already done with the homepage, then there would, or with the design that will tell you, oh man we actually needed a a completely different color scheme or we actually, when he finished doing the booking form, they will tell you, we actually need a questionnaire that is five pages long that has 400 questions. Or when you build a shop and you in, you had in mind that they have three products, because that’s what they told you on the initial discovery. Then you realize that they actually have 400 products or they want to get to 300.

They just want to do three now. If you know about these things early on in the project, if you have the right stages to mitigate those items, that’s great. It just adds to the scope, adds to the budget, or even better gives you the ability to create stage two stage three, stage four of the project so that you can build up that relationship after.

Getting the MVP or the initial product out there. And so now I want to take you to the to the pitfalls. How did you call them? You said The grenades. I like that. So these are our standard grenades. We have three major ones throughout a a relationship with with a website client.

And that is gathering the content, approving the design and getting what we need on the support, for when they need support from us. And I must say, I know you came from the agency world yourself. When did you gather the content? What was your process doing that? Yeah. That’s, we’re trying to do it all up front, right?

I think that’s what we all started doing. The couple of times I haven’t built a lot of websites, but I have done it. And you try to foreshadow as much as you can at the very beginning of the project. But inevitably what ends up happening is as you go through building out each page, you realize we’re missing things.

This is, this image is very, pixelated is not the right format. This copy isn’t quite right. There was a change. So I don’t think that was the right strategy. But I haven’t gotten deep enough into this to develop a great strategy. So I’m hoping you’ve got. This is exactly what most of the industry is doing.

And there is even this this there’s a title to it, content first approach. I don’t do anything until you give me the content. And I want flip the concept here just to, so people can understand how bad of a user experience this is for the client. So imagine that you would that you have a leaky sink, right?

And you would call it. And they will tell you, okay, I know exactly what to do here. We need to fix the sink and then it’s going to be awesome. Maybe I’m gonna even a make the stream stronger for you. And everyone’s excited. Yeah. Yeah. Let’s do that. And then I’ll tell you. Great. So in order for me to start, I just need you to get that rubber band that will fix it, and then I’ll do the work.

I was like, damn man, I just saw, I brought your name to do to solve this out. And but it’s the, it’s going to tell you. No, man. I can’t do anything until you go and figure out which rubber band I need for this sink and go get it for me. And then I’ll do the work or, you go to a mechanic and they do the same thing.

Yeah. I know exactly what needs to have. We need to replace the calculator, but you need an exact, a specific carburetor because this is a pretty old car. So you just need to get me the part and I’ll do it. And so obviously this is like horrible experience for this, but even worse if they don’t deliver the content, a lot of us have clauses in our contracts that say, if you’re not going to give me the content within time, you’re still going to pay for the leaky sink.

It’s still going to pay for the broken car because. I was here. And so what I’m suggesting is, first of all, we have to understand that we’re not building a website. We’re providing a website, building service, and as service providers, we have to take the client along the ride on this journey with us to get them to the instead of gathering the content from the discovery, and usually like you’re saying all the way until the launch there is a very specific point where you would want to gather the content and that is after we have the wireframes. So I’m going to go through those few steps here. We do the.

After the discovery, we can create the site map. And why do we do this? It’s not for us. We know what a basic website should look like. We know what an e-commerce website should look like. It should have a checkout page should have an archive of the products. It should have a thank you confirmation or, order confirmation screen and all of those kinds of things.

We know the client doesn’t know. So the site map allows us to communicate to the client, what we have envisioned in our minds so that they can approve that at this stage. That’s where you’re going to find that they don’t have a privacy policy. So we need to take care of that, but that’s where you’re going to find that they actually don’t have three products.

They have 300 points, or that you thought you’re going to have a beautiful, a section of social social poof and stuff like, or a review screen, but they never bothered to collect any reviews from clients. What is, what are we going to have on that screen? So this is where we’re starting to flush out all of those things through the site map.

And the beautiful thing about this is that creating a small a sitemap or just a basic side map, full website takes about 20 to 30 minutes. So it allows us to create our first deliverable. Literally 30 minutes, one hour after the discovery session. So while we’re doing by this, by doing, by delivering this initial quick deliverable, fast to the client, we’re signaling to them that, oh man, this guy is on it.

I just spoke to him 30 minutes ago and now I already have something that I can start looking at. And. And so I should step up as a client because this guy is moving fast. So instead of creating a massive drag on the project early on, by sending them off for two to four weeks project to deliver the content, we’re actually taking charge over this relationship and bringing the client to a place where we’re building momentum instead of creating drag early on.

Does that make sense? Absolutely. That’s a big nugget. I just want to like double click on this idea. Which is we use our process to actually create more clarity. We’re essentially getting paid to do the discovery to de-risk that the downstream, and we’re adding value to the client along the way.

Like those are some big concepts that I think, at a higher level, let’s zoom out and think about how we can look at the whole project life cycle in this way. This is huge Vito. Yeah. And it’s all about momentum. If you want to get to a project deadline before the deadline, you got to build momentum into the project, or as things are just starting to drag and it becomes like one of those construction projects that you thought is going to take, I’m just going to renovate the kitchen for a couple of weeks.

Six months later, you’re still cooking in the bathroom. So we want to build that momentum and start early as possible and get the clients into that mindset that we’re doing stuff fast. And so right after we do this, the sitemap 30 minutes after the discovery call, we’re giving them. To approve this because it’s basically just a screen that looks very much like this, it just mapping out pages that they’re going to have on the website.

So it’s very easy for them to understand, but also within atarim, you can collaborate on this in a visual way, which is a great way to just it get them trained on this collaboration system or. But right after that, we’re going to dive into the wireframes and this is something that I shared with you here.

My cell is something that people can actually download and we created this for free. So that everyone can install this in their agency. This is something that we did at my agency for hundreds of websites. Before we started designing, we created a template of what the website should look like.

And the reason for that. And again, it’s not about going to Photoshop and take four days to get, to create something from nothing. And every time you start a project, you start from scratch. These quick templates, just allow you to delete the sections that you don’t want. And then within five to seven minutes, you have a full working prototype or wire frame of.

Of the website directly inside the browser, which gives the clients the understanding, how it looks, how the website is gonna feel when they’re going to land on it eventually without any design stripped out of the design. And so there, you’re going to be able to already see that gives another opportunity for them to say, wait, this page we don’t need, or what happened to that page that I forgot to tell you about?

So before you started building really, you already have the ability to flush out all of these miscommunications that later on become scope creep if they are not discovered early enough. And for those that want to grab that template for wireframing, we’re going to leave that in the show notes, but what’s the link in case they’re listening and want to pop over.

So that’s, atarim.io/lp/wireframes. But I think that even if you’ve got Google atarim search atarim wireframes probably going to find this thing and we created this for every Pagebuilder that is out there. So that it’s easy to install directly into the agency. Even if there isn’t something there, you’re going to be able to see how it looks like.

So you can create some for yourself and that’s a really fast and easy way of doing this instead of going into Photoshop and then sending the clients a screenshot or JPEGs of this design, which again, they have no idea how to interact with. Now there’s another really interesting point about these wire frames.

For the first time, it allows the clients to visually understand what content they need to provide. Because Marcel, you’re a marketer. So I know I showed that. I showed that landing page with you just the other day to get your feedback on this. And and when you think of a landing page, what are the components of a landing page of a converting land page?

It doesn’t really matter what the content is at this stage. You know what the layout should look. That’s the same thing for someone that builds website, we can already close our eyes and imagine how the website is going to be structured. Probably going to have a hero section with a call to action and a big selling point at the top.

Maybe after that, we’re gonna. Three blocks with icons. Let’s tell you about the the benefits of the service or the product or something of that nature. Then you’re probably going to have a left left to right section, content image, content, email. I’ll turn it to section then at the bottom is going to be a call to action or a contact us area.

So all of these components, they are part of every website that is out there, but the client has no idea. So when you’re going out and asking for content and you’re giving them a blank Google sheet, where are they going to start? What are they going to do? But it’s very easy to just look at a big title that says, this is your selling point.

This is your main selling point. And just thinking, okay, what is my main selling point? And then looking at a three section block of icons and saying, these are your benefits. So what are my three benefits? Now I can even see that it should be this long. The title should be five words. And the block below this should be one sentence, and I should probably match all of this because our mind is geared towards templates.

And we just want to match things, especially if we don’t know what is the right thing, we’re just going to look for shortcuts and and signals that are out there to give us this information. So the wire frame. Extremely powerful for gathering the content because you’re, for the first time you’re giving the client visual representation and context to what is acquired.

I absolutely love this because one of the things that I see happen all the time is a gap in client communication. Most agencies that I talk to. Discovery. And then I’m going to go into this dark room for four weeks. And then I maybe come out in four weeks with a website, cross my fingers and hope that it’s close to what the client wanted.

And in that four weeks, when the client isn’t hearing from you, they start to worry. They start to write this story in their head. They start to get frantic. But when you’re showing up every couple of days with a piece of value, they know you’re making progress. It’s you’re closing that gap from both ends.

And I think this is. Yeah. And the idea is to bridge this gap with stuff that don’t take a lot of time for us, but add a whole bunch of value to the process itself. So that again, we can keep building this momentum into it. Now, when we’re gathering this content on the, on this wire frame stage, and a lot of times we will tell the client generally in gathering quantity, it’s two to four weeks project.

You have two weeks to do this, or I’m going to give you three weeks. And then you need to come back to me with all of the content, but my cell, when you, we know that to create, to just talk about your business, we do this all day long as business owners. It doesn’t take four weeks to describe what your business does.

And so if you just have the ability to just talk about this or visually just say, okay, here, I shouldn’t have these seals. Shouldn’t have that. That is actually a three to four hour. Not longer than this, even more than this, when we frame it as a two to four week task, no one has this time. I don’t know when I was the last time that I had two to four weeks to clear out my desk and do anything there’s just dedicated to this.

So that’s where that’s when things start to procrastinate, because there is no. Reality where they can fit this into their schedule. So if it’s a three to four hour task, and this is how it’s defined and you’re giving them, and this is another like huge point for a service delivery for website builders is that the time span, the standard time span that we use for everything is two days and a week.

Always every time there’s a client touchpoint two days and the weekend. If I don’t know how long it should take two days and a weekend, the reason for this is because it gets the client thinking when in the next two days or weekend, am I going to do this? It gets them to pull up their calendar and starts to think of exactly when, instead of saying you have a week, I was like, okay, week, I’m going to do it sometime this week.

Or you have two weeks or even worse four week. Then it just, it never lands on the condo, but two days in a, it gets them thinking. So this is the benchmark for collecting content for getting the designs approved on the next stage that I’m showing here on the development of the design, as well as for the final revision before the launch.

That’s how we get a project from, and if we came out and I’ve done the calculation here together, cause I know we’re short on time, but that’s how we get a six weeks project in the good case is it takes six weeks. If the client does what it’s supposed to be, it’s supposed to do here. We’re going to bring it down to a two weeks process all together. Amazing. And Vito, I appreciate that this has been such a great, a value packed episode. Those of you that are listening, leave us a comment. I’d love to hear what you got out of today’s episode, but we are short on time. So for those that want to learn more about you at a rim and get access more of the great content that you’re producing, where should we send them in the.

So the is they’re always hanging fruitful. You guys is just go to that wireframe thing and get that’s going to be the game changer for your service delivery. If you wanna, if you want to interact with me, you can find me on Twitter, Vito Peleg and go to atarim to see what our system can do for your business.

Amazing links to all of that in the show notes and veto, any final words of advice for those listening, building websites before we tune out, right? Doubt everything, because the industry is full of lies and full of mistruths, eh, in terms of how we should run our businesses. So every time that you see an opportunity, that something doesn’t make sense just try to rethink it and you’ll see how just asking why it takes you a whole forward. Amazing. So with that Vito, thank you so much for joining us on the show today. We really appreciate you. Thanks for having you. I said that’s all for today’s episode, but it doesn’t have to be the end of your learning journey. Make sure you subscribe to our show. So you never miss another episode.

And if you want to get access to more great resources, be sure to check out pierkido.com, where we’ve got tons of other free resources, including the agency profitability toolkit, which is loaded with templates, checklists, and training videos to help you improve your agency’s profits. Fast. And of course, if you like the show, it would really help us out.

If you could leave us a review and share this with someone else who you think might get value so you can help us serve more people. So with that, thanks again for tuning in and I’ll see you on the next episode.

Start Collaborating On ANY Website in Seconds

Simply add a URL in the field and see the magic happen (Any URL)

Free Forever | No Credit Card Required

What is Atarim?

We help digital agencies speed up their clients projects delivery with the most advanced website collaboration system on the planet.

The Client Interface

Where you, your colleagues and your clients can collaborate visually to reduce back and forth and confusion to zero.

The Agency Dashboard

The main hub of communications for your operations. This includes a built in support desk, all the requests from the different projects you're working on and a bunch of automation tools to help you speed up the work.

Our Agencies Serve Some of The Biggest Brands in the World

From small businesses to the biggest brands in the world, our agencies and freelancers are making an impact with more than 120,000 of their clients.

Why 5,000+ Web Agencies Trust Delivering Their Work With Atarim.io

Start Collaborating On ANY Website in Seconds

Simply add a URL in the field and see the magic happen (Any URL)
Free Forever | No Credit Card Required

Save Weeks & Months on Every Single Project.

We’ve analyzed the time saved on more than 120,000 projects that have gone through our system. We found that the average saving is 2 hours per day, per team member(!)

This means more than 2 months per year per team member gained by implementing Atarim.

This field is for validation purposes and should be left unchanged.