The proven 6-step-process to high quality Webflow sites and happy clients

What you get through this proven 6-step-process:

• Give your customer confidence by showing them early results with this process.
• Work more productively as a team by following a clear process and reducing mistakes
• Improve your customer satisfaction by following a bulletproof framework for achieving the best quality for your project
• Increase your capacity by making adjustments centrally and following standardized processes instead of reinventing the wheel
• Immediately implement a highly professional process with your customers, even if you don't know how to start

‍

Processes can be a burden

When I started my first very own freelance business, I was enthusiastic and a little bit afraid at the same time. I worked at different companies and an agency before but never experienced that perfect flow where clients would actually be satisfied, projects delivered on time and us having fun at the same time. In many cases it was a rush - to be honest: I didn’t want to start my own agency because of my experiences in my job in an agency before that. What I remembered was running around, making awesome designs, delivering it to devs, getting them back completely different and somehow explaining to the customer why it looks different in the web then on paper and also needed 3 weeks longer than expected. It was a rapidly growing and well established agency but the processes were heavy. Weeks of planning, lots of people involved and overall pretty slow.

So when I decided to start my own business of course I would do everything different.

I am a designer by heart, it’s not just my job it’s a craft I am working on every single day to get better and serve my clients with the best quality possible. I am obsessed with entrepreneurship as well so it was clear from the beginning on that I wanted to grow and get myself out there. Quickly I became a brand in the luxury industry and had to figure out a way to serve clients with such a high demand in perfection with not only sophisticated designs and websites but also a great experience working with me.

As my customer base grew quite fast I wanted to deliver the best possible work results in the most rapid way. I was not only trying to serve my clients overall but also serve my clients with the product they wanted as fast as possible - sometimes they were used to waiting 6 months for a website with other agencies and quite frustrated over that. So I really to get started with working on designs, the website and everything in between without spending weeks on planning until everything was outdated in my clients mind already. On the other side, I wanted my client to feel like he always knows what’s happening, that everything is going into the right direction and that they wouldn’t have to worry about me doing things differently than expected. After all, design is a matter of taste, right?

No process is no solution either

Under the pressure of time I did what I thought was best and started with activism and after a first call and gathering requirements jumped right into it. I created Screendesigns, developed pages and it ended up being an absolute disaster. The client liked the designs but hat “small” adjustments that apparently had to be made on every single page of the project. They wanted it rapidly delivered so I did exactly that! Just not exactly the same way he meant it.

So that approach didn’t seem to work too well. For the next client I wanted to do everything right. It was quite a big client from overseas and I really wanted to make a good impression. So i created a document with every single question that came into my mind and handed it over to him as a briefing document. And.. didn’t hear back from him for 2 weeks. The file was so large, he didn’t even scrolled it completely through. It had about 10 pages filled with decisions to make he was never even thinking of. They very politely told me then that this is no approach he could handle with his work load so again, I was back to where I started off. As my last approach wasn’t suitable either, I had to figure out a way of the middle and thankfully had a friend that helped me out.

My friend was working at a huge corporation and very much into process optimization and happy to help me out in exchange for a coffee. We sat in my office for an entire night and figured out a process that would work in a business the size of mine, but also flexible to scale and work in a larger agency. I wanted a process that ensured, that not only I could work on, but also my team when I scaled. He explained to me the importance of creating a clear structure and sticking to it relentlessly, no matter what my customer wanted. That sounded harsh but somehow true. He told be how many times in his projects he followed the request of his coworkers of hurrying things up because stuff needed to be ready basically yesterday and how many times he had more work and needed more time overall every single time with it. With my experience of my last project I actually knew what he was talking about, happened to me the exact same way. So we scribbled everything down in detail and I designed the files and templates necessary.

We created a process that allowed me to have a clear understanding of what needs to be done first. Then get to work and create a base for me, that allowed me to create a whole picture of the design I am creating. It allowed me to explain to my client why I’ve designed things a certain way, how it reflects their values and goals and what they can expect from the deliverables of the project. The process we have created gave more security to my client as well. They knew what the end result is going to look and feel like without even seeing the full result. Also it gave me the ability to better estimate myself how much time was necessary for the development in Webflow which was quite a difficult thing to do in the beginning.

