Demonstrating progress was easy. In the old days, when I would work on a website project, there were some natural phases to the work I did. Your process may have been different, but mine went something like this.
- Phase One: Define project / Agree on Scope
- Phase Two: Create Thumbnails of Design Concepts
- Phase Three: Create Photoshop Files of Final Design
- Phase Four: Turn Designs into Code
- Phase Five: Fine Tune Everything
- Phase Six: Launch
If this feels very “waterfall” to you, and you're more of an “agile” person, know this: I did a lot of iterating in each phase with customers until they were happy.
Does this sound familiar? I'm ok if you had a slightly different approach. But I'm guessing it was more similar than dissimilar. And it used to really work.
How did people understand progress? Well, once I laid out how things were going to go, they understood both the process and the deliverables they would expect. They'd get a scope document, wireframes, design files and then there would be a bit of quiet during the coding part, and then they'd see everything.
Did you catch that? There would be a tiny phase of silence in stage four where I would work and they'd wait. And it was short enough to not worry anyone.
These days I use different tools
The good old days didn't include iPads and iPhones—know what I mean? Things were so simple when Photoshop allowed me to paint a picture or two and not stress.
But the moment clients wanted to know what things would look like on phones and iPads, things got harder. Suddenly you'd make a modification to one screen and they'd want to know what it would look in landscape mode.
People were still talking about “above the fold” even though there was no fold on a mobile device.
So I had to stop using Photoshop. And I spent a bit more time with thumbnails. But clients didn't really love the lack of polish. They just couldn't “see” it.
Today I do most of my design directly in the best Page Builder for WordPress, called Beaver Builder.
It's a different tool completely. And it helps people see things better. But the process has changed dramatically.
Reusable Design Components Change Everything
In the old days, what I would do is create a full and complete image of the entire home page and other key pages. I may have created artifacts in my design tools (my libraries in Aldus Pagemaker and Adobe Illustrator were incredible!) but clients didn't see those parts. They saw the final image all put together.
Today's sites are a bit different. You see a lot of designs with panels of content, and design concepts that are shared across the site, but with different content. These are re-usable parts that help a design feel connected, which is powerful.
But it changes how I design sites.
Today I design a panel. A design component that is re-usable. It's a bit of code (is CSS really code?) and some graphic elements. And once I have it, I know I can use it in multiple places.
Look at this simple design, used in different places on a site to see what I'm talking about.
What you'll notice is that there's an image on the left side (with lots of white space around it), a title on the left in all caps, a colored line that sits under the title for a bit, and left-aligned grey text under it.
That's a panel. A row. In Beaver Builder, it's a saved row. And it can be used a lot of times, in a lot of different places. And that means one big change.
The site is assembled more than it's coded.
Assembled more than Coded
If you've designed, let's say, 5 core layout structures for pages, and created 6-10 saved rows or partial templates, then when it comes time to build the site, it's not really about code.
For a client a year ago, I did the design work and they approved it. I then created the partial templates—the saved rows and modules. And then I asked the client for their content. They sent me PDFs of lots of content. (This was a business that had all their content ready!)
Then I gave my assistant the content and she didn't do any coding. She literally assembled their small business website. Simply by using those reusable design components in Beaver Builder.
Help clients feel confidence
But did you catch what changed? If you've worked with clients in this way, you know immediately what happens.
The client doesn't ever see what it will look like until really late in the process. They don't get the full Photoshop file. They don't necessarily get tons of finished page designs at all. They get partial template designs. They get hints of parts of the site.
And they may not “see” it. And that creates risk.
So how do you help clients feel confidence? In this new approach, what's your approach when it comes to demonstrating progress?
I'll tell you what I do. Hopefully it helps you.
- I create the first few templates or saved rows. Enough to create two very different pages on the site.
- I show them the templates or saved rows. I link it back to the wireframes so they see the connection.
- I then demonstrate the assembly of two pages. The power here is that they see the abstractions at work.
- I create a list of templates and a list of pages. This is our checklist of work that needs to be done.
- I iterate on templates and pages, constantly updating the list. I keep them updated on progress of the list.
- I invite them to meet regularly. This way they can see the site's progress any time they want.
Do you know what the crazy part is? Most of them decide after one or two meetings that they just want the checklist emailed to them weekly and that's enough for them. Once they learn this new approach, most don't want to waste their time watching me assemble pages.
But they have the freedom to do so at any time. And that's what helps them feel confident.
The Power of Beaver Builder
Can you do this with other page builders? I'm sure you can. Or at least I assume you can. I have stopped using any others for any work I do.
But the real power of Beaver Builder is the ability to export these saved panels. To take what I've created on one site and export it so that I can potentially use it elsewhere. It's my library of reusable parts all over again. And that ability to export templates makes Beaver Builder an incredible tool in my arsenal because it helps me speed up development.
And you know the other thing clients really love, other than knowing progress is happening? It's the ability to move faster than they thought possible because you're using the right tools.