3 Ways to Add More Value to Clients Projects in Webflow

As I work through Webflow client projects, I'm always thinking of ways that I can add more value through my work by making the websites I build easier for clients to maintain and update themselves, and easy to work with even years down the line.

Since Webflow is a tool that takes pride in its ease of use, you should be able to comfortably hand-off websites to your clients whilst knowing they aren't going to break it as soon as they get access to it. Because of this, you can add a lot of value to your projects through building a system inside of Webflow that your clients can understand.

You should be able to comfortably hand-off websites to your clients whilst knowing they aren't going to break it as soon as they get access to it.

Though not every client will want to maintain the website themselves, by putting the time in building a straightforward system from the start, you're making it easier no matter who is the one making updates.

Here's the three ways you can add more value to your client projects:

1. Providing a website style guide - so that your client has a place that they can go back and see all the styles and components that make up the website
2. Setting up a drag & drop symbol system - so that clients can build new pages off of the pages that have already been built
3. Doing a recorded Webflow walkthrough session - so that your client knows exactly how the set up works, and so they have a record they can go back of how to use Webflow

Let's jump into these three points now.

1. Providing a website style guide

I've had enough clients ask on hand-off, "is there somewhere where I can see all of the styles used in the website?" that having a style guide is now a must-have for every website.

Having a go-to page that holds all the classes used throughout the website means that your clients can reasonably add and change the look of the website without having to create new styles - and constantly creating new styles can very easily turn a website into an inconsistent mess.

If you've never created a style guide before, you can easily copy my style guide cloneable and follow through with my tutorial on how to use it.

The style guide should contain all the different types of content used throughout the website, so clients know exactly how you've set up headings, images, buttons, forms, and layouts.

Even if your client isn't a developer and never ends up using this page, if down the line they need a different developer to make updates, it's going to be much easier for them to pick up where you left off.

2. Setting up a drag & drop symbol system

Let's say you've just finished a new website for a client inside of Webflow (hopefully not all in one coffee-fuelled developer sprint). Since all of the website pages are built on stackable sections that sit one on top of each other, you can add one extra step in to make the website 300% more powerful down the line - the drag and drop symbol system.

By going through each page and turning each section into its own symbol, you can very quickly collect a range of different sections that can be stacked in different ways to create new pages.

Simply select each section, turn it into a symbol by using Command + Shift + A, and then give it a meaningful name that the client can decode. Usually giving each section a category and a specific identifier is enough to know the content.

Take this one step further by adding in a "Symbols" page to the website and adding all the symbols to this page. This way the client has a page where they can see exactly what each section looks like for future reference.

Now when a client wants to create a new page on their website, they can simply drag and drop in previously built sections to get new pages up and running in mere minutes.

3. Doing a recorded Webflow walkthrough session

Everything aside, if you're not teaching your clients how to use the system you've built, you might as well be shoving them a dart gun and telling them to hunt a lion without any help.

By doing a Webflow walkthrough with your clients, you're making it easy to see just how flexible and straightforward Webflow is to use, and giving them the knowledge they need to feel confident they can make updates to the website if and when they need to.

You don't need to teach Webflow to clients to the point that they are experts, just to a point they feel like they understand your system.

This means you won't have to show them every single tab and section inside of the designer, you will only need to focus on the essentials.

When I do a walkthrough with clients, we will start by going through the editor, as this is the easiest side of Webflow for clients to update the website. Through the editor you can show how to easily update text, images and links, and also add CMS items such as blog posts or team members.

After the editor I take clients through the designer. Again, you don't need to show every single feature, just go through the basics of how you've set up pages, and where they can find the style guide.

Since I set up the drag and drop symbol system for most of my client projects, we also go through this. I show how easy it is to create new pages by dropping symbols into a new page, and then edit the content to create a brand new page off of already built pages.

This might be a lot of information for your client to take in at once. If you can't count on yourself to remember the name of everyone you meet when you're introduced to them, then you can't expect your clients to commit everything you've taught them to memory.

That's why it's good practice to record every session you do, and provide the video link to your client so they can come back to the recording if they ever forget anything. This is also helpful if they are bringing in a new staff member to maintain the website, as they already have a place where they can get up to speed on how the system works without the need of your help.

Depending on what system and software you prefer, you can either use Quicktime to do a new screen recording as you walk through the website, use Zoom to record the meeting, or any other screen recording software you prefer such as Loom.

Summary

I've heard of far too many horror stories from clients where their previous developer left their website in a state where they couldn't easily change anything. Don't make the same mistake.

Instead, make the handoff process a breeze by:

• Providing a website style guide
• Setting up a drag & drop symbol system
• Doing a recorded Webflow walkthrough session

By equipping your clients with the right tools to maintain the website internally can save them thousands of dollars in the long run, and therefore adding plenty of long term value for all your future client projects.