‍

The proven 6-step-process to high quality Webflow sites and happy clients

After I realized all of this and how much security, time and quality this would bring me I couldn’t wait to actually put it into action. I scheduled a meeting with my client, went through a briefing together with him, benchmarked the market and his specific competitors and got started:

1. Creating Logo designs

I created three logo designs. Of these, one corresponds exactly to the ideas, wishes of my client and often resembles the already existing logo (if available). This logo can mostly be used without the need to immediately adapt the branding of the company on all measures, which of course can be a costly undertaking. The second logo, I create based on my benchmark analysis and the customer persona and is therefore my personal recommendation. Often, with such a logo, the client can already stand out strongly from his competitors, set a new example, show to be transformable and reflect new values. The third logo can be a second recommended variant from my side or something a bit more unusual. Some clients are open to something crazy (or want to be), but aren't quite sure about it yet. This is where I use the third logo design.

2. Creating a brand manual

I create a brand manual that contains the most important design aspects in addition to the logo designs. In the brand manual, I define an overall vision for the design that makes it really tangible for the client. I use it on mock-ups and other measures that I know are important to the client.

Part of the brand manual are:

• Typography
• Colors
• Design elements
• Design examples
• Teaser of the homepage

The brand manual builds the core of all measures created with the design. It reflects all aspects and counts as a single source of truth between my, my client and the team.

3. Creating the screen design in Figma

I create a style guide in Figma based on the brand manual and create a space for every single page I will design in the Figma file. Now I start with the elaboration and mostly start with the design for navbar and footer, which I then already add to all pages. After that I work my way forward page by page and complete the whole screen design.

4. Create the Webflow project and style guide

Only after all the pages have been completed in Figma, reviewed by the client and approved, do I start creating them in Webflow. I start each Webflow project with a classic setup process by first creating the style guide according to the brand manual and adding all classes. In doing so, I work according to the Client First 2.0 class system from Finsweet.

5. I create each page and add page structure, navigation and footer.

Since I have already worked precisely in Figma, I know exactly which pages I need to develop from the beginning of the development process. I create each page and already add the page structure, navbar and footer to each page so I don't have to jump back and forth in development later.

6. I develop each page in Webflow.

Now I fully concentrate on the development of the page designs from Figma in Webflow. To do this, I develop the designs exactly as they are already layouted in Figma. For this purpose, it is recommendable to use components that, in the best case, have already been used in Figma. This allows me to dramatically speed up the development of sections with little individualization or unique features. Other sections I have to develop from scratch because they are highly individual. I develop all the pages, discuss them with the client and hand them over to them to add to the content.

‍

Results that blew my mind

It turned out that this process just works brilliantly. It's efficient as it avoids us jumping back and forth between multiple tools, gives us enough guidance and focus to stay on task, and a clear goal per process step. At the same time, it doesn't constrain us or rob us of quality or time.

Quite the opposite: with this process, my team and I have been able to handle 3 times the project volume than before.

Thanks to the clear guidelines in the brand manual, my employees make very few mistakes and quickly find their way into new projects. There are also fewer misunderstandings with our customers, because we always have a common working basis that never changes during the project.

Before I started my agency and was still freelancing, I was quickly gaining more and more clients, so I couldn't take on any new projects because I wasn't able to handle them anymore. So I decided to work with other freelancers, but I had to make sure I got a proper estimate from their side to guarantee that it would fit into the project budget. I couldn't afford to pay them additional fees if additional changes were needed. This process was very helpful as I got the freelancers involved in the project as early as possible and ensured that all parties were on the same page.

This has allowed me to grow my agency and serve more clients today than ever before. I was able to expand my position in the luxury industry and still serve clients on time. I became more confident in taking on new projects and planning, as well as forecasting future capacity. 

I would love to see this happen to you as well!