Recently I was re-reading a post by Patrick Neeman… “Five Things You Should Do to Be a Great UX Designer” (circa 2012) where Patrick talks about what it means to be a UX designer and 5 things you should be doing to be a ‘Great UX Designer’. There was something that Patrick mentioned that jumped out at me this time around:

"Wireframes are only one communication tool that User Experience Designers have in their toolbox."

This got me to thinking about what tools are in my toolbox? How do I tell stories? Are they as effective as I think they are?

Here are some of mine:

##Sketching Yes, I know… this is the obvious first answer, however for most of my career sketching hasn’t been my go to medium. Lately I’ve been using Medium point Sharpie Pen’s and card stock to sketch ideas and regular colored sharpies to add more details if necessary. In larger design ideation sessions we’ll time box sketching sessions to 5 or 10 minutes rounds, which is amazing for converging on ideas within a group.

##User Story Mapping I’m not referring to the ‘As a user, I’d like to’… training wheels everyone is familiar with. I’m talking about building journey maps of the uses existing process, building a framing statement, empathizing with the user, competitive analysis, ideations and translating all that into a story map of how we solve that problem…

I can’t imagine starting any product, feature or iteration without a story map. If you haven’t already, head straight over to Amazon and buy Jeff Patton’s book “User Story Mapping - Discover the Whole Story, Build the Right Product”. Go ahead, I’ll wait for you.

##Wireframing I prefer to wireframe using Illustrator or Sketch… I’ve been using vector based drawing tools for years, I know them really well and prefer the flexibility of vector shapes over other design tools such as Photoshop (please do not tweet or email me about using Fireworks, seriously!).

Wireframes come in all shapes and sizes and shouldn’t be limited to sketching or high-fi wireframes, depending on the project it’s super simple to wireframe in the browser, you can easily grab Bootstrap or Foundation and quickly knock out layouts with dummy data. There is no wrong way to create a wireframe.

##Prototyping Creating clickable & functional prototypes is by far the best part about my job. It’s one thing to create low-fi or high-fi wireframes/screens and hand those to a stakeholder or a user. Giving them something they can play with in the browser is infinitely better.

My personal preference is to create a series of clickable screens in InVision for quickly testing interactions and then move into an HTML/JS/Jekyll prototype or Framer.js. HTML/JS/Jekyll and Framer prototypes require that you know how to write a bit of Javascript.

If you’re curious about learning more about prototypes, I can’t recommend the “Flavors of Prototypes” blog post by Marty Cagan enough. I have also created a couple bare bones Jekyll repos on Github for Bootstrap and Foundation that I use for all my prototyping needs.

##Product Rehearsals Rehearsals are key to identifying opportunities in your current product/feature. They are very similar to in-person user testing, but with a Product Discovery/Story Mapping twist. We start with a testing script (usually a set of defined tasks) that we run users through, usually the entire product team will observe this process. The product owners and dev team usually take notes on where the users struggle with the product or task and any technical issues they might run into, while I tend to focus on the intangibles, mood, reactions, verbal comments, etc..

Once the group of users is done with the set of tasks, we have them create a journey map of the process. Outlining their process to complete each task and discussing the different ways each user completed each task. Once we have the journey maps in place, we’ll have each user identify their top pain points in the process.

Rehearsals allow us to create shared understanding around the product/feature, build empathy for the user, nail down usability issues, clearly identify opportunities to improve the product/feature and step back and look at the big picture of the entire product.

##Design Comics Last year I stumbled across a Speaker Deck presentation about UX Comics by Bonny Colville-Hyde. When you build story maps, an important part a lot of people forget about is visually translating the important high level stories. Why comics? Everyone loves comics, it’s the perfect medium to reach just about anyone’s imagination.

I really love creating comics because it’s SO EASY! No, seriously it’s super easy. Anyone can draw a stick figure, string a couple together with a speech bubble or two and you have a comic. Another trick is to take photos with your phone, grab a comic action plugin for photoshop and done. I haven’t seen too many design or UX Comics in the wild yet, so if you do give it a shot let me know, I would love to see what you come up with.

Being a UX Designer is about understanding problems, empathizing with the user, problem solving, learning, iterating and ultimately visually telling a story that resonates to product owners, stakeholders, engineers and the user. There is no prescribed process for this stuff, just like Agile it’s a framework that you should iterate on and make your own.

So what’s in your toolbox?