1-Million Design Bugs fixed on websites around the world
Hello there, I am Naveen, a passionate designer and team member who built quite young (& popular) in-browser design tool — Visual inspector.
[FYI: Visual Inspector is a Free Chrome extension for designers to edit live webpage without coding.]
This is a story about getting from the idea of Visual Inspector to growing a community of 32,000 designers in 7 weeks and helping thousands of designers to fix 1-Million design bugs in such a short span of times.
Many users reached out to us asd ask — why and how did we built Visual Inspector, product and community, both. So here we are:
Fun-fact: Visual Inspector has saved 32 years (and counting…) of cumulative time for entire design community. We’ll explain that in here.
The beginning
As a web-designer, I realized considerable amount of my productive time was wasted during iterations on live websites. Clients or other stakeholders keep coming with last-minute changes and quite often it’s impossible to deny any of them.
Believe it or not, those last-minute “Change 1 pixel here, 2 pixels there” takes away more than 30% of overall productive hours without we even realizing it.
These not only waste designers but also product managers, content guys, delivery folks and, not to mention, the clients’.
3 months ago, we decided to do something about better ways of website feedback. First, we looked around to find a tool which can:
- Help us inspect the design issue in live page and,
- Make small changes (text + visual, both)
But, sadly, I found none.
What started as a weekend fun by Manish Jha ( CTO & Co-founder CanvasFlip), was a Chrome extension which allowed to make changes to the text without using Chrome’s devTools — a very early version of Visual Inspector.
It was first used by our marketing/content teams to finalize text and CTAs on the live sites but pretty soon, I and other designers were addicted to Visual Inspector the most.
Now, we no longer had to go back to Sketch for trying new design variations. Just open the Chrome extension and make changes in live page.
Early validation: Secret release
After a week of using it internally, we started using Visual Inspector in our sales calls (we primarily sell prototyping & collaboration suite to designers) to demo how it can easily make suggestions on live web page without requiring the dev guys or coding.
The idea behind showcase was to understand if other design teams in product or agency set-up come across efficiently taking feedback on their website work.
And, it did. We realized website reviews are one of the most critical pain for most of the design teams (including content/digital marketing folks).
We decided to share the extension with around 20 teams — most of them were our existing customers. We also put together a landing page but no marketing.
New few weeks followed intense feedback and user interview sessions.
First week of going live
After 3 weeks of feedback, we realized we were onto something big as there was 80% repeat users on daily basis.
Visual Inspector was solving a real pain-point.
So, in another 5 days, we redesigned the entire Chrome extension and added few features as suggested by our beta users and wrote a Medium article — Visual Inspector, web designers rescue from digging in codes.
And, there was a sudden rush on the Visual Inspector landing page. It ended up being one of the most circulated article of that week.
Around 17,00 downloads on day-1!!
We were excited.
The TNW cover story
During early days of CanvasFlip, TNW Apps had done a story on how “CanvasFlip gives designers UX analytics without user feedback” by Nate Swanner ( Thanks to him.) which has worked very well for us.
So, we sent him (and few of his colleagues) another email on how Visual Inspector is being wark-welcomed by the design community.
Much thanks to @matthewhughes, who found Visual inspector quite interesting and wrote a piece and gave it a whole new perspective — Visual Inspector is a designer-friendly complement to Chrome’s DevTools
This turned out to be the much needed kickstart and added over 6,800 downloads within few hours of the feature. 😍 😍
Visual inspector was one of the most shared TNW story for that day was on the chart for complete 2 days.
Product Hunt launch
It was a good start and we wanted to continue riding on the wave. So, we did the what almost entire product community does at the this time.
The glorious Product Hunt launch!! We were lucky to #1 hunter (people who regularly post on PH) Kevin William David.
After a few discussions, and edits we were ready to go on Product Hunt.
But, we realized someone had already done without our knowledge and it ended up not being noticed at all. (Pro tip: Keep a don’t hunt message on your page, if you don’t want this to be hunted by someone else.)
So, we posted it with slightly different URL — https://www.producthunt.com/posts/canvasflip-visual-inspector
PH launch did not make the impact we were hoping but still added a few hundred downloads.
Post on Designer News
Designer News has been one of my personal favorite forums for quality design resources. So I posted Visual Inspector there, which had very good response for downloads as well as comments/ suggestions.
We ended with #2 position for the day and 27 upvotes (equivalent to 1,500 upvotes on Product Hunt), around 1300 visits to landing page and another 500 odd downloads of Visual Inspector.
Now, there were about 15,000 users in 3 weeks since launch.
So, it was going good.
Besides our own efforts, there were many conversations taking-off from the community around Visual Inspector. One of the most exciting was the Reddit thread:
But it wasn’t the only one. There were around 13 stories, one story in every design related subreddit:
Twitter effect — Spread the love ❤
Guess, where did most of our users come from?
But media articles/Product Hunt/ DN was not where most of the most of the users came from. Now-a-days, tech community rely more on word of mouth instead of news pieces.
So, we wanted to have a viral effect in Visual inspector from day-1 . With 92% repeat usage, we knew that most of our users love the product. We just had to make the sharing easy and intuitive… :)
The reason for exponential growth of Visual Inspector was Twitter shares. Almost 29% of our users shared it in their network across various social media ( Twitter > Facebook > LinkedIn).
Here’s few of my favorite twitter conversations on Visual Inspector:
AMA on Visual Inspector by Manish
In short 5 weeks, Visual Inspector had over 20,000 users and there were lots of queries about why we built it, how did we gather so much crowd and interest.
So we decided to do an AMA (ask me anything) on TechAMA, which garnered about few hundred pages.
It wasn’t the traffic that excited about AMA but the fundamental questions users ask about the journey as well as way forward.
We seriously started to think about the use-cases and importance of Visual Inspector in our users’s lives.
Survey to understand the use case
We had done few user interviews at the beginning of the idea but now we had to more focussed study to find out real value in Visual Inspector.
We put together a quick survey form to see:
- Which features are they using most
- Why do they use Visual Inspector
- What are they missing
Here’s the survey-form, if you wish to have a look:
In a week, we had little over 200 responses, and as a result, we realized that most users were happy with the inspect/editing part but they wanted to save changes locally instead of redoing them over and over.
We also did a Twitter poll around which feature do they want:
Visual Inspector 2.0
Based on our personal interviews, Typeform surveys and Social media polls, we had prioritized our features list in Visual Inspector.
Visual Inspector 2.0 had most of them,
- Saving changes in locally for subsequent edits
- Apply changes to all matching elements
- Export changes in page as CSS
Following the week of 2.0 release and Visual Inspector 3.0 medium blog , more than 3000 users were added to Visual Inspector.. :)
So far, we had 23,000 users.
Engagement were growing 23% Week-on-week.
Most traffic was “Direct”, so it was spreading word of mouth.
Most the active user persona involved — designers, product managers, content marketers & developers ( surprised?)
In the following 2 weeks, we added another 7,000 users and pretty good comment from design community.
What “Design issues” are being resolved most
Visual Inspector is mostly used to resolve last-minute issues on the staging web apps or website before going live. When design mock ups move to development, there are revisions involving design, dev, managers and content guys.
Here’s a few issues on live site where Visual Inspector helps:
- Content check: Trying and communicating CTA, heading or description text to see how do they look within the website.
- Typographies (font-size & colors): Variations in typographies without going back to Sketch
- More Whitespace: Ensuring there’s enough white space in the live website by adding — margin, padding & line-height ( Just like how you do it in Sketch.)
- Hide/Show an element: Wondering how page is going to look like with/without an element.
- Theme variation: Experimenting with changing CTA color — do it in single click.
And much more. Missing your use-case? Add it in the comment and let us know.
How Does Visual Inspector work
Visual Inspector is a free Chrome extension which works right within your website.
Here’s how you can get started with Visual Inspector within 30-seconds (or less):
- Install Visual Inspector from the Chrome Web Store.
- Open the webpage you wish to inspect/edit.
- Fire the extension on the page (usually top-right in your browser.)
- That’s all!!
Here’s a few Youtube video for you to quickly get started:
What’s next: Visual Inspector 3.0
Collaboration and more..
“Screenshot.email” has been most adopted and inefficient way to take design feedback.
At first stage, we have enabled design community make changes in live pages without digging in codes.
Now, as a next step, we are going to deliver one of the key asks from design community — collaborate changes remotely with other stakeholders.
In Visual Inspector 3.0, you will be able to:
- Add comment to the page
- Sync your changes to the cloud
- Share changes/comment remotely via a link
- Allow stakeholders to Approve or make suggestion to your comments
- Manage your projects on the cloud
Sounds interesting? Visual Inspector will be available for public during second week of Nov 2017. Join Visual Inspector 3.0 in beta by answering few super quick questions.
Over to you
While writing this, there are over 30,000 designers in 119 countries using Visual Inspector. 93% of them using it at least once in a day.
On 29th Sep, 2017, Visual Inspector helped designers to fix 1-million design bugs (1,003,000 to be precise) fixed on 140,000 websites. In just 7 weeks from public release.
If you are a web-designer looking for pixel perfection or some “what ya think” feedback, don’t forget to give Visual Inspector a swing — Available in Chrome web store.
Also, we lovvvve feedback — compliments or criticism, both. Or maybe, you have something to ask? feel free to shoot your questions in comments.
Happy Inspecting!!
Your friends at CanvasFlip
