How I was able to improve my clients satisfaction by 10x 🪄
Tags: webdev, javascript, beginners, tutorial
Published: 2023-02-27 14:05:48

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](https://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](https://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":

![try it now](https://cdn-images-1.medium.com/0*fnNCKrAxT9jhJfI8)

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

![register](https://cdn-images-1.medium.com/0*k9CzgZzuxoSwI5XT)

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!

![connect your project](https://cdn-images-1.medium.com/0*WX5xgn5ZFN8znkxK)

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:

![sdk integra5tion](https://cdn-images-1.medium.com/0*-xayHrichWes3NKv)

If you need more info about how to add it to your project, I recommend you to check their official docs [here](https://docs.livecycle.io/getting-started/connect-previews/frameworks/react).

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:

![confirmation message](https://cdn-images-1.medium.com/0*HtEyCWruIODVsDJl)

A well-done screen!


## Playing in the Playground
If we open the playground, we can start receiving feedback, so I did it:

![testing the tool](https://cdn-images-1.medium.com/0*-lEDI8uBtDxi9R4w)

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!

![edit and post the feedback](https://cdn-images-1.medium.com/0*7RljjVM7vsO7YGEI)

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**:

![repo updated](https://cdn-images-1.medium.com/0*Vroxl0fWczUBbdfd)


## 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**.

![clients feedback](https://cdn-images-1.medium.com/0*4dRLfjpSELnHTm0l)


## 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**](https://livecycle.io/), 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](https://twitter.com/thenaubit)
-   [My Substack](https://coderpreneurs.substack.com/) (here I publish more in-depth articles)