Web design feedback tool for project teams

Ideas occur to me at the strangest times.

Being on the internet all of the time means that it can be a bit of a struggle to stay focussed on just one thing. One of the benefits of this is that I occasionally have a moment of clarity and realise

“Yes, this is exactly what I need and why doesn’t it exist just yet”

The other day I had one of these thoughts, although I couldn’t tell you exactly where it occurred the main thing is that I had my notebook with me to jot the idea down before it was lost.

Responsive Web Design Testing

I’ve dropped the term “Responsive” off the heading here because at this point I’m going to assume that you’re all building responsive sites by default… and therefore we can just call it Web Design.

A typical situation

There have been some great articles about designing in the browser or deciding in the browser by folks much smarter than myself. Dan Mall, Stephen Hay, Brad Frost, they’ve all had something to say around the process.

Typically we would see this:

• Client needs a new website
• Content review/strategy/rewrite (after all we want to base our designs upon the content and not Lorem Ipsum)
• Moodboards, wireframes, design collages, getting to understand the general direction of the redesign
• Move onto some photoshop comps to decide on some specifics
• Further pad out the browser based wireframes with more fidelity, or start to ‘cutup’ the photoshop designs that have come from the designer

At this point we’ve got a few people working on the project. The client, project manager, art director, designer/UX, front end person…. maybe a few others.

Some of the issues that we might see are:

• Browser based wireframes aren’t quite telling the full story, or there’s some issues with how they are layed out.
• Photoshop designs don’t cover a few breakpoint edge cases, and the front end person needs to “fill in the gaps”
• Client reviews the first set of browser based designs from the front end dev, and things aren’t working the way they expected
• Art Director or Design check out the front end browser comps and there’s some discrepancies between what the direction was and the outcome.

Each of these problems are unique, each of them involve various people. All of them are important.

The process after this is an email from X to Y explaining the problem, or if you’re working with Github or Basecamp (yay for the client) then it’s updated as a discussion. There’s usually a screenshot involved as well highlighting the potential issue.

This is great, but it’s not the best way to proceed through a series of reviews and fixes to keep everyone working together towards the same goal.

What would be nice is if there was a browser extension or bookmarklet that could help. The tool would….

1. log the user into the system
2. click to clip the section of the web page you are making a point about
3. a screenshot is taken of the entire browser window (viewport) and highlights the clipped section
   the clipping user now has the ability to add some comments around the issue or intended user experience
4. the content is then stored ???? (in Evernote maybe to begin with), and along side it the following information is also captured as metadata
   • Date/Time
   • OS (version/patch/release)
   • URL
   • Browser (version/patch/release)
   • networking information (if available)
   • User details
   • Viewport
   • DPI

   This will help categorise the shots that are taken to focus on particular browsers/OS/URL’s etc.

I suggested using Evernote as the storage because a lot of people are already using it and it takes some of the complexity away, however this could just as easily be configured to run as a complete stand alone web app.

Possible downsides

• Does it already exist?
• Is the workflow going to make sense, is it easy enough to do without a second thought
• Will the client be able to do it?
• Can bookmarklets achieve this, or does it need to be browser extensions?
• If browser extensions will all clients be able to install and use it?
• Will it run across Safari, Chrome, IE, Opera, Firefox?
• Does it need to be an OS specific App (OSX and Windows)?
• There are tools like Pinegrow that will suck down a current URL and turn it into an editable webpage that you can export at a later date. Could/should this be able to do the same?
• Could this be integrated into Evernote, or GitHub, or does it need to be the complete package rather than something that sits over the top?

—–

I’d love your feedback and thoughts, especially if something is out there that already does this kind of thing, or if there are other issues I’ve not thought of just yet.