‘The Great’ UX Design Toolbox

Scroll down to know what is all about.

If you like it, download my collection of 900 tools (gross figure with overlaps) covering the entire design process according to the double diamond methodology.

With a linked table of contents, the toolbox is broken down into 4 + 1 elements of the double diamond including 56 separate ‘chapters’.

Customizable flexibly, this repository supports novice UX designers, creatives and is a source of inspiration.

 
 

‘The Great’ UX design toolbox. Why is it useful?

  • 900 standalone web-based tools, predominantly (gross figure with overlaps)

  • Covers the end-to-end UX design process from the problem to the presentation | portfolio

  • The most frequently mentioned tools

  • Organised according to the phases and important elements of the double diamond methodology

  • A source of inspiration for beginners in UX design

DISCLAIMER: Although my presentation below is linear, in reality, the process is always full of iterative loops, more desk research, more testing, more ideation and so on. It is not a ranking, but a pool of tools.

It could happen that I did not mention some tools in the most appropriate place. It is also possible that I did not put certain methods to the adequate stage of the double diamond. There are quite numerous tools that you can use at the various parts of the various stages.

Where the tool is not relevant, I am talking about a method or template, just to make the double diamond process complete. Some tools are more specifically UI tools. Since I am talking about an end-to-end digital product development process, I consider these as part of the UX design process here.

This is what you can expect:

Content

The number of tools or templates to each element are in (). Gross figures with overlaps.

Teamwork

You most likely work with other stakeholders, as a part of a team

Thus, before you dive into any problem you might need tools for teamwork

PROJECT MANAGEMENT

Asana, Trello, UpWave, Workzone, Jira, Rally, Pivotal Tracker, Basecamp, Bugzilla, Redmine, Azure DevOps, ClickUp, Notion, SessionLab

These are used by agile project management teams.

COLLABORATION

Miro, Mural, Conceptboard, Fresco, Figjam (Figma), InvisonAppFreehand, Whiteboard Plugin for Adobe XD Whimsical, Confluence, SessionLab

Covid19 speeded up remote work and even cross-border collaboration to give a boost to these kinds of tools.

COMMUNICATION

DAILY STAND UP

TIME ZONE

World Time Buddy, Boomerang, Time Zone Converter, World Clock Meeting Planner, Timezone.io, Timefinder, Klok (iOS), iPhone World Clock Settings

Remote collaborative teams may need to take into account multiple time zones. Typical features: world clock, map-based time zones or converter, online meeting scheduler, emails scheduler, local time tracker of teams visually.

ICEBREAKER

There can be a number of situations where you have to work with unknown stakeholders throughout a project. It can also be useful in the warm-up phase of certain research processes.

Discover

A deep dive into the problem you are willing to solve

THE PROBLEM

Techniques and tools supporting to understand problems and help this process are Five Whys, Fishbone Diagrams (Miro, Conceptboard, Figma, Mural)and problem visualization exercises, flowcharts, pseudocode, and Nassi-Shneiderman diagrams, which are used specifically with structured programs.

UX RESEARCH

Usersnap.com, Optimalworkshop, Hotjar, Mouseflow, Kissmetrics, Mixpanel, Lookback, Maze, Miro, Reduct.Video, Typeform, Qualtrics, UserTesting, UserZoom

I highlighted some tools that can be used in several parts of the research phase. Without exclusivity of course, just as an example.

RECRUITING FOR RESEARCH/TEST

There are always two types of cases depending on the context.
1) Unknowns should be recruited. The easiest is to post on social media platforms: Facebook, Linkedin, Reddit, Craigslist, Ethnio. If you have a separate, substantial budget for this, or it is justified by any professional or other consideration, you can work with a recruitment agency (eg. Respondent.io) or panel company. Some tools developed for user testing may also be considered.
2) Recruitment from a familiar set of users is sufficient. You need access to a user database of existing products or participants must be recruited within the company. You can also involve friends and family.

USER INTERVIEW

FOCUS GROUPS

Here, tools appear for group recruitment, audio/video capture and transcript, and templates used for alternative methods to Q&A. But the focus is much more on good methodology, good moderator and good observers.

Q and A is the most common format for focus groups. Variety could require alternatives, however, eg.: making choices from lists of alternatives; list-making; fill in the blank exercises; fantasy/daydream exercises; picture drawing; role-playing; card sorting. These could be supported by templates/tools.

USABILITY TESTING

TREE TEST

Physical (pen, paper), UXtweak, Treejack (Optimal Workshop), UserZoom, Userlytics, uxarmy, Helio, Proven by Users tree testing

The most affordable digital version is folder clicking. In a File manager (e.g. Windows Explorer), you create the tree of folders and observe the users on which path they click through it.

Another alternative is that some web editors allow the creation of interactive site maps, while some HTML prototypes use tree widgets.

SCREEN RECORDER

DIARY STUDIES

SOCIAL LISTENING

SURVEYS

DESK RESEARCH

