How to scale a web design agency with standard operating procedures

what is going on everybody john b saunders here the founder and lead web designer at 54 digital and in today's presentation i am breaking down scaling your web design agency with sops in other words standard operating procedures i'm going to show you how to set up systems create a knowledge base and develop your agency so you can grow and scale your efforts i know it doesn't sound super exciting but trust me this is something that every agency freelancer or individual working in the branding design space need so without further ado let's go ahead and dive in y'all so first things first of course i got to tell you a little bit about me just want to give you a brief overview before we jump into this presentation and get you going with your knowledge base and standard operating procedures so just a precursor understand that you're going to be leaving here with operating procedure examples ways that you can systematize your business and more and so just a little bit about me i'll keep it brief here's my life in pictures um a family guy husband gamer super nerd as you can see in the pictures here i've got an old nintendo set i think i got that when i was about five years old you know you have to have the duck hunt and all that good stuff there so i'm still a gamer to this day love it it's an amazing outlet and uh i love web design and branding because it allows me to use that creative side of my brain as well as the analytical side which i'm going to be breaking down today in the pictures you'll see my wife dee and my son logan and i'm a huge advocate for providing value in the bottom left you can see a picture of me presenting to a few folks here in sunny south florida just a few things regarding who i am and what i've done i'm an avid creator and web designer huge advocate for webflow and no code tools as well i'm the founder of 54digital we're web design and branding agency in sunny south florida with the worldwide remote team we get to work on really dope projects for startups i'm also the founder of black illustrations which is a platform where you can download illustrations featuring people of color doing all sorts of really cool things for your digital projects i also founded urbanwallet.com which was recently acquired and is a blog for financial literacy lastly if you want to talk sci-fi marvel legos and hip-hop i'm your man hit me up after this presentation and i'll be happy to chat it up with you so here's an example of 540 digital our branding and web design agency that's the bread and butter that's where all of our source of creativity comes from of course black illustrations the illustration platform with integrated cms course built with webflow and then lastly let's go ahead and go into the overview so you might be thinking well what are sops you might have heard the phrase before maybe you haven't uh maybe you haven't seen the acronym prior but i want to break down what exactly standard operating procedures are and how they can help you in developing and scaling your business so first thing i want to do is talk about what it is sops are literally step-by-step directions compiled for your company to help your team members carry out complex routine operations now you might be thinking well you can't automate creativity or i can't take what i do and teach someone else to do it you're wrong dead wrong like you can literally take a system create a process and teach what you know to others so essentially you're taking your ip right your intellectual property your hiring team members or delegating to team members to help them build their skills and thus almost creating a clone of yourself right because they're learning your specific way of doing things and a lot of times that's a huge unique selling proposition also with sops you can achieve efficiency mainly being if you have step-by-step directions for something it's going to be a lot easier for you to mitigate mistakes because you literally have step-by-step directions on how to complete something in your business you also create quality output and uniformity we've created operating procedures almost everything in our agency from quality assurance to creating web design art boards to brand guidelines i'm going to show you probably four or five operating procedures that we use right now to scale our efforts with a completely remote team also sops can reduce miscommunications if you're having an issue with a job or something is going wrong within your business you can always go back and refer to those sops now again sops might change over time but ultimately you have a repository of exactly how to run your business so first thing i want to do is show y'all one of the goats one of the greatest of all time when it comes to sops this is my man ray kroc now there's a movie called the founder you also check out it's kind of crazy kind of ruthless uh but it's a really good film on how mcdonald's started and how they leverage sops or standard operating procedures to build their business with that said ray kroc is like i said the goat of sops and the founder of mcdonald's well a little bit more on that later so ultimately what differentiated him was the mcdonald's strategy ray led to a fully made burger in 60 seconds and every time that burger was made it was exactly the same every single time so he was able to create continuity in what he was developing his burgers with now if you've had a big mac double quarter pounder with cheese i mean you definitely know that when you go to mcdonald's you're getting that consistency every single time now let's go ahead and break down his strategy so first thing he did was he had a standardized operations that included portion sizes food preparation packaging and ingredients in a 75-page manual now listen you don't need you might not need a 75-page manual to execute your sops but just to show his level of dedication showed how he was able to systematize so he started out creating his operating procedures now he had that operating handbook and that process made it efficient and easy for others to learn as team employees kind of came and went right a lot of times when you're working fast food a lot of your employees are younger it was important that he had these operations so customers could receive a certain level of continuity and quality every time they came into one of his restaurants his strategy was a huge and vital role in helping mcdonald's grow to 25 000 worldwide stores and become the best fast food chain of all time when you think about your favorite spots like mcdonald's or chick-fil-a they all have operating procedures essentially everything that you do does you just might not have documented it and shared it and so that's what i'm going to be talking about in this presentation in full detail so let's talk about why you should create sops and how they can help you scale your business so one they help create consistency if you're a web designer and you're trapped in the sales process or maybe you're a web designer and you have some really great projects that you're working on but you don't have time to do a competitive analysis or create an artboard or maybe you're growing your agency and need to organize your ip or your intellectual property so that you can scale a lot of freelancers out there suffer from the same thing you go you become a freelancer you're working and either you have a influx of work right and multiple clients that want to collaborate or you have so much work and you have so much going on that you don't have time to do the fun exciting stuff that you love sops can help you get your time back and when i say that i speak from experience i've been there hundreds of times where you're sitting there you've got a huge pile of work you can't take the time to execute and really use your creative freedom to develop projects that you're proud of and so you're rushing to get work done you might miss things you're having issues a lot of these things can roll into one when you're lacking those sops so real quick i got to tell you a story of how i got started in it so rewind the agency's been around for about seven years rewind back to the first like couple years i was working by myself as a freelancer doing mostly design and development and branding for startups so what happened was i was doing the work myself everything and every time i got a new project it was okay i'm gonna hit the ground running now i one i couldn't take on as many projects as i wanted because i didn't have systems i was just kind of working and getting stuff done as it went and it really became a problem for me because i wanted to have high quality output and great work but it was starting to decline because of my workload so the first thing that i did was i literally said okay what first position can i hire in and secondly how can i literally write down step by step what i do in the agency so i did it i literally took a piece of paper got a pen and got to writing i wrote down every step of the process when it's web design i wrote down okay first thing we do is a brand discovery session for an hour after that discovery we'll create the site map this is the exact process for the site map open up the document step two write home step three right so so it's literally making it so foolproof that you can give it to your aunt your mom your friend someone that works completely outside of the industry and they can execute at a high level so you might be thinking well what can i actually make into an sop essentially anything podcast outreach client onboarding cash flow management customer engagement on-site seo product launches competitive analysis all of these things can be systematized now keep in mind i'm not saying automated because some of this stuff does need some manual review but ultimately by creating these systems you're developing your intellectual property for your agency you're creating a knowledge base for new hires and you're essentially making it so you can scale and again you don't have to be scaling to 30 million a year right you might want to scale to 100 000 or 500 thousand or 750 000 you can't do it without sops just four more options on developing this process it creates a responsibility in your biz so you can onboard train and scale faster now some of you might be a freelancer that might say hey it's just me i don't need sops because i'm not building a team well not yet and also you don't necessarily have to have a huge team either you can create these systems for yourself and you can do a few things let me break this down and this is something i've done myself so as a freelancer you might say well i don't want to hire so i don't need to develop sops i like working on my own i like having my own clientele and there's nothing wrong with that the one thing that you want to do is build up your sops because then you can essentially package that as a product so let's say i have an sop for how to build high fidelity wireframes as a freelancer i can take my sops i can package it and i can charge someone for that course right or that training it just makes it so that you have these these products that you can develop but then you can also train team members i mean the possibilities are endless so just to break down why you should create sops it creates a dedicated knowledge portal you're able to mitigate mistakes because you have step-by-step directions you can improve your accuracy and it makes onboarding so much easier so now let's go into how to create an sop i'm going to show you break it down it's very easy to do it is time consuming at first but once you get the hang of it and you start creating slps and you see your stuff getting done you're gonna be like yo why didn't i do this sooner so if that's you make sure you tweet me when you see this all right so step one is you're going to identify first thing you want to do get your paper get your ipad get your procreate up get your apple pencil whatever you need identify what you would like your sop to accomplish when you can understand this it's easier to write an outline and define the details and we'll go into specifics when i show you the example sops in a few minutes so one identify right think about what you need to create an sop for two perform now you're going to perform that task take your time be efficient and don't worry if it's not perfect sops are going to change probably for the rest of your life so as you build these out they're always going to be updated based on technology changes in the industry and more document now while you're performing the task document every aspect of that process write down a detailed list of items that need to be executed with the end goal in mind so if it's for example on-site seo for a website step one do a competitive research on keywords step two add titles to each website page and webflow by xyz step three add a meta description so literally breaking it down step by step document as you do it because as you're documenting and performing this you'll get better you'll have your sop documented and then you can delegate that so identify perform document next you want to record use software like loom camtasia zoom record this is going to be for you or your team so that way they can execute without you now i like loom the best because one it's free up to i think 720 and then you can pay for hd which is really affordable i think it's like 10 bucks a month and you can do screen caps you can download them you can record up to 4k really quality tool and it works through your browser so it's really easy to access so now that you've identified and now you moved into recording and documenting that now you're going to record yourself performing the act next you're going to review now take the sop look at the steps make sure that your team members understand it take notes accept feedback and then keep going then update you're constantly going to be updating sop it's not one set and done it's great because you're delegating and other folks are taking that and being able to run with it but you always want to make sure that you're keeping relevant one example with us is for a long time we were using adobe xd then we switched to sketch for our wireframing and prototyping and now we primarily use uh figma since we've done that we've had to go back and update our sops to make sure they're reflective of the newest platform that we're using so always keep that in your mind so just to recap that because this is a very important point that i want to get across one identify identify what you want your sop to accomplish two perform the task actually do it once you've identified and you performed it make sure you're documenting every step of the way as you complete those tasks also while you're doing that make sure you record you can use loom camtasia or zoom to accomplish that and then you're going to review that sop with yourself and the team to make sure that it's of quality and ready to roll and then as that sop is being worked on and used you can update that sop as needed so that's the sop strategy as a whole now i do want to show you some examples of what that looks like so in this document here and you can use some tools which i'll talk about later this is a list of all of our sops or standard operating procedures and then if you look on the right hand box that's an actual individual sop that we've built out and we're going to show you some examples so you know exactly what that looks like and then you can start to really think about the things that you need to document at your agency to get the job done so let's look at a few sop examples for web design i'm going to spend some time here because i really want you to understand and know that you can create these systems so uh so explicitly throughout your business so first we will look at is adding alt text to a website this is a training that we created for adding alt text to websites for accessibility now it's a detailed process because some websites might have 50 100 200 images we want to make sure that we're providing all the information that people need to make an informed decision especially if they're coming to the website from an accessibility perspective meaning they're looking at the html they might not see the images so we want to make sure that we're titling images appropriately and with enough detail so here's an example of an sop first things first you want to have the last date it was updated now main reason being is it'll tell the team member that's using it okay it's been like five months since it's been updated um let's go ahead and dive in and do an update to this sop then what you also want to have is a link to a video training and i'm going to get more into detail on that because that's important now when you're creating your sops remember i said to record it with loom or zoom or camtasia whatever platform you're using the main reason you're doing that is because you want to have yourself walking through the process right so you're recording yourself going through these steps you have the directions on like the right hand side which i'm going to share an example with you in a few so you can see what that looks like and you can take that video what i do to make it as easy as possible take that video upload it to youtube as unlisted and then post that link here in your doc and this doc can be through notion or google docs whatever you prefer so to reiterate we've got last updated date we have a link to the video training which is hosted on youtube through an unlisted link and then in the video we have those directions right so we have our list up there and then we include directions and the brief so if you look at this sheet here this is the adding alt text to a website sop that we created at the top we have the data was last updated and then we have a link to the training now right below that we have a brief the brief just gives you details right before you break into the steps so we talk a little bit about what all tags are what all descriptions are how they help you develop your idea and how they title images properly on your website for compliance now under that we'll have best practices and under best practices we have describe the image and be specific use both the images subject and context to guide you and then right below that we actually have a link to an article that we found on hubspot that details the ideal alt text for an image so now the person going in and looking at this operating procedure can understand okay i know the last data was updated there's a link to the video for me to watch in full that i can learn from they're providing me with details on what alt text is and the best practices and there's a link to how this is performed and how i can get great at this amazing now right below that they've got the directions on actually how to initiate and go through that process and when you're documenting your steps make sure you're as detailed as possible you want to make it so that anyone can take this and execute at a high level so we log into webflow click the dashboard choose your first project and open designer so i'm walking them through that exact process and since we've initiated this about a year ago our alt text process is a lot easier we have a couple team members that can execute this and get it done and our quality assurance process has been shortened drastically just by implementing this into our process so let me show you a few more because we've got some sops we want to dive into one thing we do when we have a client and they're about to go live we send them a document during their launch to provide them with training on how to use webflow now a lot of times we'll do this in person but we do want to have this documentation so they can always go back and refer to this so of course as you know we have the fundamentals last updated date a link to the video training and then directions in the brief now in this one what i did was i added the training video and i had the steps broken down incrementally so one is how to add a user to webflow two is how to access webflow and make changes three is making website edits so when we send this to the client one it's an amazing way to add value to what you do and what you provide webflow already makes it easy for us to integrate a collection management system and content management system and really help and develop collections so that users can easily access the cms so now that i have these steps i can send this to the client and now they can access this training at any time it's a great way to add value to what you do and it positions you as a unique selling proposition in this space because a lot of agencies aren't sending their clients trainings like this so again think of sops of what you can use internally but also think about ways that this can help you increase your clientele and add value to your process the next sop i want to show you is training for quality assurance so we have this broken down into three parts and i have one section here for you to view we've broken it down into three parts because our quality assurance process is pretty detailed so we want to make sure that we're giving clients everything that they need and team members everything they need to make informed decisions on how to go live quality assurance is just the process and steps that we follow before we go live the website so as you can see in the training here we have the video training and then we have links that that are prevalent right links to the webflow dashboard links to any tools that we might need or use we also have the name the check icons and webflow branding so we added these bolded options just to make it easier for our team members to go in and perform these audits this has made the process so much easier because now we can delegate this to the team to get the job done i'm telling y'all once you create your first sop it's going to be an addiction because now that you can do it you can systematize these parts of business and you can even improve it over time next one i want to show you is a website quick audit this is how we perform a quick audit right before launch we've already done quality insurance now everybody in the team needs to go and just check double check and triple check everything that's going on so some of your sops might be really simple some of them might be really descriptive and detailed it's really going to depend on the level of project or item that you're working on so to reiterate the things we need last updated date link to the video directions and the brief so if we look at this from a perspective of okay i'm coming in as a new team member i'm giving this training from my other team member or an account executive so break down the directions for each site we complete i would like you to perform a preview of any issues you find and then we just list it out just review each page for dead or broken links misspellings or issues lorem ipsum text issues with look and feel just all of those items and we actually perform these audits pretty regularly so as your team gets acclimated and they're training and using these they're going to get to the point where they're like okay i don't even need to check the sop but they can always reference it and go back to it to make sure that they're doing the job correctly and a lot of times we'll take our sops and bring them into our project management system as a step-by-step checklist so again it's just a win-win and i hope that once you watch this video check out this training that you definitely look at it from a perspective of this is something i need to implement asap so i have another one that i want to show you this is how we create low fidelity websites because a lot of you might be thinking well you can't automate creativity you can't create a an automation or a system for and you you can't you can't automate that creative side right but what you can do is you can develop a system that helps your designers your team flourish so this is our process for creating low-fi or low-fidelity website wireframes for our clients as a part of the process low fidelity is essentially how the site is laid out how it looks but without the branding typography images it's essentially the blueprint for your website so we created a system for this so that way our designers can focus on what they do best and we can allocate time to really performing things in the beginning like competitive analysis research art boards so that they're ready so first thing we do of course we have the training video and when it's last updated right after that i talk about low fidelity what they are and how they perform and then i talk a little bit about tools that you'll need right they'll need the site map right so they know exactly what sections and pages to create they'll need a link to inspiration we'll usually create a website artboard as a team based on the findings that we have and then leave comments on things that we really want to include and then we have an example low fidelity wireframe in figma that they can use as a ui kit so now our designer comes in and they're like okay i have a site map i have inspiration and visual assets that i can use i also have an example of a low fidelity wireframe and i also have a ui kit that i can use from figma to create this now they have all the assets and things that they need to really hit the ground running as opposed to hey can you do a low fidelity wireframe for me right now that they're empowered they can they have everything they need to make high quality products for you and your team so with that said i wanted to show you an example of what that video training looks like as you can see here this is a video from youtube on the left hand side i have my window up right and on the right hand side i have the steps that i'm going through now the main reason i record this way is so that way whoever's taking this training can see me performing the task but then they can also see the step-by-step breakdown of how i'm completing that so let's talk a little bit about the tools that you can use great thing about sops is there's a low cost to entry and you practically don't have to spend anything to create them so let me break it down you can use a doc platform i like google docs notion is a great option especially if you're creating a knowledge base they also have tons of templates you can use as well for screen recording software i like loom it's free it's high quality it works really really well with browsers as well so check that out and then regarding a mic you can grab a yeti which is about 100 bucks on amazon really good quality mic that works well these are all the things you need to get the job done your doc platform your screen recording software and your mic now just to recap everything because i want to make sure i hit all these different points and i really hope you're getting value from this presentation is one we talked about sops which are essentially step-by-step directions on how to perform specific and complex tasks in your business we talked about why you should create sops to save time to scale your efforts and to really take back time thirdly how to create sops we talked about how we break it down by having a link to the video the last day that was updated specifics about what you're performing and then the step-by-step directions on how to do so and then i shared five web design sop examples i know your brain is probably going right now you're probably thinking okay what can i sop out right now what can i take and really execute on my business with and then lastly i talked about the tools to make it happen so without further ado i want to thank everyone that's come through and checked out the presentation you can hit me up anytime i'm happy to answer your questions and i'm just happy to be here peace

Channel: Webflow

Views: 2,662

Keywords: How to scale web design agency, grow a web design agency, web design agency, John D. Saunders, 5Four Digital, standard operating procedures, SOPs, Digital, no code, no-code, NCC, no-code conf, no-code conference 2021, no-code conference, NCC 2021, Webflow, web design, build a website, visual development, no code revolution, low code, low code no code

Id: hG3vA6QBqfA

Length: 28min 0sec (1680 seconds)

Published: Sat Dec 04 2021