Making Website Reviews Easy

October 5, 2010

64/365 - mapping by Jenn Vargas @ Flickr

The website is a few years old, there are some inconsistencies in font and the colors don’t match all that well. On top of that, now you have videos you want to showcase and the home page was not designed with that in mind. In sum, the website needs a complete makeover. Sounds familiar?

When reviewing websites and discussing design elements, you invariably end up drawing all over the whiteboard, asking your designer to come up with some mockups and then annotating those and sending them back. How about using some technology to make things easier? I’ve already discussed the use of PowerPoint for website reviews and if you’re starting from scratch it not only provides you with a grate starting point but is a low cost solutions.

For reviewing existing websites, I have used my tablet PC to make screen annotations and save them as images to the team, but what if you have people remote or if you want them to review and add their own comments about the site on their own time?

Below are a few useful tools out there for this problem.

Website Review and Annotation Tools

ShiftSpace.org is an interesting app that gives you the ability to comment on any website using your browser, but others have to have ShiftSpace installed to see them.

Google Sidewiki is an extension for Google Chrome that lets you comment on any website, but falls short on the drawing options (arrows and circles and such).

Diigo allows you to add sticky notes and highlights to websites and share with other people, and they do not have to have diigo installed. Problem is, you can’t draw circles or squares on the site to illustrate changes in the design.

Sharedcopy.com takes a screenshot of a site, let’s you annotate, send to other people, where they can add their own comments to it. Requires users to have the sharecopy bookmark app on their browsers, but works nicely.

Notable is a paid app that gives you great tools for annotations and commenting on any site.

Bounce is my favorite so far, because not only is a free version of Notable, but is the easiest to use. No registrations, no downloads required. Simply go to the Bounce site, enter a URL and start annotating. Then save the comments and share the unique link with your team. If there’s one thing missing is the ability to draw on the page.

Any other tools I have missed?





Web Prototyping With PowerPoint

September 27, 2010

Prototyping with PowerpointWebsite re-designs are a common project on the hands of marketers at companies of all sizes. From quick home page makeovers to complete re-design and re-branding,there’s a lot of communication between the marketing team and web developers and designers, a process that involves lots of meetings, the developers spending hours on photoshop mockups that don’t look like what you asked, and a lot of scribbling on paper and on whiteboards.

How can we improve this process? The answer may lie in a tool most people already have… MS PowerPoint!

PowerPoint Prototypes

What I’ve successfully done in the past to help the communication between the marketing team and the designers is to use PowerPoint as a way to visually communicate with the how the new design and functionality will work. Instead of waiting for the designer to come up with a Photoshop or HTML mockup of something that doesn’t resemble what I asked for, the PowerPoint slide can serve as a guideline and visual discussion tool for everyone involved.

Marketers are good at visual communication, but not necessarily experts with the design tools. PowerPoint is something everyone knows how to use, though. So why not take advantage of this free (your company is likely using MS Office suite which comes with PowerPoint) tool and use it for some brainstorming? Mockups or prototypes created w/ PowerPoint are not supposed to replace professional wireframing tools such as Balsamiq, Justinmind, or Sketchflow, but should rather be used to help non-programmers and non-designers communicate their ideas. Plus, if you are discussing elements of the website design with other management team members or the CEO, the ability of quickly changing something on the slide will help you get approval faster.

Although you can make interactive prototypes using PowerPoint, my suggestion is to keep it simple and focus on key elements you’d like to communicate to the designers such as overall layout, placement of objects, and so on. You can get so deep into making sure your animations work if you’re going for a full interactive prototype that it will cost you many hours that will be just thrown away since it won’t be used again.

The key is to keep it nice and clean. A good starting point on how to do this is Travis Isaacs presentation “How to Wireframe Like a Ninja“. It talks about Keynote (a presentation tool for the Mac), but 99% is transferable to PowerPoint.

It also helps if you download something like this PowerPoint Prototyping Toolkit from Long Zheng, which gives you some nice tools you can start using right away.

So what are you waiting for? Start prototyping today! 🙂


%d bloggers like this: