Show, not tell: Fixing the communication gap while working with designers
If you are a product designer working on a web based project, this should sound familiar:
“Increase the font size of the title and can we use a better font”
“ No, its not coming out well. Have a look at xyz.com and abc.com, we need something like it.”
“The design is good but it’s not giving that ‘wow’ feel.”
“It’s too cluttered now. Can we reduce the text?”
“The CTA buttons aren’t appealing. It will affect conversions”
Website designing is a mess
These are email conversations between a designer and other members-a Client, Project Manager, Developer, Content Strategist etc., of the Marketing team. Such conversations are common while designing a website.
Every website design has a story in its long email thread. Feedback, iterations, comments et al. But it also highlights a serious problem which is often ignored. The story of the designer and the communication gap while talking to him.
Here’s how-
Can you pick one comment from the above conversation which is clear, specific and actionable?
It is not that the other members of the team don’t know what they are looking for. It’s just that they are unable to articulate it into a meaningful feedback for the designer to act decisively.
Designing is an inherently tough job. Most of the times, the goals aren’t very clear. There’s clash of ideas. The risks of trying something new by taking an uncharted path.
On the other side, it’s also not easy to communicate design ideas. Words like ‘sexy’ ‘awesome’ ‘sleek’ doesn’t help.
The Result: An unending thread of emails. Countless iterations. And frustration on both sides.
You can make it better
We’ve found a solution for it. It will help a non-designer show (not talk) what he wants.
And no… it isn’t by drawing sketches on a paper ;)
It’s smart. It’s easy. And guess what! The basic version comes free.
Presenting Visual Inspector- A collaboration tool for website feedback that makes fixing design bugs much simpler, easier and faster.
What is Visual Inspector?
It is a Chrome based plugin that allows you to inspect/edit live web pages without coding. You need to add the plugin from Chrome store and you are now set to inspect and edit changes to any live website.
Here’s a short video on how Visual Inspector works:
FIXING DESIGN BUGS MADE EASY!
Visual Inspector allows you to inspect & measure all your design properties. You will get details on every element on your page from
styling like fonts, colors, background to positioning margin and padding etc. You can also make design and text changes to see the final output. And without any coding.
The plugin also allows you download design assets like banner, logo etc., from the page.
How does it help non-designers?
Designing is a detailed job. Changes in one part of a website impacts another. For example, increasing the font size of the title needs to be balanced with appropriate size changes in other texts like sub-titles, paragraphs etc., to ensure balance in the design or else it will look broken. Similar is the case with design images, logos and colors etc.
Non-designers often fail to visualize the complete picture while suggesting changes. This tool allows them to make changes on the page and see how it exactly comes out. So if a project manager for example is not happy with the font type or size used in the page then he can himself try out different fonts and then suggest the desired font to the designer. This will save time in iterations, help him give clear, specific feedback to the designer.
ANNOTATE & SHARE WITH EASE!
Visual Inspector is a cloud based applications allowing you to sync all your changes to the cloud and access your work anytime, anywhere. Just like you access your Google Docs or Sheets. Not just this, you can highlight changes by adding comment annotations in the page and clearly specify the tasks to be done to your design team.
Just like in Google Doc, you can share your feedback with all stakeholders via a link.
screenshots over emails v/s Visual Inspector:
Before Visual Inspector was launched, I used to take screenshots or make copies of the page. Put annotations and comments on the page using a photo editing tool and then mail it to my design team and other shareholders. This would initiate a long thread of email exchanges with everybody chipping in with their comments/ideas etc. And after a couple of iterations, it was difficult to keep track of things.
Visual Inspector makes it neat and easy to give feedback, suggest changes and manage all the action from one place! The design team can review the changes and comment right within the Visual Inspector page. This help you resolve issues in real-time and quickens the entire webpage review process.
GO LIVE FASTER
Visual Inspector allows you to export changes as a CSS. Once changes are finalized and you are happy with the final look of your web page, export the final copy as a ready-to-use CSS and send it to you developer for coding.
Visualize changes in live webpage. Add comments and invite stakeholders to review. Real-time visualization and communication.
TRUST ME, IT HELPS!
I have over 12 years of experience in Digital Marketing (previously called web marketing and Internet marketing). Over the years, I have worked with some awesome design talent in several enriching projects. Translation and communication gap exists. And it has a big bearing on projects. It consumes resource bandwidth. Impacts project deadline. And deeply affects work satisfaction.
Visual Inspector helps you communicate and collaborate effectively with designers.
No wonder, in its first month, over 32,000 designers and non-designers around the world used Visual Inspector to review over 1.5 Million web pages and made web a better place.
And there life much easier!
Get a free version of Visual Inspector
Play around with its awesome features. Use it in one of your projects. And see the difference.
Holidays are coming! Spread the good news with your friends on Twitter. Gift them this awesome tool. They are surely going to thank you for this.
