Top 15 UX and Design Tools of 2013

This is a list of my top 15 UX and design tools for 2013, listed in random order. These tools fit together to make my life simpler and better organized on a daily basis. They also, when used in combination, allow clear interdepartmental communication to take place which helps keep us agile!

  1. Solidify  http://www.solidifyapp.com
  2. UXRecorder http://www.uxrecorder.com
  3. Silverback http://www.silverbackapp.com
  4. GoToMeeting http://www.gotomeeting.com
  5. Balsamiq http://www.balsamiq.com
  6. Invision http://www.invisionapp.com
  7. Notable http://www.notableapp.com
  8. Asana http://www.asana.com
  9. TargetProcess http://www.targetprocess.com
  10. Skitch http://www.skitch.com
  11. MailChimp http://www.mailchimp.com
  12. SurveyMonkey http://www.surveymonkey.com
  13. Trello http://www.trello.com
  14. AppAnnie http://www.appannie.com
  15. ReflectorApp http://www.reflectorapp.com

InVision vs. Notable: Why We Love Both

A UX pro recently asked me which I prefer most for design collaboration, InVision or Notable by Zurb. The truth is I love them both, for very different reasons and we use both regularly in our Design and Innovation department.

InVision is a tool that allows design collaboration and feedback on individual high res screens within a prototype.

The Graphic Designer on your team can make the changes you request using the Fireworks plugin and Dropbox, and they’ll display immediately in your project. It’s a pretty slick setup and is a fabulous tool to use for more detailed prototypes that you need to gather feedback on and edit before you present them or pass them to development with your wireframes.

Notable is the tool we use primarily for ux and maintenance reviews of both our mobile native apps and our web products.

Notable has a mega handy mobile native app that let’s you screenshot things straight to your account. We have a team account that can be broken up into projects.

I’m a big fan of their clean UI and ease of use. Instead of spending our time trying to figure out the tool, we’re in there cranking out review notations. We then pass these UX and maintenance Notable reviews on to our development team for coding. It’s a pretty solid setup.

In short, these are two fabulous tools and I really can’t pick a favorite because they’re both powerful in their own ways.

For even more collaborative tools I love, check out my favorite tools page!

UX, Collaborative Design and Prototyping Gold: InVision (For Mobile and Desktop!)

You know what I love? And I mean, love, love in a big way? UX and design tools that make life easier for me and the rest of my amazing team.

If you work on a design team, whether big or small, you really really need to check out InVision. It has changed our entire design process in an extremely positive, time saving, better organized kind of way, and it saves us from using several different tools to do a job, which in turn saves us from having to replicate work and waste time!  Add to that the intuitive, extremely user friendly UI and you have a definite win. So what makes InVision so magical you ask?

It takes the agony out of design collaboration.

I work on a team with an incredible group of folks. Other than myself, our team is made up of 2  incredibly talented UX Engineers, a fabulous UX designer, a UX manager who is an interaction design rock star in addition to being a code ninja, and a VP who is incredibly innovative.

When you have a new design concept, what’s your process?

Maybe you discuss, wireframe, review, make high res mockups, review the hi res, email suggested changes to the mockup maker, when that person makes and uploads or emails the changes they let you know and you re-review them, the process repeats, then they go on to the next level up for review, the same process happens, feedback is sent, mockups are edited and re-uploaded or emailed.

You finally end up with solid hi res mockups, then you have to get out your prototyping tool, upload your high res graphics to it, hot spot them (or code click paths if you’re hardcore), then show them to your stakeholders/user testing community, get feedback from those folks via survey or email or phone call, have the graphic designer edit the hi res mockups again, then make another prototype with the new mockups, send them to your stakeholders for approval, then eventually send your mockups off to your dev team to be coded once everything is finalized.

You know what the flaw is with that process? It’s 982374 layers deep and you have to do the same thing over and over again (which is a sign of insanity by the way).

You have to edit graphics and upload them or email them over and over and over again, then herd feedback from all over creation into a pile and attempt to keep it all lost in one place, and you have to edit mockups and create new prototypes for demoing and testing post feedback rounds over and over.

InVision on the other hand, does ALL of the things! Hence my deep deep love for the tool.

1. Create  your hi res screen mockup, save it to your InVision sync folder and from that point forward any edits you make to a mockup are instantly applied to your shared prototypes!!!

Use InVision’s FREE Mac App to save your hi res mockups to a sync folder, and every time you edit and save changes to a screen graphic, they are magically applied in real time to your prototype! It’s like the Google Docs of UX and graphic design! It’s kind of amazing!

Let me say that again. This happens in REAL TIME. You don’t have to upload or share or prototype over and over again. You edit your mockup screen, click save, and BAM. Your prototype is updated, good to go and ready for instantaneous review.

2. Reviewers can notate requested changes on the screens!

Instead of showing your reviewer a screen and asking them to email you feedback, or giving them a survey trying to gather feedback, or IMing feedback or saying it out loud, folks you share the design with can just leave comments on each mockup screen. This goes for managers, VP’s and any other stakeholder you give access!

You can also put snazzy status updates on the screens, so folks you’re collaborating with can see if something is in progress, approved or if  it is ready for review!

3. The UI is fab!

The UI is super intuitive and simple to use!

4. You can make mobile prototypes, desktop prototypes, tablet prototypes, you name it! 

You’re making chrome free touch UI prototypes here! And they let you integrate the latest in fun, modern gestures!

From a mobile standpoint, when you send a finalized prototype link and a person clicks it, they are prompted to download the prototype and add a shortcut to their phone home screen, which even lets them see the custom app icon you’ve spent time perfecting! It gives that warm fuzzy native app feeling when folks are checking it out!

So how many layers of design process steps did we just kill by using InVision? About 92.

Do you and your design & UX teams a favor, and check out InVision! (Pro Tip: You can test it out for free!)

(Our awesome VP Jason @jcoudriet and our fabulous UX Designer Danelle @danellesheree were the discoverers of this magic! And big thanks Danelle for reviewing this article and sharing even more benefits that I didn’t realize existed prior to writing this article!) 🙂