Prototyping Tools and Process

An in-depth look into the tools and process design teams use.

We hosted our latest Greylock Design Community event at Medium where leading designers across the Valley came to learn from each other and have a discussion about the various design tools and processes teams use.

The design industry is undergoing a huge transformation — we are seeing more prototyping tools than ever before. This increase in the number and breadth of various prototyping tools is fueled by three factors: 1) the rise in mobile apps; 2) the rise of the importance of design; and 3) users expectations for well designed and intuitive applications.

With the help of our design founding members — Lia Napolitano and Brooks Haasig — we issued a survey to quantify the prototyping process of design teams behind some of today’s most well designed products including Medium, Airbnb, Uber, Apple, Eventbrite, Pinterest and more.

Here are a few key highlights from what we learned.

Asset Creation:

• Sketch has the highest adoption rate across design teams
• 50% of designers are using more than one tool, while 34% of designers are only using Sketch.
• 72% of designers are designing for both the web and mobile

Prototype Creation:

• 75% of designers are using more than one prototype creation tool — Framer.js/InVision being the most popular combination
• Framer.js is the go-to tool for mocking up high fidelity animations and InVision is used for low fidelity prototypes
• There has been an huge increase in the number of other prototyping tools, including Pixate and Avocado, but many designers still use tools such as Keynote to mock up low fidelity prototypes

Prototype/Design Asset Storage

• Dropbox is the clear winner — 77% of design teams are using Dropbox to store their design assets
• Google Drive still has a foothold as well mainly because their teams also use Google Apps to host and store all of their content.

Sharing and Feedback with Prototypes

• There are no set tools for this space. Many teams share links via the tools they create the prototype with, such as InVision/Framer.js, conduct in-person interviews, take notes on Evernote, share feedback by email or Slack
• There are two new tools called Wake and Red Pen to look into for better collaboration and feedback.

Biggest frustrations with prototyping process

• Tools, such are Framer.js, are great at mocking up interactions, but they have a steep learning curves.
• Designers want the ability to easily communicate a prototype (flow + animations) without needing a lot of coding.
• It’s difficult to move from prototype to implementation and create specs for engineers (check out Avocode)

Biggest lessons learned from the event

• Take the time to get to know your tools. There are so many of them — each created to help with specific design tasks so having a good understanding of the pros/cons of each one can make your job easier.
• There are a lot of different ways to prototype but, more importantly, you need to know who are you are building for — is it yourself, team, boss, user or investors? Different prototypes can be used based on your audience.
• At times, it’s best to prototype in the medium that your product is intended for. For example, if you have an iPad app with a lot of user interaction, it’s better to convey your idea by showing the actual app animations and interactions.

If you are currently working on a design team, hopefully these findings will help give you a perspective on design tools from other design teams.

Here are our complete findings:

A big thank you to Lia Napolitano, Brooks Hassig, Mel Sezto, and all the Greylock Design Community for sharing their insights and helping us with the survey.