Widget Live editor
livechat.com
2021/2022
Product Design
livechat.com
2021/2022
Product Design
Introduction
Since LiveChat works as an embed on customers' websites, we thought it should behave as an integral part of the website. By that means, we have asked ourselves: What would happen if the users could create different chatting experiences while browsing through their own websites?
Introduction
Since LiveChat works as an embed on customers' websites, we thought it should behave as an integral part of the website. By that means, we have asked ourselves: What would happen if the users could create different chatting experiences while browsing through their own websites?
Introduction
Since LiveChat works as an embed on customers' websites, we thought it should behave as an integral part of the website. By that means, we have asked ourselves: What would happen if the users could create different chatting experiences while browsing through their own websites?
Introduction
Since LiveChat works as an embed on customers' websites, we thought it should behave as an integral part of the website. By that means, we have asked ourselves: What would happen if the users could create different chatting experiences while browsing through their own websites?
Who are the users?
LiveChat agent app users are usually people who manage their small or medium-sized businesses. There are two roles (admin and owner) at LiveChat that can affect the specifics of the communication and decide how the chat widget will look like. We've built a live editor with those people in mind.
The problem
The current flow of the widget customization requires switching back and forth from the agent app to the customer's website. Customizing it that way doesn't assure customers that their chosen settings are correctly applied.
Defining the scope of PoC
LiveChat offers multiple settings that can change the chat widget's look and behavior. We had to define which settings are the most valuable for the users to put them into live editor MVP. It wasn't an easy task as we had to think about the new users who knew nothing or very little about the product. The primary assumption that pushed us to choose the final scope of settings was that the user might convert if they could set up the widget's brand colors and overall look with almost no effort. I think there is a reason why WYSIWYG tools are still popular. You just get what you see, as things should be.
Defining the scope of PoC
LiveChat offers multiple settings that can change the chat widget's look and behavior. We had to define which settings are the most valuable for the users to put them into live editor MVP. It wasn't an easy task as we had to think about the new users who knew nothing or very little about the product. The primary assumption that pushed us to choose the final scope of settings was that the user might convert if they could set up the widget's brand colors and overall look with almost no effort. I think there is a reason why WYSIWYG tools are still popular. You just get what you see, as things should be.
Defining the scope of PoC
LiveChat offers multiple settings that can change the chat widget's look and behavior. We had to define which settings are the most valuable for the users to put them into live editor MVP. It wasn't an easy task as we had to think about the new users who knew nothing or very little about the product. The primary assumption that pushed us to choose the final scope of settings was that the user might convert if they could set up the widget's brand colors and overall look with almost no effort. I think there is a reason why WYSIWYG tools are still popular. You just get what you see, as things should be.
Defining the scope of PoC
LiveChat offers multiple settings that can change the chat widget's look and behavior. We had to define which settings are the most valuable for the users to put them into live editor MVP. It wasn't an easy task as we had to think about the new users who knew nothing or very little about the product. The primary assumption that pushed us to choose the final scope of settings was that the user might convert if they could set up the widget's brand colors and overall look with almost no effort. I think there is a reason why WYSIWYG tools are still popular. You just get what you see, as things should be.
No-code tools research
Based on the no-code builder's research, we can observe three types of configuration: sidebar configuration, direct configuration, and hybrid configuration. Each format serves a specific purpose, and it shouldn't surprise anyone that the more complex the product, the bigger chance it will operate on the hybrid configuration. It means that the user can interact both with elements situated in the preview and the sidebar. It makes complete sense as long as the settings are correctly grouped, meaning that the particular way of configuring, for example, texts, is always on the sidebar or directly on the preview, rarely in both places.
No-code tools research
Based on the no-code builder's research, we can observe three types of configuration: sidebar configuration, direct configuration, and hybrid configuration. Each format serves a specific purpose, and it shouldn't surprise anyone that the more complex the product, the bigger chance it will operate on the hybrid configuration. It means that the user can interact both with elements situated in the preview and the sidebar. It makes complete sense as long as the settings are correctly grouped, meaning that the particular way of configuring, for example, texts, is always on the sidebar or directly on the preview, rarely in both places.
No-code tools research
Based on the no-code builder's research, we can observe three types of configuration: sidebar configuration, direct configuration, and hybrid configuration. Each format serves a specific purpose, and it shouldn't surprise anyone that the more complex the product, the bigger chance it will operate on the hybrid configuration. It means that the user can interact both with elements situated in the preview and the sidebar. It makes complete sense as long as the settings are correctly grouped, meaning that the particular way of configuring, for example, texts, is always on the sidebar or directly on the preview, rarely in both places.
No-code tools research
Based on the no-code builder's research, we can observe three types of configuration: sidebar configuration, direct configuration, and hybrid configuration. Each format serves a specific purpose, and it shouldn't surprise anyone that the more complex the product, the bigger chance it will operate on the hybrid configuration. It means that the user can interact both with elements situated in the preview and the sidebar. It makes complete sense as long as the settings are correctly grouped, meaning that the particular way of configuring, for example, texts, is always on the sidebar or directly on the preview, rarely in both places.
First iteration
With the MVP scope defined and no-code tools research insights, I've started to seek where we could show a trigger for opening the editor and which part of the screen should be suitable for displaying configurator UI. I plan to place the opening trigger directly connected to the chat widget in the first iteration. Still, it appeared to be too intrusive after the first round of feedback, so we made it smaller and moved it to the opposite of the widget side. Because the widget's position can be changed left and right, I assumed we needed the nice-looking animation of switching sides.
First iteration
With the MVP scope defined and no-code tools research insights, I've started to seek where we could show a trigger for opening the editor and which part of the screen should be suitable for displaying configurator UI. I plan to place the opening trigger directly connected to the chat widget in the first iteration. Still, it appeared to be too intrusive after the first round of feedback, so we made it smaller and moved it to the opposite of the widget side. Because the widget's position can be changed left and right, I assumed we needed the nice-looking animation of switching sides.
First iteration
With the MVP scope defined and no-code tools research insights, I've started to seek where we could show a trigger for opening the editor and which part of the screen should be suitable for displaying configurator UI. I plan to place the opening trigger directly connected to the chat widget in the first iteration. Still, it appeared to be too intrusive after the first round of feedback, so we made it smaller and moved it to the opposite of the widget side. Because the widget's position can be changed left and right, I assumed we needed the nice-looking animation of switching sides.
First iteration
With the MVP scope defined and no-code tools research insights, I've started to seek where we could show a trigger for opening the editor and which part of the screen should be suitable for displaying configurator UI. I plan to place the opening trigger directly connected to the chat widget in the first iteration. Still, it appeared to be too intrusive after the first round of feedback, so we made it smaller and moved it to the opposite of the widget side. Because the widget's position can be changed left and right, I assumed we needed the nice-looking animation of switching sides.
Polishing the prototype
I must admit I am a Framer fanboy, but I love the tool because of reason. Framer prototypes really leverage the experiences that users have during the interviews. As the Framer claims on their main page, the prototypes genuinely feel real, and you can basically do everything with just a limited amount of code. I've made an effort to mock the current color systems that we've implemented in the chat widget to get accurate feedback about changing colors.
Polishing the prototype
I must admit I am a Framer fanboy, but I love the tool because of reason. Framer prototypes really leverage the experiences that users have during the interviews. As the Framer claims on their main page, the prototypes genuinely feel real, and you can basically do everything with just a limited amount of code. I've made an effort to mock the current color systems that we've implemented in the chat widget to get accurate feedback about changing colors.
Polishing the prototype
I must admit I am a Framer fanboy, but I love the tool because of reason. Framer prototypes really leverage the experiences that users have during the interviews. As the Framer claims on their main page, the prototypes genuinely feel real, and you can basically do everything with just a limited amount of code. I've made an effort to mock the current color systems that we've implemented in the chat widget to get accurate feedback about changing colors.
Polishing the prototype
I must admit I am a Framer fanboy, but I love the tool because of reason. Framer prototypes really leverage the experiences that users have during the interviews. As the Framer claims on their main page, the prototypes genuinely feel real, and you can basically do everything with just a limited amount of code. I've made an effort to mock the current color systems that we've implemented in the chat widget to get accurate feedback about changing colors.
User interviews
Asking the right questions is essential when conducting user interviews, and it wouldn't be that easy to come up with them without magnificent Data & Research team members at Livechat. The D&R team carefully reviewed my questions and provided many insights that, in the aftermath, helped us to plan the next steps. The five of the respondents delivered quality feedback that validated the idea of the live editor. I've mapped what users have been saying into the notes matrix. Thanks to that form, everyone can see a brief overview of what we've asked users and their responses.
User interviews
Asking the right questions is essential when conducting user interviews, and it wouldn't be that easy to come up with them without magnificent Data & Research team members at Livechat. The D&R team carefully reviewed my questions and provided many insights that, in the aftermath, helped us to plan the next steps. The five of the respondents delivered quality feedback that validated the idea of the live editor. I've mapped what users have been saying into the notes matrix. Thanks to that form, everyone can see a brief overview of what we've asked users and their responses.
User interviews
Asking the right questions is essential when conducting user interviews, and it wouldn't be that easy to come up with them without magnificent Data & Research team members at Livechat. The D&R team carefully reviewed my questions and provided many insights that, in the aftermath, helped us to plan the next steps. The five of the respondents delivered quality feedback that validated the idea of the live editor. I've mapped what users have been saying into the notes matrix. Thanks to that form, everyone can see a brief overview of what we've asked users and their responses.
User interviews
Asking the right questions is essential when conducting user interviews, and it wouldn't be that easy to come up with them without magnificent Data & Research team members at Livechat. The D&R team carefully reviewed my questions and provided many insights that, in the aftermath, helped us to plan the next steps. The five of the respondents delivered quality feedback that validated the idea of the live editor. I've mapped what users have been saying into the notes matrix. Thanks to that form, everyone can see a brief overview of what we've asked users and their responses.
Future plans
I had a strong intuition that the user interviews would validate the obvious - WYSIWYG Configuration is better than switching pages. Still, it, of course, wasn't the main premise of conducting that research. The most important thing is that we have got to know what's next. According to the respondents, an On-site configurator would be handy if they could set up particular messages when they're away or welcome messages to their customers. Basically, they expect to edit anything related to the chat widget that is visible on their website, and that's what LiveChat will provide to them in the future.
Back to all projects
Next Project