How to Organize Website Design projects for Free Using Asana

As you all know, I'm a huge fan of operating procedures and developing systems in your business—so you can scale, delegate, and all that good stuff.

And I wanted to show you with an inside scoop of how I organize all of our web design projects, so all of our team members know at a bird's-eye-view where the project state is, where we are in the process of developing that site, and how they can make changes and updates to that.

So, here we have Asana, this is a task management system we use. They have both a free and premium model. You can get away with a ton with the free tool that they provide.

Organize Projects into Segments

And so, what we like to do is, we like to organize projects in these segments. And so, we have almost like these cards here, where we have them organized based on category.

Site Maps & Website Content

So when we get into the design and development process of a website, we usually start by creating a Site Map, then we’ll move into Website Content Doc, so we’ll either collaborate with a copywriter or we leverage our internal team to develop a copy—with the client—for the site.

Low-Fidelity Wireframes

Then we move into Low Fidelity Wireframes. As you all know, a low fidelity wireframe looks kinda like this. It’s basically what the site looks like without the bells and whistles.

So it’s really just frames, content—and it looks very plain but it shows the client a very specific view of what the site looks like on desktop, mobile, or multiple device types. So here’s an example of one that we created. You can kind of get an idea of what that looks like.

So you can see, we have the logo, we have the main menu here, and the content here. So that’s the low fidelity wireframe.

High-Fidelity Wireframes

Then when it comes to high fidelity, a high fidelity wireframe is essentially what the site will look like. So the reason we do low fidelity and high fidelity is because this gives us an overview of the architecture of the site and what it’ll look like.

So this is an example of a site that’s currently in high fidelity. So we’ve designed out the layout, and now we’re working from there. So now, team members can see, at a bird’s-eye-view, how that project looks in this Asana board, and they can see where we are in the timeline of the project.

Website Development & Quality Assurance

So also, Website Development, that’s pretty self-explanatory, that means the website is in development after high fidelity. So once the designer has those high fidelity designs, now they can go and develop the site. And they have all the assets and tools that they need.

Now, Quality Assurance is the process after development, where we go through each page, make sure the links are working properly, make sure we’ve set up titles, and meta descriptions, and all that good stuff. And then we jump into Website Launch and Website Management.

Now the reason I broke these up into sections is because, over the years, it’s just been easier to see it at this eye’s view. It just helps you know where you are in the project. And any team member—whether they’re a designer, developer, comp manager...even if you’re just a freelancer and you’re looking to organize your process, this is a great way to do it.

Sample Asana Workflow Process

Now if you clicked one out, what we usually do at these jobs is we have the client acronym, we give every client a specific acronym. That way we know who we’re referring to, and we can share these acronyms within Slack. And then we have the Title, which is Webflow Development—this is what we’re doing for this client.

So if I click in there, it will show me all the specific tasks that need to be completed as a part of this job. And the way I do that is that I segment those into subtasks.

Breaking Down Tasks into Subtasks

So, for example, we have Low Fidelity Wireframe, and then all the options here. We have High Fidelity Wireframe, with the options here, and then it goes through the entire process. And this has everything, every team member’s a part of, and assigned explicitly to that person, so that way we know that we’re getting the job done.

Now to precursor the web design and development process, we also have similar things in Design. So before we even get into design and development—let’s say, we’re bringing in a new client. If we’re bringing in a brand new client, that means we’re probably doing their brand identity—which is logo, brand guidelines, all that good stuff.

And so, what we like to do is segment that into 3 sections: we have To Do, we have In Progress, and we have In Review. And once that passes In Review, it moves to Completed—essentially that job will be moved into Web Dev.

So if we look at this project, for example, Branding UI, you can see that we start with Logo Design, then Once Approved—we have specific tasks, then we jump into the Design Sketch Website Wireframe. And then once that’s completed, it goes straight into Web Dev.

So, again, I just wanted to show you what that looks like. And give you kind of a bird’s-eye-view of how to organize your projects explicitly to tell clients what’s going on, have your team members know where you are in the project, and how close you are to your ultimate goal.

So if you have any questions, let me know. If you’re looking for training and things like this, there’s a link in my bio. Check it out: it’s my Website Design Studio Accelerator Course, where I teach you tactics like this to grow your biz.

Otherwise, check out my other YouTube Videos. I have tons of free resources for you to use. And I’ll see you on the flipside.