Published on | Prototyping: From UX to Front End — Medium Meisi Huang

The design work of Square has always been the first class. Square Cash, launched by Square on October 1, 2013, is a handy tool to quickly send and request money. Though having been in the market for a while, the app owns many marvelous details and genius design decisions worth learning from.

1. Getting Started

Signing in/up by inputting a verification code sent via SMS or email has become a popular alternative to the account + password approach. This new method reduces people’s memory load and also verifies people’s mobile number/email at the same time. It’s particularly useful when switching between multiple accounts, which can be common for Cash business users. One concern of this method is privacy issues. However, as providing mobile numbers helps ensure a safe environment, it feels proper in Cash’s case. Another concern is whether the verification code can always be sent without delay.

Notice the playful bounces when the “Welcome” page and the “Help” action menu slide up. It builds vitality into the experience and becomes a consistent pattern across the app.

2. First View

I love the subtle use of motion here to grab a person’s eyes and guide people towards the cash balance. Besides, we may notice Cash’s landing pages are almost identical as its first view, which sets user expectations from the very beginning and avoids unnecessary transitions — a genius design decision.

Compared with Venmo’s approach below, we can tell Cash emphasises efficiency and simplicity by placing the keyboard up front. Though it seems more logical to choose a recipient first for paying or requesting, having the keyboard ready saves 1000 tappings and is worth the tradeoff.

3. Keyboard

“Keyboard” is usually an overlooked corner of the apps we use — lack of visual polish and novelty, always using the system defaults. I respect that Cash treats keyboard like a core piece of the experience, and makes “typing” so joyful and engaging. Below are several impressive details.

When entering a value lower than $1, “o” will shake its head. Smart hint! (Similar things happen if you enter a value that is too large.)
Each tapped number is amplified on the keyboard. When numbers are tapped continuously, it feels like watching a dance show.
Each new number slides down into view.
The total number decreases its font size as the value increases.
Context-aware “commas” to show thousands, and 10 thousands.
The number after the decimal point is auto displayed on the upper corner with a smaller font size.
Each number slides up out of view.

4. Request/Send

You won’t be forced to enter a note as Venmo requests, the whole experience of requesting/sending money feels as fast as lighting. Pay attention to how the preloader rises, bounces and perfectly turns into part of the check mark icon. Moreover, the way how the check mark appears indicates it’s a dynamic process. The transition from the “Check mark” icon to the “History” icon simply BLEW ME AWAY. What is “Done” now becomes the “Past”. If interesting things also convey real meanings, that’s what brilliance is.

5. Add Multiple Recipient

Cash makes it super convenient to add multiple recipients. The “x2”, “x3”… reminders on the top menu bar are so innovative, lovely and helpful. Love it!

6. Search

The principle of inertia is consistently applied in Cash — the bounces of the keyboard, texts and icons, all of which demonstrate the adorable personality of the app. It’s remarkable how the magnifier icon rotates into the cancel icon (X), and then transforms to the delete icon (white X above a grey circle) based on different contexts. Everything makes sense and feels so slick with a minimal UI. Beautifully executed!

7. Menu Bar

When you scroll, some content on the green menu bar scales nicely back/fades away into the distance. Great treatment!

8. Cash Balance

This is one of my favorite pieces of the Cash app. After I add more values on my cash card and go back to the home page, the cash balance changes dynamically, which creates a dynamic and continuous narrative relationship between the action of adding values and the cash balance.

8 Great Details of the Square Cash App was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

8 Great Details of the Square Cash App

Cool stuff, every week

More Articles