The 5-Day Design Workshop … Sort Of

I recently had a startup ask me to brainstorm solutions to their current product. After a 1.5 hr session, they wanted to turn it into a 1-day project. But my reply was “no way – you can’t fix a product in 1 day”. Since then, I’ve been thinking more and more about what quantifies as Lean – and does it mean UXers should be able to create 1-day bite size projects?

My answer is still “no way”, however, there are steps we can take in a 1-week sprint that I find helpful. These are based on the theories of C. Todd Lombardo; and explained by Bruce McCarthy in his talk titled: Lean Roadmapping: Where Product Management & UX Meet.

Here are Lombardo’s steps toward a 1 week Design Sprint:
1) Interviews on Monday
2) Compare notes on Tuesday
3) Brainstorm what you want to prototype on Wednesday
4) Build the prototype on Thursday
5) Show it to Monday’s interviewees for feedback/validation on Friday

Of course, to hold interviews on Day 1, there has to be a considerable amount of planning on Pre-Day 1 in order to: get those interviews set up; UX and stakeholders assembled; and the re-visit on Friday with the Day 1 attendees. So, theoretically, a 5-Day Design Sprint works; but don’t expect to accomplish it in 5 days.

How to Quickly Isolate a Part of an Image Using Illustrator

There are times when we need to isolate a region of an image graphic. We can use a mask in Illustrator to accomplish this in 2 or 3 steps.

For our example, let’s isolate the play icon from the screen grab I took (from proto.io’s website).

1) create a shape that covers the area you want to expose in your artwork

1) let's isolate the play button
1) let’s isolate the play button

2) select that shape, plus the artwork beneath it
2) Create object clipping mask-make
2) With both objects selected, we create the object clipping mask

3) go to the Top Menu, choose Object > Clipping Mask > Make
3) View the masked play button
3) View the masked play button

How to Quickly Vectorize an Image in Illustrator

There are times when we want to work fast and lean, so we grab screenshots of items off the web and plop them into our wireframes. But there are other times when we want a more polished finish. It is during those times that we’ll need Illustrator’s vectorizing abilities to trace images that we want to scale.

Below are directions for using Illustrator’s Trace feature to trace a bitmap image.

1) paste an image into Illustrator
2) with the image selected, go up to the Object menu, then Trace > Make & Expand
3) Voila! Your image is compromised of vectorized parts.

Software Smackdown: Balsamiq vs Keynote vs Omnigraffle vs InVision

  • Balsamiq Mockups for Desktop, Version 2.2.19
  • Keynote 6.1
  • Omnigraffle 6 Pro
  • InVision (cloud platform, 03-19-14)

Today I focused on creating the same low-fidelity iPhone 5 prototype in 4 different applications: Balsamiq, Keynote, Omnigraffle and InVision.

My end product was a login for an e-commerce store.  By developing the same clickable prototype in all 4 softwares, I was able to getter a richer understanding about which one(s) I want to fall back on when needing to rapidly prototype a product.

Here’s what i learned …

Balsamiq
pros:
• very quick & easy to learn

cons:
• have to drag/drop an image
• no mask abilities
• no layers (a workaround is to make an object “markup”)

balsamiq
awesomely simple and quick

 

Keynote
pros:
• very quick & easy to learn
• simply hyperlink buttons (versus creating “hotspots”)

cons:
• no iphone 5 artwork
• no layers: using master template is less intuitive then using layers

keynote
also quick and easy to use

Omnigraffle
tough to figure out, but quite robust
pros:
• has layers
• has precise info on grid positioning

cons:
• doesn’t come with iPhone 5 stencil artwork (only iPhone 4)
• in preview mode, I got an awful hover highlight over the entire main content
• hotspot navigation falters when using masked artwork in combination with layers

omingraffle
robust feature set, including layers

InVision
pros:
• very, very quick and easy
• don’t have to mask overflowing content, as the software handles it for you
• preview is phenomenal
• comes with iPhone 5 artwork

cons:
• no layers – so you might have to merge some artwork
• resolution is confusing (uploaded artwork gets stretched)
• can’t edit device once past the selection screen

invision
very simple for quick drafts, but tough to edit

=====================

THE WINNERS:
inVision and Balsamiq: both are easy to learn, with inuitive flows and ready-to-go artwork; thus, allowing us to focus on the task at hand (quick prototyping, low-fidelity) rather than thinking about how to use the software