The Way of the Mockup

In product development we spend a lot of time working out product design, UI/UX and generally translating the new ideas into more concrete form for the development team.  A lot of teams will use wire-framing technologies to give visual life to the idea ahead of getting customer approval or just to present to the dev team so the ideas can take shape and form.

I have been partial to using tools like Balsamiq which give a hand-drawn look to the mockup - so that you can tell it apart from the real thing.  However, in recent months I have moved to a new technique when doing mockups on existing browser based projects.

These days - with great browser development and test tools like Firebug, Chrome and even some of the others - I tend to make all my modifications directly on the page and just grab a screenshot using built in system tools that are able to directly upload to dropbox.  I can add the image or the link directly to tickets in Jira.

This is what it looks like in action:

PROS: 

• It looks finished - often exactly the way it will look when completed.
• It is SUPER FAST - it usually only takes a few minutes to modify the html directly in the inspection tool window.
• Saving screenshots is a breeze - straight to PNG with no conversion or save-as.
• I can do it anywhere on any machine.

CONS:  

• Saving it and making changes are not perfect - you can save the html output into a doc and copy it back in later - but it isn't as simple as standard tools.
• It does not have the workflow demonstration that some of the wire-framing tools have.

Despite these important drawbacks - when the software is a known quantity and the team can easily rif from a simple screenshot mockup this has proven to be the simplest and absolutely the fastest way to communicate new functionality with my dev team.  Below are a few recent examples.

2-Minute Example:  In this case we used another page layout to define a new view.  A few words of text, with a few 'delete node' commands in the html view of inspect element is all it took.

20-Minute Example:  In this example - it was a bit more complicated.  I completely redesigned the dialog box - by copying the code from a different view that had a data-table in it - then I just deleted some data and added a bit more html and text - made a few other CSS changes. I also used some commenting in the code to create two different options depending on situational cues.  My tickets for the dev team were primarily focused on defining business rules.


As we all know - a picture can paint a thousand words. I hope these ideas can help you save time and money on your next project!


Find Mary Online! 

marycamacho.com  

JoyaSolutions.com