Systems thinking, in its simplest terms, is just a way to recognize the interconnectedness of all things. Go as big or as small as you like, all the pieces are connected and we’ll do better in our work (and in our lives) if we start thinking about how each piece impacts and is impacted by every other piece. Nothing stands alone.

Even if you’re just starting out and you’re looking to slap up a first website that’s little more than a big internet business card, being intentional about it now will help give you a strong foundation to build on in the future. If you think about your website as one piece of your larger system, you can start to understand how it will interact with the other parts of your system, and what tasks you need it to accomplish.

What else lives in your system?

Think about the tools or platforms you use in your organization, what you use them for and how you connect one to another.

Asparagus Magazine has a system that consists of a website, a newsletter, an online shop, a set of social media channels and a print magazine. It’s a pretty big system, and required a lot of thought and planning before we started designing to make sure all the pieces would work together harmoniously toward the organization’s goals. (Did you see me linking from this blog post to a case study? That’s because even this website on its own is a little system you can move through!)

How do they connect? Social media drives traffic to the website. The which has a link to the shop selling subscriptions at the top of every page. Every article has a banner in the middle enticing readers to sign up for the newsletter. The newsletter curates timely articles from the website, reminding subscribers to go read new and relevant articles. The the bottom of every page is a graphic telling you that the magazine is reader-supported and linking to the shop, which is set up to easily direct shoppers back to the site to read more once they’ve made their purchase or donation.

Once you know what makes up your system and what each piece is doing, you can put them together to further your goals.

What’s the goal

An organization like Asparagus has many goals, from increase online readership to sell values-aligned ads to grow the newsletter, but the principle applies even in the smallest of cases. Here’s an example: In my spare time I run a tiny farm where I sell vegetables and flowers, and my main goal is to increase my email list and therefore my customer base.

My system consists of a Mailchimp landing page with a sign up form, Instagram and an email account. My email is my sales channel, the landing page is how I build my email customer list and Instagram is how I draw new people in and direct them to the landing page. Nothing fancy at all, just a neat little triangle. Knowing my main goal — build my customer list — allowed me to create a system with pieces that work together to accomplish that goal.

So how do you design for your system?

The What and the Why

You’ve heard the expression “form follows function?” It doesn’t mean design (form) is less important. It means design exists to further your goals (function). People sometimes think we pull design out of thin air based on what we think looks nice on a given day, or that your website should just reflect your own aesthetic preference (so tempting, we get it for real) but design (both the visuals and the experienced of navigating them) needs to be guided by your goals.

It’s a lot easier to answer the questions “do I think this looks pretty?” than to answer the question “does this do what I need it to do?” This is one of the biggest lessons of our strategy-first (more specifically copy-first) approach. The colour palette, the type choices, the homepage layout, the copywriting, the backend framework are all pieces that have a role to play to conveying your services or your message, and they all have to work together. They don’t exist in isolation so it doesn’t work to try to create them in isolation from each other.

Especially if you’re just starting out and everything feels like a blank slate, it’s easy to get caught up in the excitement of the visual. Now’s your chance to bring to life every beautiful colour and fancy typeface you’ve been collecting. And maybe you can! At least some of them. But the questions you need to answer before you start is what is this piece of supposed to accomplish? Are you selling a product? Illustrating an experience? Conveying information you believe they need? Do you want visitors to hire you to do something or do you want them to take action independently? Who are you trying to reach? Strategy always has to come before design.

Incidentally this is why we love redesigns–more information to guide us into the next chapter!

How big do you want to be? or Plan for the path forward

Now that you know what components make up your system, how they fit together and what each piece is going to accomplish, it’s time to glance toward the future.

You’ll never catch us espousing infinite growth, and thanks to the proliferation of Tech Bro Speak I have a hard time saying the word “scaling” without gagging a little. Nevertheless, it’s important to think about your goals, about where you want to be in relation to where you are, and then plan for it. Part of increasingly the longevity of your website (and making the money you spend on it go further) is being able to think a few steps ahead so it can adapt and grow with you.

When Awl Together Leather came to us four years ago for a new website, the shop was almost an afterthought. Their primary focus was leather repair services and mentorship within the industry. They wanted the fact that the shop is queer- and woman-owned to be front and centre, and they wanted to showcase their knowledge of the industry (mostly male, mostly over 45) and their commitment to shifting it through hiring practices and apprenticeships. The online shop was tiny, a handful of leather care products they sell in their brick-and-mortar store, and was in part to ensure they qualified for a grant to funding e-commerce websites, and in part to give them the option to expand in future.

And expand they did! All their previous goals still apply, and now they have an extensive collection of ready-made and made-to-order leather products, many of which have multiple colour, size and hardware options. The shop is a much larger component of the system, and they’ve been able to make that transition from tiny to large without needing to change the structure of their website. Even four years in they’re not looking at a redesign yet. All that’s needed now is the usual updates to keep everything accessible, secure and running smooth, updates to the shop page to make those custom options more prominent, and a couple of new feature to keep the site growing with them. All because we started with a strategy-first, forward-looking plan.

Part 1 of our ongoing series on the principles of human-centred design is here — Is your redesign solving the right problem?