Prototyping Prototypes

In this multi-part series, I’ll be delivering a play-by-play of how our design team at Filament approaches interaction design, why we’re diving head-first into high-fidelity prototyping, and the tools we’re evaluating to help us get there.

“So, when you click on the card, it expands upwards, grows slightly and boom, the map loads where the image is now”

Amidst a flurry of sketches, I’ve heard sentences like these uttered a hundred times. I’ve even been the person saying them, thinking that a few strokes on a whiteboard, or a few minutes of explanation in front of Sketch would somehow give our dev team a wizard-like vision into how my brain sees the inner-workings of an interaction.

For the most part, our talented developers get it, and for a long time, this approach worked well. We had a small team, and it was easier for us to hash things out, but over the past few years we’ve grown up, and so has the web. With the gap between websites, web apps and native closing, the success of our projects depends on the design team’s ability to quickly deliver functional ideas, with little development overhead. You’re all thinking it, and you’re right — prototypes.

The (Whole) Design System

At Filament, our design process has always stood firmly on the tenet that user research informs content and style, and that we design systems, not screens. Motion, animation and interaction have always been a part of what we do, but the onus has been on the dev team to understand the design team’s vision through sketches, storyboards, or long-winded explanations, then code, refine and tweak the animations accordingly.

Rather than front-loading the effort, the time it took developers to go through rounds of design QA perfecting transitions was bottle-necking the project. In many cases, because of resource and time constraints, we’d kill animations entirely in favour of something more straight-forward. Ultimately, our ability to experiment and expand our capabilities was being cut down because we didn’t see complex motion as part of the design system. We saw it as a nice-to-have once the core design and development was done, and because of that, there was rarely enough time to bring the cool things in our heads to life. So we’re making a change.

The Tools

Over the next 4–6 weeks, every member of our design team will be giving the gears to Atomic, Framer and Proto. Through a series of pre-defined tasks (so we can compare apples to apples), we’ll try and make our way through the programs and create a prototype. Ultimately, we settled on these ones because they give us the flexibility to prototype for any size screen, not just mobile devices.

We’ll be scoring them based on the following criteria:

• Getting started (how easy is it to fire up and start working)
• Importing and creating assets (does it import Sketch files? Can I draw in the program)
• Sharing and exporting (can I export real code? Is it good quality?)
• Core animation capabilities (swipe, scroll, etc)
• Overall ease of use

I’m really looking forward to seeing how this pans out, so let the Prototyping Showdown begin!