Engagebig.com v2 Prototype

This redesign was not too complicated – we wanted to present a more professional, modern site, focused on delivering a single point at a time, while keeping it all relatively simple. The small video clips of us were inspired by (and use an API to) robo.to. They are a fun way to get a better idea of who we are.

The main Axure lesson I’ve taken from this prototype is that we can use opacity gradients to “fade” scrolling elements in and out of the screen. Note the left and right sides of the carousel animation in the prototype. This effect didn’t go into the final design, but it was fun to develop.

Also note the nice browser chrome. Unfortunately I can’t redistribute the .rp file itself because it uses the very-awesome but for-pay Konigi icons.

In the name of transparency and providing a useful example for the design / ux / development community, I’ve posted the Axure prototype for our next version.  We’re pretty excited about the upcoming re-release, and I hope that the prototype can help show a piece of the process that our UX team goes through.

See the Axure Prototype for Do the Right Thing v2

The new design focuses on ideas – which are fundamentally more positive than complaints and compliments, because they are guaranteed to have a call to action.  The final release will have a few changes, and we had the liberty of leaving out some pieces that have already been implemented on the first site, but overall this is a fine example of what a site prototype can look like.

In other news, posts have been slow recently because I’ve made a move to South America.  There are challenges to being a global Web Worker, and I plan on writing a bit about the experience in the future.

Get enough screen real estate.  Lots of it.

Studies have shown that larger screens can make people much more productive, reaching improvements of 40 – 75%.  This is especially true with design applications like Visio, Axure, OmniGraffle, and Fireworks.

Having a second monitor can allow you to have a reference file on one side while wireframing on the other, reducing the need for window management.

Use scrolling shortcuts (and a mouse).

Scrolling around a large wireframe by clicking the scrollbars requires a lot of extra targeting with the mouse.  Avoid scrollbars completely with the following shortcuts.

Most design applications follow these conventions:

• Scroll up/down: Mouse wheel
• Scroll left/right: Shift + Mouse wheel
• Zoom in/out: CTRL + Mouse wheel
• General scrolling: Space + Mouse button 1

• Copy+paste an element: CTRL + Click an element, drag it to the target location.
• Move an element, maintain alignment: Shift + click and drag

Pimp your program.

Adjust tools to fit your style of usage.  Remove unnecessary toolbars and buttons; add useful ones.  Learn keyboard shortcuts.  Move panels around.  Keep the process of making your process faster close at hand.  Improve your own User Experience.

Watch your fidelity.

The lower your fidelity, the faster you can work.  People’s natural tendency, though, is to make their designs look good.  Be wary of any visual flourishes. It’s tempting to round the corners on that box, or put a little gradient on that button, but that’s a slippery slope.  Wireframes can be made to look very good without many visual flourishes by using minimal colors (light grays work well), pleasing alignment, and appropriate whitespace.

Use open source stencil and icon libraries.

Don’t reinvent the wheel.  There are great stencil libraries for Axure, Visio, and OmniGraffle, and hundreds of quality icons can be found at Wikimedia Commons.  Build yourself a template or folder that has all of the elements you need prepacked for every project.

Use masters / backgrounds / reusable elements wisely.

When creating a widget, layout, navigation, or any other element that will be reused across pages, always consider making it a master or background.  Consider what it will be like to change the wireframe in the future.  Is there a complex widget that has been copied and pasted across many screens?  Updates to that widget will require a lot of extra editing.  Construct elements with the future in mind.

Do you have other techniques for speeding things up?