1-Million Design Bugs fixed on websites around the world

Without writing a single line of code

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.

Visual inspector has been growing 23% week on week

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.

Early version of Visual Inspector landing page

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. 😍 😍

(The TNW feature resulted in 7,000 downloads in one-day)

Visual inspector was one of the most shared TNW story for that day was on the chart for complete 2 days.

TNW coverage for Visual Inspector

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

Product hunt page for “Visual Inspector By CanvasFlip”

PH launch did not make the impact we were hoping but still added a few hundred downloads.

Product Hunt was not most successful for us.. :(

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.

Almost 500 downloads from the Designer News post

Now, there were about 15,000 users in 3 weeks since launch.

So, it was going good.


Reddit

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:

Reddit

But it wasn’t the only one. There were around 13 stories, one story in every design related subreddit:

Few of many Reddit conversations on Visual Inspector

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.

Spread the love has been our most successful marketing campaign.. :)

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.

Visual Inspector feature on TechAma -https://techama.com/ask-me-anything-on-how-and-why-we-created-visual-inspector-by-canvasflip-free-456038/

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:

CSS Export and saving changes locally was priority ask

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,

  1. Saving changes in locally for subsequent edits
  2. Apply changes to all matching elements
  3. 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:

  1. Content check: Trying and communicating CTA, heading or description text to see how do they look within the website.
  2. Typographies (font-size & colors): Variations in typographies without going back to Sketch
  3. 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.)
  4. Hide/Show an element: Wondering how page is going to look like with/without an element.
  5. 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):

  1. Install Visual Inspector from the Chrome Web Store.
  2. Open the webpage you wish to inspect/edit.
  3. Fire the extension on the page (usually top-right in your browser.)
  4. 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:

  1. Add comment to the page
  2. Sync your changes to the cloud
  3. Share changes/comment remotely via a link
  4. Allow stakeholders to Approve or make suggestion to your comments
  5. 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

Keep spreading the love ❤…!!


Fix design bugs in Live website without coding — Get Visual inspector FREE