The desk research covers the best practices, the competitor analysis, and the trend study. Not speaking about statistical tools now, the main question here is how to process, synthesize, and present the findings. For example, screenshots can be collected in all collaborative whiteboard tools (Miro, Mural, Conceptboard, Figjam (Figma), InvisonAppFreehand), and the well-known Office applications are perfect for spreadsheets and graphs, if not, you can move forward to dataviz. On-the-fly ideas can be put on sticky notes again on a whiteboard, etc.

ANALYTICS

The quantitative part of that. Technically, I just put it here, but analytical tools come into play several times from the UX research phase up to testing the finished hi-fi prototype.
A significant proportion of analytical tools integrate the support for multiple analytical methods. Examples for some of the generally known ones: Google Analytics, Hotjar, Kissmetrics, Mixpanel

HEATMAP

Mouseflow, Plerdy, Attention Insight, Visitor Analytics, Hotjar, Clicky, Lucky Orange, Crazy Egg, Contentsquare (Clicktale), Inspectlet, Google Analytics, FullStory, Smartlook, Ptengine, VWO

Each type of heatmap helps you investigate a slightly different aspect of your website performance: scroll heatmaps, click/touch heatmaps, move heatmaps. There are industry-specific heatmap tools, but these are above general ones.

EYE-TRACKER

RESEARCH DOCUMENTATION

Note: Dovetail, Notion, Google Docs, Evernote, Airtable, Reframer

For audio and video transcriptions: Otter.ai, Rev, Reduct, Audiate, Otter.ai Zoom integration, Temi, Descript

Insights: Spreadsheet, EnjoyHQ, Dovetail, Handrail or Aurelius

WORD CLOUD GENERATOR

Jason Davies’ Word Cloud Generator, Monkey Learn World Cloud Generator, TagCrowd, WordArt.com, WordClouds.com, WordItOut, Abcya
Click for more.

On top of classical charts, it is a small visual solution for a possible display of results.

Define

Synthesizing the output of the discovery phase into a problem definition

EMPATHY MAP

Miro Empathy Map Template, Mural Empathy Map Canvas Template, Invision Empathy Map Canvas, Conceptboard, Moqups Empathy Map Template, Creately Empathy Map Templates, Figma Empathy Map Templates, Dribble

An empathy map is a template, and accessible as an integrated feature of a digital whiteboard or in the community section of integrated prototyping tools. These are some examples above.

AFFINITY DIAGRAM

PERSONA CREATION

JOBS TO BE DONE

Two approaches are most commonly used: Switch, or ODI (Outcome-Driven Innovation®). For the Switch, the template is the Switch timeline and the 4 Forces matrix, in which 2 forces block change, 2 promotes a new choice.

When using ODI, which is perhaps more commonly known you can use a job story canvas or a job map to sort your observation on activities. Breaking down an action into its elements supports you to find improvement opportunities. In the job story, your product covers the job to be done to reach the desired outcome. You most likely find JTBD templates as a part of integrated research or whiteboard tools, examples: Miro, JTBD, Conceptboard, Attest, Mural, Infolio, Figma.

STORYBOARD

USER JOURNEY

Develop

Ideation/think up solutions to the problem

CRAZY 8

Whiteboard (Physical), Miro, Mural, Conceptboard, Lucidspark, Stormboard, Limnu, InVision Freehand, Figma example 

The best example of physical tools: the sticky notes and the pen. Practically all tools that provide whiteboard with sticky notes could be used for Crazy8.

CARD SORTING

FEATURE PRIORITIZATION

Product Analysis, Kano Model, RICE, Value/Impact vs. Effort Matrix, Story mapping, The MoSCoW Method, The Product Tree, Cost of Delay, Buy a feature, Priority Scorecard (The 100 dollar test or cumulative vote), Priority (Planning) poker

What supports future prioritization/selection are methodology frameworks and not technical tools really since all can be made on spreadsheets or using sticky notes etc. All methodologies have pros and cons. Some are used in agile development projects. Probably the most widely used frameworks are listed above with examples and templates:

FLOWCHART

Lucidchart (overall), SmartDraw (developing), Gliffy (beginners), Cacoo (intuitive), EdrawMax (features), Draw.io (price), Visio (Power Windows users), ConceptDraw Diagram, Creately (price), Edge Diagrammer (Windows)

The trend is that the prototyping tools, whiteboards, also integrate the flowchart drawing into their features.

INFORMATION ARCHITECTURE

SKETCHING

There is a lot of digital drawing software, but these are typically used by graphic artists. I have not yet experienced UX designers using these.

The easiest way is to put the first ideas on paper or on the whiteboards of familiar collaboration or prototyping applications eg. as a sticky note.

LOW-FIDELITY WIREFRAMING

Deliver

Identify the best solution, build that and deliver tested

DESIGN INSPIRATION

Behance, Instagram, Pinterest, Dribble, Awwwards, Logoinspirations, Designinspiration, CollectUI, Abduzeedo, Best Website Gallery, CSS Nectar, siteInspire, Product Pages, Land-book, Commerce Cream, The Great Discontent, A List Apart, Brutalist Websites, Admire the Web, Template Monster, Pttrns, Webflow showcase, Mobile patterns, Mobile mozaic, InspiredUI, Calltoidea, WebdesignDev, Mockplus, Muzli, Figma Community

