Tools user experience designers use daily

Check out some of my favorite UX tools, along with some info about how and when I use each of them throughout the process.

hearthfire-creative-ux-design-tools-google-forms-2.png

Google Forms

One primary role of the user experience designer is to advocate for users. Often, we’ll send out surveys and A/B tests to our target user base using Google Forms. These surveys help us screen potential users to interview more in depth. They also help us understand some basic thinking behind why our target users do what they do when using a digital product. Google Forms is a great tool for sending out surveys, collecting results, collaborating with other team members, and exporting basic reports.


hearthfire-creative-ux-design-tools-skype-2.png

Skype

Beyond surveys, one of the best ways to tap into the thinking of a user is to conduct one-on-one interviews with folks representative of our target user group. In person meetings? Super great. Remote meetings that tend to be more preferable for busy people? Also great. Skype is an effective way to conduct one-on-interviews that feel face-to-face, even though they’re remote.


hearthfire-creative-ux-design-tools-google-sheets-2.png

Google Sheets

Excel can suck it! I use Google Sheets to conduct heuristic analyses, to write and represent user stories, to conduct and represent usability testing, and basically for any other type of complex-ish reporting that involves textual data. Google Sheets has built-in collaboration tools which Excel does not. The ability to share with team members and get their input/feedback directly in the document is a true time saver for any UX designer.


hearthfire-creative-ux-design-tools-adobe-illustrator-2.png

Adobe Illustrator

Illy was my first love when it comes to design tools, and as such, I’ll always be partial to this fantastic vector-based software. When it comes to UX, Adobe Illustrator is a great tool for creating personas, empathy maps, and brand identities. Illustrator is a bit more robust than Sketch when it comes to creating intricate designs, so it’s also helpful in the UI design stage when you’re creating something that’s more… well, illustrative.


hearthfire-creative-ux-design-tools-adobe-photoshop-2.png

Adobe Photoshop

Photoshop might seem archaic for such a contemporary industry, but it’s still relevant to UX designers. Photoshop has its perks for creating and manipulating graphical components that are raster (image) based. You can also use the Timeline tool in Photoshop to create basic animations. Some UI designers still prefer Photoshop for the high-fidelity design phase as well, though it lacks collaboration tools.


hearthfire-creative-ux-design-tools-optimalsort-2.png

OptimalSort

Card sorting activities are helpful for defining an app or site’s information architecture. Conducting a card sort activity allows a UX designer to understand how their target users would search for and discover content within an app/site. OptimalSort, by Optimal Workshop, is a great tool for conducting card sorting activities totally remotely (and let’s be real… while in-person is always better, the convenience of the remote option is appealing and can result in more results, quicker).


hearthfire-creative-ux-design-tools-draw.io-2.png

Draw.io

There’s something about designing user flows that tickles my nerd fancy like no other. User flows represent each specific step users take to achieve a specific goal. Where does the user start and what steps do they take to accomplish their goal? UX designers map that process out in user flows. They’re an important bridge between product, design, and engineering, and they are a great launchpad for interface design (indicating specific screens that need to be designed). Draw.io is awesome because it’s 100% web-based and it’s free — holla! It’s also collaborative, including an option to share online files with team-members via their email addresses.


hearthfire-creative-ux-design-tools-balsamiq-2.png

Balsamiq

Balsamiq does one thing really well: wireframe. User experience designers use Balsamiq to map out and draw low-fidelity wireframes. It comes with some pre-made artboards, so designers can quickly set up iPhone and/or responsive web templates to get started with their wireframes. There are built in components ranging from buttons, forms, hamburger icons, modal pop-ups, and more so the designer can focus on functionality, not design (important at this phase). Further, it’s possible to create hot links within the artboards so a basic prototype can be tested early. Just create the links, and export a PDF and you’ve got an initial low-fi prototype as well. I’m a fan of testing early and often, even at the low-fi stage.


hearthfire-creative-ux-design-tools-sketch-2.png

Sketch

Sketch is the industry-standard tool for designing high-fidelity interfaces. Now that the functionality and basic components are mapped out (thanks, Balsamiq), it’s time to put some design love into the project. UX designers use sketch to implement brand colors, fonts, and other style guide considerations. Rounded corners? Light drop shadows? Outlined boxes? Sketch is where all that magic happens. Since it’s such a widely used tool, there are several plugins available to expand it’s out-of-the-box functionality. I recently used a pie-chart generator plugin for a data visualization project. Sketch also integrates well with other common UX tools like InVision and Zeplin (detailed below), which helps streamline the whole process!


hearthfire-creative-ux-design-tools-invision-2.png

InVision

InVision is the industry-standard prototyping tool. After creating high-fi designs in Sketch, install and download Craft Manager, and your Sketch screens will automatically port over to InVision. From there, use InVision’s tools to add hotspots, which will become clickable and will allow representative users to test the flow of your high-fidelity prototype. If you’re working on a team, InVision also allows for collaboration between yourself, fellow designers, project managers, and engineering. They’ve also recently launched InVision Studio in an attempt to compete with high-fi design tools and wireframing tools, but I haven’t jumped on board with that just yet.


hearthfire-creative-ux-design-tools-zeplin-2.png

Zeplin

You’ve completed the full UX process and you’re ready to handoff to engineering… but how? Zeplin! UX designers create style guides in Zeplin, and when integrated with Sketch, Zeplin will even auto-generate some basic code for engineering to reference. Zeplin also houses graphic components (created from set groups in Sketch) that developers can download @1x, @2x, and @3x and/or as .SVG, .PNG or .JPEG filetypes. It’s pretty much an automated assistant to the designer and advocate for design to the developer.


Ultimately, UX designers use whatever tool is needed to complete the job.

There are dozens, if not hundreds, of tools that could be used to accomplish various UX tasks. It all depends on the business requirements and the workflow of the team overall; and it’s crucial as a UX designer to be adaptable, as a different project might call for use of a different tool.