How I was able to improve my clients satisfaction by 10x 🪄

Today is the time to talk about something that probably is happening to some of you. I work as a freelancer and do full-stack development gigs; although I like doing front-end stuff more, but there is something that always gives me issues: Receiving feedback from not tech-savvy clients.

For them, it is complicated to explain what is wrong, but for me (like for any developer), it is complicated to fix something when I don't know what they want to change.

Trying to solve my biggest issue as a front-end freelancer

To help them on that task, I have tried many things: Trello cards, a Notion board, leaving comments in a Figma file, and even getting them to record a video with Loom pointing in the UI with their mouse what they want to change.

But no solution was perfect; they all had their struggles, and I did not like to make their lives more complicated, so they hired me to help them!

But this week, everything changed. I decided to try Livecycle.io, a platform that allows me to collaborate with my clients on live PR previews in real time. If you are in a rush and don't want to read the entire article, Livecycle.io has helped me improve my client communication, streamline my workflow and increase client satisfaction by 300% (well, not sure if that is the real number since I can not measure it, but they were really happy!).

But if you want to enjoy a good read, in this article, I will share with you how I use Livecycle.io now with all my clients and why you should try it, too (it is free to try!).

A solution could be here

As I said, I fell in love with this tool. I could go over all its features, but... that is not the article's point; the main topic is to show you how I use it.

Basically, with this tool integrated into your project, you can have a UI in the project that your clients (or maybe teammates) can use to give feedback on the web app in an easy way.

But the good thing for me (and for you, as a developer) is that the feedback is automatically synced to the project's GitHub repo in the PR you are testing. So you get all the feedback and comments in a single place that you should check every day (😉), and your clients don't need to learn new "complicated things." It is a win-win, isn't it?

Time to integrate it into my project

Obviously, I have already integrated it into one of my projects (or I wouldn't be writing about it). Still, I think the best way to learn about something is by trying it by yourself, so this will be something like a short guide so you can register for the trial and install it in some of your projects. Enjoy!

The very first thing you have to do is to register on their website. You just need to go to https://livecycle.io/ and click on the big blue button that says "Try it now":

Once you click that button, you will be prompted to register, I picked my Google account, but you can choose any of them:

Once you are in, follow the wizard to finish the account setup (it will be mostly things like creating a new organization in your account and connecting the project repo, nothing complicated).

Now, it is time to connect to your project. In my case, I want to connect it to an admin dashboard I am building for one of my clients. I want them to be able to give me UI feedback easily, so it seems like the perfect solution!

Click in the left sidebar, under the Repositories section, to connect your repo. You will need to follow the steps given by the wizard, and in less than 5 minutes, you will have the repo connected.

In my case, the dashboard is coded in React, so to integrate LiveCycle SDK in my project, I need to install its NPM package (as suggested by the handy wizard). Let's do it.

The very first step is to create a branch for Livecycle in your project. To do that, I went to my main development branch and executed this command:

git checkout -b livecycle-sdk

Now we have our "testing" branch, so it is time to install the SDK there. Use any package manager to do that; in my case, I will use yarn:

yarn add @livecycle/sdk

There is only one step left! We have to initialize the SDK. To do that, paste the code given by the wizard into the root app file of your project (if you are using any other framework, you will have the instructions in the installation assistant, don't worry):

In my case, the code looks like this:

If you need more info about how to add it to your project, I recommend you to check their official docs here.

All the code is ready! Now just push the branch changes and open a new pull request. That is important because inside that pull request is where you will find all the feedback your clients send you!

The PR must be the livecycle-sdk branch to your development branch. Once you have created it, jump to the next step.

Linking your Pull Request to LiveCycle SDK

The final step is here; it is now time to let Livecycle know which is the pull request where you want to receive the feedback.

In the installation wizard, if you click next, you will see this step explained, but basically, you have to let Livecycle know where is your preview environment. If you are deploying your project in one of their supported platforms, the process is automatic; in any other case, you can do it manually with just one command!

In my case, the project is hosted in Vercel, one of their supported platforms, so the installation was just one click. That is cool.

After that, we see the message that every developer loves to see:

A well-done screen!

Playing in the Playground

If we open the playground, we can start receiving feedback, so I did it:

Once you open it, you have a short wizard explaining different functions, and after that, you can start playing.

One of the most frequent feedbacks I get from my clients is about changing some styling properties. Sometimes they tell me: "I would like that header bigger." But... how much? They don't know because they don't know about font sizes.

With this tool, that is no problem anymore since they can edit the page with just sliders and buttons; no code is required. That's so cool.

Imagine my client wants to give the following feedback: "The profile card should have a bigger title and more space between the text lines. I would also like the background darker."

Well, now they can just edit and post the feedback!

After that, they just have to post it, and I automatically get all the new feedback in the GitHub pull request, with the CSS code that changed and before and after images:

What do my clients think about it?

It is usual that when a dev finds a cool new feature, the rest of the world thinks that the new feature is complicated and prefers to use the old method. So when I started using this solution, I was worried because even if I thought this was useful, maybe my clients would prefer using the old methods, even if they were way worse.

But I was really happy to hear from them that thanks to the assistant you see when you open for the first time the playground, they were able to understand the entire process, and in a few minutes, they were already posting some feedback.

My final thoughts

Well, as you can read, I am pretty happy with this finding. Obviously, it might not be useful for you. But you should at least try it. I mean, it has a free trial, takes no more than 5 minutes to install, has good documentation, and does its work as intended.

If I were going to improve something from their tool, it would be just adding a more prominent overlay to the wizard that opens in the playground screen because it is just a small pink bubble that you have to click to read the message, and the first time my client went to the playground, he didn't notice it. But... it is just a minor UI thing, which I have already reported (as feedback) to the team.

Oh, and that is another cool thing. I just sent that e-mail, and in less than 10 minutes, I got a reply. Only for that stupid little thing. So, that is a good thing for any product I intend to use since I can expect them to help me with more important problems.

But, whatever, it is time to end the post; I am not trying to bore you or write a book about this. Take this just as my personal experience. A good one but a personal one. Make sure to try it by yourself; it will be worth it! 🪄

🌎 Let's Connect!

• My Twitter: @thenaubit
• My Substack (here I publish more in-depth articles)