For a designer, literally, anything can be an inspiration anytime. Perhaps the most prominent is nature. But also sectors and areas other than your own domain knowledge. In terms of UI, it can be art. Some design agencies or designers whose work you follow. Last but not least, design-related sites. Some examples are above.

DESIGN SYSTEM

Google Material Design System, Apple Human Interface, Guidelines, Microsoft Fluent Design System, IBM Carbon Design System, Shopify Polaris Design System, Mailchimp Design System, Atlassian Design System, Salesforce Lightning Design System, Airbnb Design, Uber Design System, Audi Design System, BuzzFeed Solid, Akveo Eva Design System, Liquid, Adobe Spectrum, Clarity, Ant

There are basically two possible cases. One is when you need to use the company’s / customer’s own design system or one of the most widespread design systems. It is also possible that the focus of your project is not your own UI and therefore you rely on an existing system. In the other case, you get a free hand to design and assemble the elements yourself.

The most important features of the design systems are colour palette, typography, form components, navigation components, CSS code, HTML code, usage guidelines. Above you find the most commonly known systems.

FONTS

ICONS

COLOURS

Adobe Color, Muzli Colors, Coolors, Color Hunt, Colorsinspo, Happy Hues, Color Designer, Palettte App, Khroma,Sip Color For Mac, Color Leap, Web Gradients, Grabient, ColorSpace, Scale, Gradienta, Calcolor.Co, Colorkit, Color By Cloudflare Design, Mycolorpanda

Multiple tools or multiple features of each tool can be useful. Ready-made, thematic colour palettes, colours search by keywords, mood, industry trends. custom colour generation with a colours wheel or one colour. The tools produce all variations out of the primary colour. They can also sample colours from an image and import a gradient, some of which have an accessibility checker as well.

Pantone, known perhaps to some in relation to the construction industry, also provides support for digital designers, as a paid service. You can come across a lot of ‘colour trends in a specific year’ type writings. Most of them come from the world of fashion, or home decoration. They are inspiring, but I recommend using them in digital products depending on the context.

PHOTO

There are remarkable alternatives for free: Unsplash, Gratisography, Morguefile, Pixabay, Stockvault, Pexels, Picjumbo, Pikwizard, Rawpixel, Reshot, Adobe Stock Free Collection, Megapixl., Stocksnap.io

You might need general or business-like photos. The largest or most known stock photo sites are iStock (by Getty Images) and Shutterstock. Their choice is immense covering everything in a paid scheme.

BACKGROUND REMOVER

Free desktop photo removers: Fococlipping, Picture Cutout, Fotomix, Adobe Photoshop (paid), GIMP, Adobe Spark, Photoscissors, piZap, ClippingMagic

Mobile photo background removers: Background Eraser, Photo Background changer-Backgrounds Remover Editor, Ultimate Background Eraser, Auto Background Changer & Background Eraser, Remove BG — Background Eraser & Background Editor.

It happens that you just want to one-click remove the background from a picture.

ILLUSTRATION

ANIMATION

GRAPHICS EDITOR

HIGH-FIDELITY PROTOTYPING

TESTING

For testing, you can rely on the analytical tools presented in the UX Research chapter. I do not repeat that section. That’s why I’m only listing accessibility checkers in the next point.

ACCESSIBILITY CHECKING

DESIGN HANDOFF

PRESENTATION

Pitch,Beautiful.AI, SlidesPPT, Presentations by Canva, Slidev, Templatesby24slides, SlidesCarnival, FlowVella, PitchPages, Keynote, Prezi, DocSend, Quip, Google Workspace.

For example, if you show a team the results of a project in a corporate environment, you need collaborative presentation software.

VIDEO EDITOR

DaVinci Resolve, Movie Maker Online, Lightworks, Shotcut, VSDC, VideoPad (free, beginners), Openshot (free, beginners), Hitfilm Express (free, advanced)

SOUND & MUSIC

MOCKUPS

Placeit, Smart Mockups, Renderforest, Media Modifier, Artboard Studio, Vexels, Mockuper, Printful, Mockup.Photos, MockupBro, MockupsJar, Magic Mockups, MockuPhone, Dimmy.club, Threed.io, WoFox

No matter on what platform, channel, or in what format you publish your work, you can’t imagine a product design presentation without mockups.

PORTFOLIO

Behance, Dribble, Medium, Youtube, personal website, LinkedIn.

Instagram is an interesting question. At first, you might not think because its user base and target audience are different and maybe not considered as ‘serious’. Yet there are ~63k UX and ~52k UI design hashtags. It cannot be considered negligible.

For a personal website, you need a website builder. I see two options here. 1) You want to express yourself, design in detail, even the nuances on your website because that is your main channel. Then eg. WordPress, Duda is for you. 2) You are present on other channels and intentionally you do not want to deal too much with the website, which is a kind of umbrella site anyway. You need simple, prepacked templates eg. Wix, Squarespace, Weebly, GoDaddy.