7 Instruments of Design: Your UX Toolbox

The world of UX design is vast, stretching from the analytical researchers to the visual designers. The underlying constant is the ability to create something that users can use, businesses can appreciate, and data can be analyzed. Below are just some of the very many tools a designer would use to thrive. In each case, a number of alternatives exist, but those listed are some of the ones I have found to be effective.

Sketch

A while back before UX was highly sought after, wireframes were created with tools like Adobe Photoshop and Illustrator. As the UX designer became more mainstream, the need for a streamline tool was apparent, and in 2010, Bohemian Coding delivered with Sketch. Where the precursor Adobe products shined in being robust tools that created beautiful designs, Sketch has succeeded in being a way to quickly develop vector-based wireframes without having as much of a learning curve. While Sketch is famously Mac-only, that has not stopped the application from being the top tool for years straight.

Figma

Figma seems to be Sketch’s eventually successor, due to its ability to collaborate in realtime similar to Adobe XD (another great tool), as well as some integrations with other popular programs like Zeplin that have made Sketch such a powerhouse. The web-based Figma requires just an internet connection, making it a better choice for many who choose not to have a plethora of apps on their desktops.

Webflow

In recent years, there has been an initiative to teach coding to every student in the United States. While this was started for positive purposes, teaching every child to be a developer only makes sense for those who have either the desire or skills to become one. Plus, tools like Webflow exist. Webflow is a visual site builder, making it easier to create beautifully designed websites on desktop and mobile without one line of code. Knowing HTML and CSS certainly helps, but with Webflow’s visual layout, those two skills can be learned while using Webflow. The tool is significantly better than some drag-and-drop tools like Wix and Squarespace, and is a much more intuitive tools for designers than an older tool like Wordpress ever was.

Lucidchart

Lucidchart is a web-based proprietary platform that is used to allow users to collaborate on drawing, revising and sharing charts and diagrams. This is especially important in the early stages of design when it is difficult to understand the overall architecture of how an application should work. Lucidchart, like Visio and draw.io, creates flowcharts to help teams better understand a process. Designers are, many times, visual thinkers, making Lucidchart the ideal way to get everyone on the same page.

Optimizely

After defining a problem and delivering prototypes, a designer’s work does not end. The adage says a designer’s job continues until an application or product is put into use by users. This is where testing tools come in handy, to make sense of the data. The platform technology provides A/B testing tools, an imperative method for seeing what works and what does not. Like Webflow, Optimizely uses a visual editor to quickly test out solutions to selected audiences. This way, major changes do not go out as large scale experiments.

Crazy Egg

Crazy Egg is another tool that provides A/B testing like Optimizely, but its most effective feature is showing heat map data to give designers an idea of where the user’s eyes are going and a mouse is clicking. It pulls in data from actual user visits to show which elements on your page get the most attention, and which are being ignored. This could give details about certain aspects of a page that may be thought of to be important or otherwise. The heat map gives qualitative data, but at scale. Another feature Crazy Egg provides is the ability to take snapshots to show the evolution of each page. This gives a before-and-after look at how users respond to specific changes.

BuilderX

In the last few years, React.js has quickly become the most popular coding library for creating JavaScript interfaces. A tool called BuilderX was created as a screen design tool to codes React Native quickly and efficiently. For reference, React Native is the mobile version of React.js. BuilderX excels where designers and developers have trouble translating certain aspects of how a design should actually work. Instead of dealing with miscommunication, BuilderX creates React Native code from designs, making the transition to code seamless.

Each of these tools can help a designer make good choices when trying to understand the user. Test them out and see if they work for your process. If not, each of those above most likely has a handful of alternatives that may be better-suited to your preference. It is all up to how you use the tools that will make you a better overall designer.