The Problem
Imagine, you are a product designer working on a web project.
- You got the brief from the client or internal stakeholders (sales/marketing/product manager).
- You work on the brief and came up with an innovative design that you think is going to win the world.
- You discuss and iterate your designs with stakeholders and finally,
- Hand-off to developers
Now, developers own the project from here. Designers are mere spectator who have to follow whatever developers do on final website/webapp.
Live website is the final output, the ultimate fruit of all effort and imagination from designers like us. It is brainchild of designer but once it goes into production, engineering team takes over.
Even to make small suggestion or try new design alternatives during design reviews (as simple as trying new CTAs/heading, add more margin/padding, use different font-size, resizing elements etc ), designers are left with two equally unfavorable options — first, explain changes verbally over email/personal meeting or second, dig into complex code of the website to showcase these changes.
To add to the pain, when website/webapps move from developers’ machine to different client’s machine, they look different than how it looked on designer’s/developers’ machine. The long headings break, CTAs doesn’t look appealing, font-size differs, you know how it goes.
These minor design issues can easily be detected and fix by designers during design review but the limitation of programming skills to communicate these issues makes designers to not only ignore the last-minute, yet important details but also discourage them to try new styles resulting.
This puts a stop on much needed iteration on final website where maximum impact could have been made.
The Solution
Few months ago, we built a free Chrome extension dedicated to designers — Visual Inspector — to make changes on live page without coding. Pretty much how they make change in a Google doc or in Sketchapp.. :)
Visual Inspector was a rescue for designers to avoid digging into code in order to communicate design issues on live website to try new styles real quick.
Within few months of release, Visual Inspector was adopted by 32,000 designers around the world and over 2 Million web pages have been pixel-perfected ever since.
Visual Inspector became favorite design tool being used by many popular design team as it provided most of what designers needed to build pixel-perfect website without coding which include:
- Changing text within website
- Try new color in text and other element
- Try different margin/padding to create more white spacing
- Absolutely any other design change
- Save changes in local system
And, the best part is that it worked in a very familiar way (the design panel looks similar to SketchApp) so there was no learning curve in adopting Visual Inspector.
Thanks to ease of use and the instant gratification, Visual Inspector was used by many designers/design teams and has over 23,000 DAU (Daily Active Users), as we speak.
But, somewhere we knew that we were not doing enough for design community. Whereas Visual Inspector made it easy to visualize changes on live websites, sharing them with other stakeholders — client, dev folks, was still a major challenge.
Designers still had to take screenshot in emails after making changes and rest of the discussion is followed over email. This result in multiple threads and tracking them over a period of time was time-taking and troublesome task.
Empowering designers’ to iterate on live website — without coding
There’s been lots of noise of whether or not designers should code. Regardless of your opinion on this, you’d agree that dev (or any other effort) for designer is a distraction.
To share and discuss changes on live website with other stakeholders, we introduced “Collaboration” in Visual Inspector with two basic yet powerful components — Comment & Share.
With collaborate in Visual Inspector, users will be able to add comments within the page and annotate/highlight all the changes they have made in the page. To make a new comment, switch to the collaboration mode, click > Select element in the page and type your comment in the popup.
Share all the changes over a link with other stakeholders for them to review, discuss and implement changes.
Experiment: To validate our hypothesis, we compared traditional methods of website feedback collaboration (Screenshot + Email) with Visual Inspector. Primary objective of the experiment was focussed at 2 major metrics:
- Time saved in visualizing changes using Visual Inspector ( compared with Chrome’s native dev tools.)
- Time saved in sharing, discussing and tracking these changes with other stakeholders
We ran this experiment with about 12 teams from mid-size design agencies to indie wordpress developers to identify their problems and solve them using Visual Inspector.
Result:
- Time saved in visualize new design changes: Time to make avg 5 changes in webpage using chrome DevTools: 7 Minutes. Time to make same changes in webpage using Visual Inspector: 40 seconds. Which means, visual Inspector is 10x faster to make design changes compare to native chrome devtools.
Visual Inspector is over 10x faster than native chrome devtools for making changes.
- Time saved in collaborating these changes: Results in collaboration were even more encouraging, getting these 5 changes approved from other stakeholders (client/product manager/dev team) took astonishing 40 hours whereas, using Visual Inspector it could be done in 20 minutes.
Visual Inspector results in saving over 90% time in visualizing design changes and getting them implemented. This means less meeting time and more productive hours for your team.
Added benefit: Visual Inspector automatically saves these changes for subsequent session so that you can start right from where you left without having to miss changes done in native Chrome devTools.
Feature updates from design community
While keeping Visual Inspector super simple is our utmost priority, we also resolved few major challenges we came across in design review of web project.
- Ability to track all changes in one place: Without Visual Inspector, tracking website changes are done via emails or other collaboration tool whereas, all the real action happens in the website. This makes all stakeholders to switch between tracking tool and website to ensure that the changes are in place.
- In Visual Inspector, all the changes/comments are available right within the website. So, you don’t lose the context at any point in time.
- All the pages of website are managed under same project which is created automatically. You can access them from Visual Inspector Dashboard and guess what — all the actions still happens where it matters — right on your website.
- Convert Comment into tasks: Every time you start a thread/suggestion in the website, a task in created for you to track later on. You can invite other stakeholders to respond to your task, ask for suggestions, clarifications etc. They can also start their own thread of task.
- Resolve/Reopen issues: With Visual Inspector, you can also mark a task to be “Resolved” or not, which helps you to focus on unresolved issue. Issues can be resolved by any stakeholder with the link.
- Integration: Other request from design community was to integrate Visual Inspector with other productivity tools Slack / Bugzilla/ Elementor/ Wordpress etc.
- This also include email notifications which fires every time someone add/replies to comments on your shared link.
Are we missing something your favorite feature?
Let us know your feature request in comment and we will try to include it in next release. (Public Trello board coming soon.)
A look at pricing
At CanvasFlip, we believe that a good craftsman deserve best tools and productivity tools like Visual Inspector must be available to everyone.
That’s exactly why we kept most of the usable features under free and “free-forever” plan in Visual Inspector gives enough to be used as alternative to Native DevTools for designers.
Also, when it comes to collaboration features, we have kept the price as little as $5 per user per month. Most of the subscription fee goes in running the servers and research work at Visual Inspector.
Let’s have a look at how does Visual Inspector compare with other alternatives:
Cost of collaborating website feedback (for an year)
For those-like-me who don’t like the idea of monthly payments, lifetime access of Visual Inspector is available at one-time price of $49 (Limited to first 5,000 users.) However, if you choose to pay on the go, you do so by paying just $5 per month.
Additional reviewers are completely free in Visual Inspector.
Summing up
Designers need to be empowered to take their rightful part in the post dev design iterations and discussions. They should be able to make suggestions, visualize changes and effectively communicate these to other stakeholders — product managers, clients, dev folks etc.
Recent, collaboration release in Visual Inspector is our genuine effort to bring this transformation for designers. The collaboration features are out and available in all public accounts.
If you are an existing Visual Inspector user, you can simply fire up the extension and head to the “Collaboration” section in the extension Or, if haven’t tried Visual Inspector yet and want to take part in this design revolution, grab your free copy of Visual Inspector from Chrome WebStore or Visual Inspector official website directly.
Like Visual Inspector? Your friends would love it too.
Share this article as much as possible. This will help us grow organically and we will be thankful.
Siftery brings you lifetime subscription of Visual Inspector for just $49 — https://www.canvasflip.com/visual-inspector/siftery/
