Designers tool stack of 2020
We’re approaching the end of the decade and a lot has happened in UX, HCI and Interaction design during the last ten years. Especially design tools have improved A LOT — meaning that traditional methods from HCI can be aided by tools allowing the designer to focus on what’s important.
Taking a basis in a typical six-step design process, I present an overview of available and upcoming tools that can empower and guide the design methods found in each of the steps.
For each phase, designers typically use several methods to gain insights and move on to the next, previous, or another phase.
In the earlier days of HCI, there was a lack of digital tools to facilitate e.g. rapid hi-fi prototyping, and you had to use paper to simulate scrolling or basic interactions. Practical activities like conducting user studies, sharing user test data, can now easily and securely be aided with tools using the cameras, screen recorders, and other sensors available in our own devices.
Of course, it’s all about finding out what’s best suited for your needs as a designer in your context, but this is meant as a general overview of tools you may already know and use, or some you can try out.
The point of this overview is to enable upcoming and current designers to become even better and create well-designed experiences and services, by understanding the need for different methods in each design phase — maybe aided by a tool presented above.
Learn
Trint or Otter.ai is exceptional at transcribing audio recordings from interviews, focus groups and other qualitative data collection methods. This speeds up the analysis process and lets the designer focus on understanding and analyzing the transcription.
Further analyzing these insights can often be a hard process involving lots of considerations, organizations while still trying to move towards actionable outcomes. Dovetail is a tool that attempts to solve the mess of data that user research can be. Especially the feature of coding the notes and using that coding further is a great way to help keep track of the funneling of the data you’re working with.
Define
Traditional activities like Affinity Diagramming, Wireframing, System Design, and brainstorming, don’t necessarily require a physical setting to be conducted. Tools like Whimsical and Miro, are excellent at providing a stable and fast online environment to easily visualize whatever you’re working on while multiple participants can work in real-time in the same ‘document’.
Iterate
Continuously working on UI mockups or interaction prototypes can include multiple designers in the process. Depending on the size of projects and many other factors, your iterations and decision making requires some level of documentation. Using Figma for designing UI mockups and micro-interactions is great for working collaboratively and keeping track of iterations at the same time. However, tools like Abstract (for Sketch) take inspiration from Git known from programming, where you can branch out of a master file, working on that, and if it gets approved by your team members it can be merged/updated into the master file. This is a great way to keep track of which design is the newest while allowing designers to work freely in their “branches”, without worrying about losing somebody else’s work.
If you’re looking for prototyping minor interactions within your designs, tools like Principle and Flinto makes it fast and simple to simulate interactions and create complex animations. This is great for rapidly exploring interaction ideas while keeping iterations simple.
Prototype
However, you may find your self in need of a more high-fidelity prototype for usability or experience evaluation purposes. Tools like ProtoPie and UXPin make it possible to create advanced interactions and user journeys using variables and conditions to handle logic, data-input and much more.
From my own experience in the insurance industry, I created a prototype that ‘carried’ a price as an integer along the user flow, enabling number formatting, math calculations and other manipulation — elevating the prototypes from static screens with nice animations and transitions, to a meaningful experience by providing contextually correct information, seemingly making the prototype appear more realistic when interacting with it.
Test
Conducting user evaluations requires a lot of planning and practical activities, which nowadays can be handled by smart tools like Lookback. Allowing designers to conduct in-person, online or self-guided user evaluations, while taking care of documenting the test via the webcam, screen recording, clicks and sharing that info to stakeholders with ease. Sharing 4.2gb of monitor and webcam recordings to people can be troublesome. Lookback takes care of these issues, allowing designers and stakeholders to focus on the content and analysis of the test. Another mention is Maze, which does as great job at creating and facilitating user studies for Sketch or Invision screenbased-prototypes. They’ve recently added a lot of features, making it really useful.
Implementation
Handover is a crucial aspect of designing. Design systems can be a great way to handle many generalized aspects of a product. Reuseable modular UI components can speed up the development and make iteration in production faster, by building a tokenized library of visual design specifications, components, and page templates. Bridging the gap between engineering and design is hotter than ever, and tools like Alva, Modulz and Framer, are frontrunners in allowing designers to utilize production-based UI components in a sketch/Figma-looking environment, while also allowing some data-storing and logic-handling. This allows designers to create prototypes that essentially is the real thing — just without all the endpoints and backend hookups.
If you don’t need full components and just a general style guide, Specify is just for you! The tool makes it easy to import colors, typography, and assets, making it possible to create design tokens, exportable in any format by developers. What makes Specify event greater is the integration with Github repositories — meaning you can have a single source of truth in eg. a CSS or JSON file with design tokens, which are displayed in Specify and updateable via Sketch and to the actual code.
That’s it!
If you’re interested in hearing more about upcoming tools, Femke van Schoonhoven also made a video about the new design tools in 2020 you can check out.
