May 15, 2020

UX tools for creators

For the past few years, creative professionals have had access to a wide variety of powerful UX tools. And each year, as the UX design process matures, the tools that help facilitate our daily work also mature. From collaboration to prototyping, the options are plentiful.

Today I'll share with you some of the UX tools that I use, as well as those that make up the current UX design landscape. But before we dive into the software, I thought we should take a step back and define what UX is (and isn't).

What is UX?

UX, or user experience, encompasses all the interactions a person might have with a company or product. From ease of use to how something feels—the goal of good UX is to create less friction and more delight for the end-user.

I recently wrote about my Apple iPad Pro purchase and it was a case study for best in class UX. From the way it looked, to the way the packaging smelled, to the onboarding process once you turn the device on—everything feels like one cohesive experience.

As UX designers, it's our job to create systems that bridge the gap between the end-user and the product itself in a way that's easy to understand and fulfills expectations. We build out personas, storyboards, and customer journeys to ensure each stage of the process is efficient and relevant.

This is not to be confused with UI design, or user interface design. UX design focuses on the user journey within the product, while UI design focuses on the look and functionality of the product. So if UX design focuses on the user journey from start to finish, it only makes sense that the first tools we pick up should focus on the user.

UX tools in four phases

Below I'll highlight some UX tools I use during the four phases of UX design: Research, Wireframing, Prototyping, and Evaluating. I'll highlight the tools I've tried with 👍 and will give my personal recommendations with 🔥. Let's go!

Phase 1: Research

UX research methods may vary, but most can agree—the research phase is on of the most important parts of the UX design process. Finding your core audience and meeting their needs is of the utmost importance. Below you'll find some UX research tools I use to help get you started.

Notion 👍 🔥

Notion is an expansive app that's great for many things—including cataloging and organizing your research. If you don't already have an account, they have a free plan with unlimited members and you could easily set up flows to capture user data and observations.

If you want more detail on how to use Notion inside of your UX design practice, Mario Merino Granados breaks down how he uses Notion as a repository for his entire UX process.

Typeform 👍

Want to know what your potential user base is looking for from your product or service? Just ask them!

Setting up a customized, branded experience in Typeform is easy, and the reporting features will help you sort through what's important to your audience (and what isn't).

Talebook

Talebook is an app built for the discovery phase of your UX project. This all-in-one app helps you collect stakeholder interviews, build-out competitor analysis, create user personas, and much more.

If you're looking to understand who you're designing for, Talebook can help you pull back the curtain.

Phase 2: Wireframing

This phase is where you get to take all the ideas floating around in your head and begin to sketch out the user journey. A wireframe mockup should be quick and messy—try every idea you can think of. In this part of the UX design process, there are no bad ideas.

If you want to use paper and pen, that's perfectly acceptable. However, I recommend the apps below to increase your production and speed.

Balsamiq 👍 🔥

When I ran my agency, our team used Balsamiq on almost every project. We liked using it because it was lo-fidelity and peeled away any polish—ensuring clients didn't get stuck on color choices or typography.

Balsamiq has a rapid sketch or whiteboard feel that forces you to focus on the content and structure. I highly recommend it if you want a simple piece of software that gets out of your way and lets you be creative.

OmniGraffle

If you're a visual person like me, you'll love Omnigraffle. It takes your thoughts and organizes them into easy to digest and shareable designs.

Not only can you create wireframes, but Omnigraffle also helps you make page diagrams, flow charts, and more. These features really come in handy when setting up user flows and site maps.

MockFlow

If you're looking for a collaborative, online wireframing tool, look no further. MockFlow allows you to work with others using powerful cloud features like sharing, comments, and approvals.

They also offer a large collection of UI component packs and templates to kickstart your designs. Definitely worth a look.

Phase 3: Prototyping

Okay, so you've finished off your user research and wireframing and you're ready to move on to the main attraction—prototyping.

