UX design tools for non-designers
The UX space is saturated with tools. A couple years ago most designers used Axure or Omnigraffle or even Illustrator, but then Sketch arrived and kicked off a boom in tools for UX design, prototyping, and even coding. Now there are dozens of feature-rich options.
But UX designers aren’t the only people who need to create user flows, sketch out concepts, draft basic wireframes, or cobble together prototypes. As more and more stakeholders get involved in design activities I’ve seen a need emerge for tools that let a variety of people participate without being hampered by a steep learning curve or bewildering array of features — something that lets anyone create concepts and prototypes that are professional-looking, but also low-enough fidelity to keep people focused on ideas and flows rather than pixel-perfect detail.
After a lot of experimentation I’ve landed on two tools in particular — Moqups and Adobe Comp. Moqups for computer and iPad (yes, iPad!), Comp for phone.
Moqups
First, Moqups. This web-based tool is like Visio for UX purposes. It features a drag-and-drop approach to creating diagrams, user flows, and wireframes using a series of stencil and icon libraries. These let you focus more on what you’re creating and less on figuring out how to draw using unfamiliar tools. It includes a diagramming mode in which connectors snap between objects, making it quick and easy to sketch out complex relationships in seconds. And on top of all that it has basic built-in prototyping so that you can connect screens together to illustrate flows.
Every time I run design workshops with cross-functional teams I get feedback from non-designers that they feel hampered when we do concept sketches. People who don’t draw regularly tend to feel uncomfortable sketching ideas to share with designers. Moqups is a great solution for these situations, as it has virtually no learning curve and lets anyone start throwing together reasonable-looking concepts in almost no time.
The creators have also spent considerable effort making Moqups work even on a tablet. I first discovered the app when I found myself unexpectedly laptop-free on a contract and needed an iPad design tool to tide me over. Starting with user flows and moving on to wires I was able to do almost everything via touch screen that I could do on my MacBook. I’ve since found one significant bug that makes diagramming downright difficult on my iPad, but that’s one of only two issues to be aware of. The other is that as a web-based tool you’re out of luck if you want to rough out some concepts during a flight or at that off-the-grid cabin. While this may be an occasional inconvenience, Moqup’s web-based model can be a benefit too: I regularly switch from laptop to iPad and back, and never need to fuss over moving files between them. Overall this is a handy, easy-to-use app that anyone can pick up.
Adobe Comp and Marvel
For intensive design work I’ve been shifting towards Figma lately, and for early work I generally head to Moqups. So how does Adobe Comp fit in? It lets me explore ideas when I’m out and about. It lets me design on my phone.
Comp lets you create projects, each containing one or more screens. You can select from a range of common screen and print sizes to start your canvas. Then you start drawing. Comp offers a small library of common shapes, and you can also import and place your own images. One interesting feature is the ability to draw a rough rectangle, circle or other shape with your finger , which Comp recognizes and replaces with the appropriate (less scribbly) object. You have most of the usual drawing tools at your disposal, including aligning and distributing objects, applying transparency, grouping, locking, and more. Comp supports text in just three styles (Headline, Sub Headline, and Paragraph), but once in place you can tweak font, weight, size, alignment, and more. The app gives you all the tools you need to create and share basic concepts.
There is a catch. To be blunt, using Comp on your phone is not easy. You have to be patient because actions that are simple in other apps may take several actions to achieve in Comp. Some actions don’t exist at all or are surprisingly challenging to discover (like rotating objects, which feels like it should be pretty obvious). But if you have a Eureka moment on the subway and desperately need to capture the gist right away, Comp’s got your back.
There’s no diagramming or prototyping in Adobe Comp, but never fear — there’s an app for that. You can pair Comp with another tool called Marvel App to turn your Comp screens into tappable prototypes. In fact if you have pen and paper (or sticky notes or a whiteboard) you could just sketch out your ideas, take some photos, and then import those directly into Marvel to create quick & easy digital paper prototypes without even touching Adobe Comp. (Digital paper prototypes? How meta!) But there’s still that caveat: A lot of non-designers don’t feel comfortable sketching, so for them Adobe Comp offers a way to close the gap and create concept images that are quick to create, while definitely more polished than the average napkin doodle.
So in essence, Adobe Comp is a decent option for making design accessible to non-designers, and pairing it with Marvel App even adds basic prototyping. It may be more cumbersome than Moqups, but on the other hand it’s free! Both it and the mobile versions of Marvel (iOS / Android) offer free versions. Good for teams on a budget.
Recap
In a world saturated with design tools it can be challenging to find options that are quick to learn and yet comprehensive enough to let both UX designers and non-designers collaborate on design. Moqups is a particularly strong option for a wide range of contributors, and Adobe Comp and Marvel App offer a more basic but also cheaper and even more portable duo. Check them out, and let me know what you think!
