The Power of SOPs, Documentation, and Starter Templates
We’ve all heard the phrase “work smarter, not harder,” but it can be hard to know where to begin to create more efficient workflows and actually put the concept into practice. As a business owner managing multiple complex projects at once, I had to learn to document my processes and create more efficient workflows if I ever wanted to have a life and hire help.
Standard Operating Procedures (SOPs)
I read Atomic Habits by James Clear a couple years ago and the line that resonated with me the most was “You do not rise to the level of your goals. You fall to the level of your systems.” I felt called out in a good way! I’ve never had a problem dreaming of ambitious goals, but, up until that point, most of my processes existed in my mind and I didn’t always execute them consistently. This led to several problems.
For one, I had to rely on my memory, which was typically okay if it was something I did often, but, if it was something I only did occasionally, I would have to relearn what I did all over again. I was working 14-15 hours a day and it’s no wonder why! I knew I needed to start creating Standard Operating Procedures (SOPs) so that I could easily turn to a step-by-step process as needed and so that I could eventually get help. I also realized that even if it was still just me working through the steps, my outputs would be better and more consistent if I followed the same process each time and saved myself the mental energy involved in trying to jog my memory and make similar decisions again and again.
I’ve now built up a library of SOPs for most multi-step processes my company engages in to create and update website projects. And, in Q2 of 2022, I was finally able to hire a couple part-time team members to start helping me carry out these tasks. They’ve helped me flesh out the SOPs even more in Asana, the software we use for project management.
Thorough documentation
Of course there are other resources and case-by-case scenarios that are harder to outline step-by-step and require more extensive documentation. I’ve used Notion for notetaking and, for some projects, client communication and organization of files and assets, for several years. It’s an amazing tool that can be used quickly and simply for basic documentation, but the possibilities are endless when you start learning more advanced capabilities with databases.
Over time I’ve created organized documentation for programs and procedures we rely on and refer back to all the time. This has saved us so much time and, again, allows us to create consistent outputs that are more polished.
I especially love being able to easily embed Loom videos (screencasts) and Figma files in Notion to add to the text and to-do lists!
Starter templates for Webflow and Figma
Another crucial step my team and I have taken to create more efficient, consistent workflows is to create starter templates for both Figma and Webflow. Both have just enough of a framework to save hours over time, but not so much that they aren’t adaptable and only somewhat usable from project to project.
Our Figma starter includes frames for all of the basics every website project needs: color palette, typography, buttons, calls-to-action, logos, and high-res images. The text styles for typography are also already established (H1, H2, H3, H4, H5, H6, and body text) with defaults that serve as a good starting point for most projects. The home page frame is also set up right next to the assets and base styles so that we can really hone in on that to start. Separate pages have already been created for Home, About, Contact (the basics for most websites), too, and the home page frame gets copied onto the Home page in Figma once we have it more fleshed out.
Our Webflow starter includes a top navigation bar and banner/announcement, basic footer, Home, About, and Contact pages (mostly blank, but have the navigation bar, banner, and footer), global utility classes for the Finsweet Client-First class organization system, a style guide that makes it easier to establish base styles, accessibility enhancements (“Skip to main” link and custom code for navigation bar dropdown focus states), and custom code for generating the footer copyright year automatically.
It took less than an hour to set up the Figma starter and a morning to set up the Webflow starter. All I could think is, wow, I should have done this sooner!