Avocado is an interaction design toolbox. It enables designers to quickly create interactive prototypes—without the need to know coding.

Interaction designers with a technical background often bring ideas to life through coding. But for those who don't code, there are few tools on the market that provide an accessible and streamlined approach to coding. Avocado makes interaction design accessible to a broader set of people. It supports fast-paced live prototyping, allowing for a more efficient design process and ultimately deeper insights sooner in the creative process. The design team firmly believes that any successful new digital tool should broaden the current technical landscape of what can be created while remaining accessible to the widest possible audience.

The launch of Avocado was a fun and surprising experience. Downloads reached the tens of thousands in just a few hours. Within a day the team received several contributions through GitHub, but most importantly, designers from all over the world started using Avocado to successfully build software prototypes.

The Brief

Bounce, swivel, spin. Today's interface design is all about making things move. But the tools we use to create those interactions haven't kept pace with our smart devices. So the team set out on a path to explore a new set of digital prototyping tools—ones that work for designers who don't code or have a software-engineering background.

There are currently few tools on the market that don't require deep technical knowledge, such as Quartz Composer (a nearly decade-old visual programming language built by Apple) and Origami (a new tool built by Facebook that streamlines Quartz Composer). Taken together, Quartz Composer and Origami offer a set of basic interface building blocks called patches. It's an inspired start, and our team saw ways to build upon these tools by concealing complexity and creating a user-friendly and accessible toolbox for interaction design.

Avocado builds on the same philosophy as Quartz Composer and Origami but provides more complete and ready-to-use interaction patterns, animations, and utilities to more easily piece together the approximation of a digital experience. The Avocado platform extends the capabilities of Quartz Composer by providing a set of components that can significantly speed up the development of a prototype, and it also builds on Origami's existing feature set.

End Result

Our team started the Avocado project by creating a set of basic reusable interaction components - called "patches" - that address common patterns that can be arduous to build from scratch. The end result is multiple patches on the Avocado platform, among them a Carousel patch, a Keyboard patch, a Drawer patch and a Master-Detail patch. These components offer designers an additional layer of abstraction when prototyping that allows them to go beyond the specific mechanics of how an interaction might be implemented to instead focus on what the best user interface solution might be for a given interaction design problem.

We named our toolbox Avocado because the platform adds a rich, buttery layer of ready-to-use patches on top of Quartz Composer, which is a tough nut to crack for non-coders. Avocado was developed by an Interaction Design team to allow for efficient iteration of design ideas by prototypers - with our without knowledge of coding or software engineering.

Product Highlights

1. Post-its and Sharpies will always be useful prototyping tools for designers, but Avocado brings sketches to life and takes ideas from analogue to digital much faster.

2. Interaction designers have a common shorthand that makes it easy to collaborate and design quickly, but not everyone is fluent in that language. Avocado acts as a visual lingua franca for multi-disciplinary teams, making it easy to share interaction design ideas, bringing tangibility to concepts that are notoriously difficult to translate.

3. Avocado makes it easy to iterate during the qualitative user-research phase. For example, if a design team is in the middle of an interview, gathering thoughts and feedback from someone on a screen-based prototype, we can quickly respond to feedback and change variables in the moment. It's an amazing tool for instant iteration, allowing us to host more dynamic conversations.

4. Best of all, Avocado arms interaction designers (who lack coding skills beyond a basic understanding of Quartz Composer) with the tools they need to start building compelling user experiences.

In the words of the great interaction designer Bill Moggridge: "The only way to experience an experience is to experience it." Avocado gets us one step closer.