Make no mistake, the tools we have available today are not the UX tools of the past. Today's prototyping tools are powerful and UX driven. They give designers the ability to test ideas with users quickly and then iterate on the outcomes.

It's a great time to be a UX designer, and these tools make your job easier. Here are a few of my favorites:

Figma 👍 🔥

Figma is the current favorite for many UX designers, but especially teams. Not only is Figma a cloud-based, collaborative beast, it also gives designers the ability to "show, not tell" their interactive vision.

The prototypes are robust and give you an amazingly precise look at how the product will work in the hands of users. From responsive layouts to plugins to generated code, Figma is everything you want in a modern design tool.

You can get started for free by creating an account. From there, download the Figma app or fire up their interface in your web browser—either way is a world-class design experience. I've made the transition to Figma myself and can't recommend it enough.

Webflow 👍 🔥

Truth be told, building a site has never been easier. Webflow lets you take your ideas straight into the browser and craft them effortlessly with their site designer. You can design your layouts and interactions inside of the tool and see in real-time how they'll look on mobile, tablet, and desktop screens.

When you're done designing, all the markup and code is auto-generated for you. From there you can either export the code for hosting on your own server or use theirs. It's hard to find a better, more efficient prototyping tool than one that outputs a fully realized and functional site in minutes.

I recommend Webflow to all UX designers who want to take their idea from wireframing to production quality in record time.

Sketch 👍

I use Figma now, but when I decided to make the move from Photoshop a few years back, my first choice was Sketch. I used Sketch for years, it's a workhorse and still offers so many great amenities that any UX designer will enjoy.

Sketch allows for working with collaborators, a vast plugins ecosystem, and an engaged community to help answer questions. Their pricing model is straight-forward and actually quite reasonable for teams at just $9/contributor/month.

InVision Studio

An OG in the space, InVision Studio has all the basic requirements of a modern UX design tool. Like Figma and Sketch, you can collaborate with others, prototype using animations, and design responsively quickly and easily.

I've only used InVision Studio a couple of times, and I don't have anything negative (or positive, for that matter) to say about it. It really boils down to preference, and for my money, Figma and Sketch win out.

Adobe XD

As an Adobe product, I was always a little skeptical of XD. But over the past few years, I've heard from a ton of UX designers that swear by it. Like the other tools above, Adobe XD is a powerful collaborative design platform that allows coediting, syncing, dynamic layouts, and more.

Built from the ground up, Adobe XD has a lot of features that make it attractive to UX designers—especially if you already have your toes dipped into the Adobe ecosystem.

Phase 4: Evaluate

Launch day has come and gone and now users are interacting with your product or service. You made your best guesses during the research, wireframing, and prototyping phases about user behavior—now it's time to see if you were right.

The evaluating phase is of utmost importance to make sure you've connected with your user's needs. Check out these tools below to make sure you're serving them well.

UserTesting 👍 🔥

I almost put this tool in the research phase of the UX design process as many UX designers use this tool to validate their research early on.

No matter which phase you choose, UserTesting is great for getting real-time feedback from real customers. You'll get invaluable feedback from customers as they engage and interact with your product so you know what's working and what isn't.

Userbrain

Another great way to test your product is with Userbrain. Like UserTesting, you'll be able to see how real people interact with your product and make changes accordingly.

One cool thing about Userbrain is you'll get weekly insights so you'll be able to continuously optimize and improve your product as new tests come in.

Phase 5: Repeat

Okay okay, I know I said there were only four phases—but they're really just the beginning! When using the four phases of the UX design process, your work is truly never done. Iterating on these four steps and constantly cycling through each phase is the way of the UX designer.

Remember: You should always be looking for ways to empathize, optimize, and deliver amazing experiences for your users. Trust the process!

In conclusion

I hope you enjoyed this dive into the current state of UX tools. If you have favorite tools, especially ones that I haven't listed here, I'd love to hear about them.

Please feel free to hit me up on Twitter if you have any questions and share this article with a UX designer who might find this helpful or interesting.