Comments are off for this post.

Graduated! Interaction Design Specialization from UCSD!

I'm so excited to announce my graduation from the University of California San Diego Design Lab. I've spent my weekends over the past 2+ years studying for the Interaction Design Specialization and learned so much from it. Please see my Capstone project on Medium.

Comments are off for this post.

The Key to Fixing Enterprise Software

In Jared Spool's podcast on titled "Time Traveling with Enterprise Applications – UX Immersion Podcast", they explore the topic of fixing bloated, unusable enterprise software systems from a ux strategy perspective.

Jared Spool and company highlight how enterprise software is often database driven, e.g. "if it's in the database, create a field for it on the screen". It makes sense, since most of these systems were driven by engineering and built 10+ years ago. Back then, users and design weren't as vaulted as they are today.

I enjoy how Spool and company flow from identifying the problem to fixing it. If there's one golden nugget to take away, it's the following tip: watch/understand the enterprise users suffering while attempting to complete tasks using the software; then start chiseling away, bit-by-bit, at the improvements - make sure each release has at least one of your fixes in it.

In my experience, it's almost that simple - but not quite. People are often so preoccupied with pushing out features that even when they see user's suffering to navigate the archaic interfaces, they don't think "we better fix that"; rather, the thought process is "well, they'll suffer one time to figure it out, but then they'll know how to use it and won't suffer any more since they'll understand it after that first time."

Other things holding back the required changes is the coaching/training departments that corporations invest heavily into. Each time a change is made, the training manuals and lesson plans must be altered.

And lastly, there's the fact that if the software is so archaic, many great ux changes simply can't be accomplished. For example, in the old of Microsoft-driven technologies (ASP), it was standard practice to always compute changes on the server and to push them to the front end. Whereas, great modern user experience accomplish these same tasks on the client side - allowing for state changes without a page refresh.

Conclusively, though Jared Spool's plan of making incremental changes in each release is helpful, it falls short of describing how to accomplish great ux changes. In order to accomplish great ux changes in old enterprise software, there has to be a simultaneous build process - so for each feature that is carved into the archaic system, that feature is built out into the new system as well. At some point, the new will catch up with the old; at which point the old can be switched off (and buried!) and the new can light up the world.

Comments are off for this post.

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’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

Comments are off for this post.

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.

Comments are off for this post.

A Tale of Serendipity: iPhone Shortcuts & Bicycles

Recently, I found myself riding a rented bicycle down by the Santa Monica Pier. In an instant, as I rode behind my girlfriend, I realized I wanted to snap a picture of her. The picture would include the shadows of the underpass which played such a stark contrast against the fast approaching sun kissed beach path. I had to have that picture and it was out-of-the-question that we stop and pose it. That’s where the brilliance of the user experience design applied to the iPhone enfolds this story. Within a matter of about 3 seconds, I was able to accomplish the following left-handed, while continuing to pedal and steer my bike:

1) hit the wake-up button, i.e., Home button
2) swipe up on the camera icon shortcut that appears on the lock screen
3) frame my shot
4) snap my picture

Without the design including a shortcut to the camera in the lock screen, I would not have been able to capture my photo. The UX designers at Apple predicted my situation, probably by developing personas during the design process, and by conducting user tests. For this, I tip my hat to them and say "great f*cking job, you’ve made me a happy man".

bicycling under the Santa Monica Pier

iPhone shortcuts help us capture serendipitous moments

bicycling and iPhone shortcuts

iPhone's brilliant UX design allows us to use the camera while biking

Comments are off for this post.

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 …

• very quick & easy to learn

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


awesomely simple and quick


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

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


also quick and easy to use

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

• 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


robust feature set, including layers

• 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

• 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


very simple for quick drafts, but tough to edit


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