Favorite UX Tools : 2016 edition

Work smarter. Not harder.

I am efficiently lazy, and by that I mean, I am always looking for tools and process that will streamline my work. Work smarter, not harder. This is a brief look at my favorite tools coming out of 2016 for each step of the UX journey. The theme of the past year was collaboration and feedback loops sans email.

Information Architecture/Touchpoint Mapping

Draw.io

The draw.io/google drive combo wins. There are a ton of resources out there, but collaboration is the name of the game. I experienced 2 use cases that overwhelmingly won me over.

The first was at givecamp, an insane weekend where you design ALL the things for a nonprofit. Time is of the essence. I had the privilege to work with Christy Kloote from Visual Hero who introduced me to draw.io. I saw the benefits immediately. Both of us in the same document frantically documenting all of our learnings from the brain dump session and dragging the ideas into a sensical site map. Brilliant.

The second involved a touchpoint map for an insanely giant application that I had documented in draw.io. I shared it out with the team after my first stab at it. They were able to put comments all over it and help me shore up the areas that I had missed or misinterpreted at the brainstorm without another meeting or a long email chain. You win draw.io!

Protip; start by mastering their zoom keyboard shortcut vs browser zoom. CTRL/CMD+PLUS/MINUS and ALT+mousewheel. It took 1 medium sized project (1–2 hours) to feel at ease with the flow and shortcuts.

Honorable Mention: Omnigraffle


Wireframes

Balsamiq

This is a tried and true classic. Fantastic drag and drop UI components make it super fast to throw together a layout concept. Their alternative draft feature makes me want to hug their UX designer. Admittedly, I don’t use it much these days. Paper to sketch or code is pretty efficient now that I’ve built up a solid library of components.


Interaction Design

Nothing has replaced code for me… yet!

I’ve tried all of the big ones this year! Nothing I’ve found up to this point would be easier/faster/maintainable than just going to code. I’m holding out hope for the release of Craft Prototype plugin — currently in beta. Who can get me a beta code?! Please ping me if you’ve found a program to mock interaction with a decent workflow from Sketch.


Prototyping

Sketch

I made the jump from Adobe Illustrator to Sketch this year and I couldn’t be happier. Sketch nailed the features I need to do my job. Whenever I find something lacking, their plugin library has me covered. Future post about this transition. On the complexity to goodness chart — Adobe took a turn towards the more complex, less good quadrant. When you make features for everyone, you come out with a product for no one. Thank goodness Sketch made a product for interface designers.

Middleman

For some projects, I need to feel the grain of the web. This means coded prototype. I need to feel the push and pull of the browser window and endlessly tinker with transitions and animations until they’re just right. To do this, I use the static site generator Middleman. It uses ERB templating to quickly throw together layouts and loop through YAML or JSON data. Shout out to Ross Brandes for the introduction.

InVision

Great for super simple click through interactions and prototyping. Love the Sketch Craft plugin that zaps my Sketch artboards into my InVision project. I can’t wait to see them go deeper with the interaction piece.


Analytics

Tag Manager

My colleague Kalie Clay introduced me to tag manager. Instead of the GA classic method of labeling event type and names in code you can instead tag DOM elements with a unique ID that can be configured with the event type and name in tag manager at any time without a developer or deploy. If you change an event type later you don’t have to worry about losing user data because it’s all associated to the ID.


Collaboration and Feedback

Slack

If you work in tech, you know slack. It’s hands down the most delightful and effective team messaging app. If your team is dependent on email for communication, or if you just want more joy in your workday, you need to check this product out.

Zeplin

This tool is a game changer for closing designer/dev feedback loops. It takes my sketch files (or photoshop if you’re into that) and allows my dev and product teams to inspect the CSS properties and dimensions of my elements. You can create a style guide from these files as well. The best part is how well it integrates into my workflow. I can quickly make a change in Sketch and use the zeplin plugin to zap it to the zeplin project. I can integrate each zeplin project to a slack channel so my dev team knows within 5 seconds if I updated a file or if someone commented on it. A rapid design feedback loop without meetings or email! Success!

Note; InVision (mentioned above) just came out with Inspect to rival Zeplin. From a budget standpoint I would love to just pay for one subscription and dump Zeplin but their interface and file management is SO much better. For now, Zeplin still wins.

Like what you read? Give Mari-Megan Moore a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.