7+2 tools that boost product design in different phases
A list of design-related tools for different phases.
First of all, I’m not that tool guy. I’m not so passionate about tools. I choose the tool I need for a specific task or project or problem.
On the other hand tools are vital to everyone who’s working on digital products. And using the wrong tool for a specific task is terrible. So here I’ll introduce some of the go-to apps I use regularly for my UX design work.
And before you ask, Yes, I also love paper, pen and whiteboard… this is about digital tools only though :-)
Which tool for which phase?
There are different phases, disciplines or tasks to be done in product design. Each has more or less specific tools. While most of them have a clear focus, some act more interdisciplinary. To me it’s essential to work as collaborative and seamless as possible. So I prefer tools that work in the cloud. Meanwhile I hate writing E-Mails or saving design versions on a local storage in order to share it via e-mail afterwards…
1. Research and Definition
That’s usually the phase of a project where I tend to work offline or use less specific apps. Nevertheless there is one tool I want to introduce here. That’s RealtimeBoard.
RealtimeBoard is rather new to me and I didn’t use it beyond some tests honestly. But it looks so promising that I will give it a try soon. It’s an online whiteboarding-tool. It promises that you can do everything with RealtimeBoard that you can do with a real whiteboard. Obviously this is especially valuable if you don’t have a real whiteboard or no space or a remote team. Think of an unlimited digital workspace that you can use for flow charts, story mapping, brainstorming, empathy mapping, business canvas, retrospective, mood board, … And you can work on it together in real-time with your team mates that sit in the next room or a hundred kilometers away.
2. Interaction & UI Design
At first there’s a smart app that is rather new to me but that is incredibly helpful in early definition or ideation phases: it’s Whimsical.io
Whimsical is great! Actually it’s just a small tool. But it brought a lot of speed in my workflow and it ist fun to use. Whimsical is a browser-based tool that lets you create flowcharts and wireframes (mindmaps and sticky notes will follow soon). Sounds unspectacular you might think. And that’s exactely it’s USP. It’s lightweight, simple and very easy to learn. You can create flowcharts and rough wireframes in minutes. And your output automatically looks professional. It has exactely the right feature range. Not less and not more. In addition it supports cloud-features like sharing with team members and working collaborative in a team workspace.
When it comes to polishing ideas and creating everything from wireframes to hi-fi UI designs, my tool of choice today is figma.
Figma is a cloud-based UI design tool that runs in the browser. Feature-wise it’s similar to Sketch. Actually I prefer figma instead of Sketch because it is all about collaboration. It’s amazingly easy to share, present and work collaboratively on ideas. I often work with people on different locations. So I found it extremely helpful to have design work in the cloud.
With figma you can do anything that needs a visual presentation somehow. For example, in my team we use figma for competitor analysis. We collect, comment and rate best practices and share it with the whole team on a figma canvas. So it comes that we use figma already at the beginning of projects.
What else: you can work on design systems with figmas sophisticated concept of shared components and color palettes. We use figma for dev-handover to make CSS and HTML specifications accessible to developers. So there’s no need for secondary tools like zeplin. There’s also a prototyping feature that I honestly didn’t use very often because it is very basic.
3. Prototyping
It seems that there pops up a new prototyping tool every day. And for me there is not the ONE AND ONLY prototyping tool. Instead I use whatever I need for the specific situation.
a) Basic Prototypes (quick, easy, WOW!)
InVision is my number one app for basic protos! For me the value of InVision is creating wow-looking prototypes for different devices in very short time. Although it has other features beside prototyping I don’t really use them. Within a few minutes you can create a prototype that shows pretty much how the experience with your piece of software could look and feel. I use InVision for discussions with team members, stakeholders and for user testings. The downside is that the interactions, animations and transitions you can use are rather basic.
b) Totally realistic prototypes for the web (“When can you bring that live?”)
Axure RP is the grandmother of prototyping tools. I first used it back in 2007. There was a time when you did not come across Axure if you wanted to build a digital prototype. With Axure you can build nearly everything that runs in a browser. You can play with variables, dynamic content, user input etc. to bring your prototype to live. I use it for testing complex scenarios in a thinking-aloud-test with users for example. The price for this flexibility is that Axure is complex, it has a steep learning curve and a relatively long development time. So if you plan to create a hi-fi prototype in Axure, consider working in Axure right from the beginning. Otherwise you need to re-build all your previously created screens for the prototype.
c) Realistic Interactions or sequences
ProtoPie is the tool I use for building hi-fi interactions. While InVision is good for showing whole user flows. ProtoPie is meant for focusing on single detailed interactions or short sequences. It’s built on the concept of object, trigger and response. So an interaction (i.e. drag) on an UI-Element (i.e. button) leads to a response (i.e. animation) or a chain reaction of responses. And you absolutely need no coding skills. You can watch your results directly on your device or inside a preview window.
4. Development handover
Of course it’s desirable that developers are an active part of the product design team as early as possible and there’s no need for a formal handover. But sometimes this is simply not possible.
So what’s the right artefacts and the right tools that developers need to start working? Basically it’s a mix of all the above mentioned. Actually the tool we use for specifications is figma as mentioned above. But there’s one app we formerly used for providing development guidelines to developers:
Frontify calls itself a brand management tool. It provides a portal where you can share your brandcode and your brand assets in the cloud. It also has a feature for creating a UI Pattern Library that is built on HTML and CSS and allows the simulation of responsive behavior for adjustable breakpoints. In the past we also used frontify for design management and documentation. UI designs were uploaded to frontify and shared with the project team and stakeholders in order to gather feedback and approval. Once approved, guidelines for development (i.e. spacings, sizes, colors) were prepared. However this process seems cumbersome since we decided working with figma.
So what about the +2?
There are two apps that will be released soon that I’m really looking forward to. It’s Phase and Framer X. Both promise to tear down the border between design, prototyping and exporting code. With the background of framer, which actually is a powerful prototyping tool, framer X has the opportunity to become the interaction design super weapon. On the other hand Phase promises a revolution in digital design that offers realtime collaboration and real data.
What do you use?
That was my list. What do you use? Any recommendations? Let me know your thoughts!
Thanx for reading!! ❤️