Prototyping on Square Cash

In product design, stopping at a flat set of screens is like a musician stopping at the notes. Between every screen is ±20 frames of undesigned spatial motion, between every scroll is seconds of unconsidered interaction, and between every feature, significant implications for business and growth.

On Square Cash, our small product design team uses a variety of tools to ideate, iterate, and execute as close to the final product as possible. The result is the ability to rapidly assess features, ideas, and experiences through a user’s eyes while ensuring that business and growth priorities are in order.

The following is a small list of some of the tools we use to grow the service you know and love.

After Effects

After Effects is a great way to play with motion, particularly transitions.

In Cash 2.10 we introduced the Cash Drawer feature which adds the ability to store money in the app. Flat screens didn’t cut it here: most of the states and information were transitory, so how information entered and left the screen was much more complicated than the actual elements. We started with some rough Sketch files but ended up doing a lot of the actual design work in After Effects.

We also wanted to make sure the Cash Drawer’s pill was lively and fun. Most of that work was in the spatial model and springs; things that couldn’t be represented by a flat image– again we iterated largely in After Effects and finalized our springs in code. The closer you can get the animation to the final result, the better you can understand the experience you’re delivering to your users.

Framer Studio

Framer Studio is a (fairly) lightweight way to prototype interactions and bring more experimental projects to life without a large time investment. It’s also handy for previewing screens on-device.

When we were investigating more conceptual Cashtag profiles last year, Framer helped us quickly bring together a large number of prototypes with various spatial designs that we could feel out on a desktop. Ultimately, these conceptual prototypes helped inform a lot of the direction on both the current state of Cashtags and the future of Cashtags and profiles.

We also use Framer as a quick way of previewing certain screens on-device. 2.10 introduced a new style of longer receipts that went through a large number of different iterations. Seeing how those receipts moved on an actual screen was an important part of the decision making process, so we built a container prototype to hold various styles which we could then select on-device and compare.

Xcode, Chrome, Etc.

Nothing is closer to the metal than diving right into the code and feeling a design out locally or in a build. Things like tweaking existing springs, trying new animations, and fiddling with styles are sometimes just way simpler to do in Xcode or Chrome.

While we built our general Cash Drawer framework in After Effects, our final easings, springs, and motion tweaks were done in-code and previewed locally. This meant there was no guesswork between what we intended and what would be delivered. Similarly, tweaking styles in Chrome is the fastest way to experiment with existing styles and transitions on the web. When we get it right, we file a pull request– leaving no ambiguity between development and design.

Ultimately, prototyping isn’t a magic bullet or a single application. It’s a tool for crafting closer to a user’s exact experience, faster.