Visual Inspector + Slack : Faster decision making on website changes
The problem
A while ago, an agency, Acme Inc, an avid Visual Inspector user, brought to our notice of a certain struggle their project teams were facing.
They used Visual Inspector to make live changes on websites and share them remotely with all project members. The routine was simple and effective.
· Designer makes live changes on the website
· Designer shares the link with the newly made change to all members of the project.
· Client, project manager, developer and other stakeholders add comments and annotations and provide feedback.
Although we thought this process would solve most problems. The designers at Acme still had to notify the stakeholders every single time an action with respect to changes performed on the website.
This happened manually either by email or using a separate project channel in slack.
By the way if you haven’t heard of slack, (which is quite unlikely,) Slack is a cloud-based software that allows teams to communicate better, giving everyone a shared workspace where their conversations are organized and accessible.
Acme’s designers wanted to be able to give the other stakeholders instant real time updates, notify them faster and manage everything related to the project in one place.
We validated this hypothesis with hundreds of other teams by asking for their take on the same, we found out that it was an obvious use case for almost all of them.
This is how the idea of integrating Visual Inspector notifications in Slack was born… :)
How things changed with slack
We ourselves are frequent users of slack and decided to bring Visual inspector and slack together. Our dedicated team of developers began the integration process.
We ran over 160 hours of user interviews to understand what matters to our users — “when and what” would they like to be updated about. We just tried to hear the regular conversations which looked like:
- Hey! There’s change on the headline.
- We have to add brand colors to CTA
- Did you (dev guys) update the new style on Visual inspector
- Many others
So, we listed these conversations and bucketed them under the following
- Every time a new update is made
- Someone replies to an existing comment
- Someone resolved an existing threads
In addition, we added screenshots for stakeholders to visualize the changes better.
Every time a user makes any change on visual inspector, a notification is received on slack on the channel allotted for the particular web project with all its members in it.
The beta version of the integration was tested out by hundreds of Visual inspector users including Acme, and just the way we expected,
1. Over an average of 2.5 hours were saved in resolving issues with Slack + Visual Inspector since there were instant notifications automatically sent to all members of the project (compared to someone checking on emails periodically and approving changes).
2. Every member of the design team got real-time updates of all actions performed on the live webpage keeping the communication gap minimum.
3. All the struggle with screenshot and emails was eliminated and effort involved in notifying was reduced.
Comparative experiment
We did a small study to find out the time spent for a web design project given three scenarios.
Time to visualize, discuss and change 5 updates in website.
Without Visual Inspector — Typically getting 5 changes approved from other stakeholders (client/product manager/dev. team) inevitably took at least 40 hours.
With Visual Inspector — The same 5 changes to be reflected and approved by other stakeholders took just only 20 minutes.
With “Visual Inspector + slack” — Finally with the slack integration, it took just about 12 minutes.
The integration with slack is meant to provide a much faster approach to the design changing process.
With collaborate in Visual Inspector; any design team member was able to make comments within the page and annotate/highlight all the changes.
The motive was that by integrating the collaborate feature on Visual inspector with slack, the combination would bring a game changing factor to the table, empowering you to bring out most of your productivity and finish your designing project at a revolutionary speed.
What kind of notifications are supported
Here are the list of actions performed that result in slack notifications:
1. Posting a comment — To make a new comment, switch to the collaboration mode, click > Select element in the page and type your comment in the popup. Each new comment automatically becomes a task.
2. Replying to a comment — You can just click on reply to the previous comment popup and post in your comment.
3. Update a comment — If you have already posted a comment and want to make some changes or edit the comment, simply click on update comment.
4. Delete comment — You may no longer find relevance of a particular comment and you can simply delete it by clicking on the delete option.
5. Resolve/Reopened — If the issue that the comments are referring to has been fixed or you have got approval from all required members on the design changes you can click on the resolve button that turns green. If you click on it again it denotes that it remains unresolved and you receive a notification that says, Reopened.
How to get started
Looks interesting? If you are part of a website development process and struggle with taking feedback from client or internal stakeholders, Visual Inspector is a must for you.
To get you started quickly, sharing a few easy peasy steps:
- First things first, if you haven’t downloaded the chrome extension yet do it by clicking here.
- Fire up extension on your client’s website > go to Collaboration (Sign Up) > Go to Dashboard
3. Connect to slack > click on the settings icon of your project and click on connect to slack.
After connecting you will see a page like this, choose channel which receives notifications
4. You can choose which channel will receive all the notifications or select an individual below the direct message option.
There you have it, all the collaboration aspects are reflected on slack as specific detailed notifications.
You also have the option to enable email notifications that reflect all slack notifications made with Visual Inspector directly on your mail.
Voila, you are now officially all set to embark onto the journey of super fast visual feedback collaboration.
Wrapping up
Visual Inspector and slack are like mac and cheese, complementing each other to give the best of both worlds. :)
We are very excited to launch the integration and are really looking to empower the design community, reducing the effort and time spent of designers, developers, product managers and other stakeholders. Making feedback collaboration smoother, faster and enjoyable.
What do you think about this integration? Share your thoughts on the comment section because we love to read them.
Like Visual Inspector? Your friends will love it too.
Share this article as much as you can. It will help us grow and reach out to more people from the community and we would be very grateful for it.
