“We were craftsmen and our tools were code. Design was not something we thought we should do, we just did it” — Tristan O’Tierney, Co-Founder of Square
Square is a mobile payments company best known for the iconic Square Card Reader, a beautiful white mobile credit card swiper that attaches to the microphone jack of smartphones and tablets to enable merchants around the world to easily and cheaply accept card payments. Taking payments via cards was previously a huge pain point due to high transaction fees and the need for specialized, clunky equipment. On the other hand, the Square reader has been widely praised for simplicity, aesthetics, and ease of use since launching in March of 2013.
The successful design of Square Reader’s hardware and software products is no accident. From the beginning, great design was at the core of the company’s culture. The company’s founding team consisted of Jack Dorsey, Jim McKelvey, and Tristan O’Tierney, all of whom had multidisciplinary training and deeply valued aesthetics & craftsmanship.
Jack, most famous for being the founder of Twitter, has been called “the next Steve Jobs” by the media due to his simple design aesthetic and product vision while Square’s products are often favorably compared to Apple’s. Prior to focusing on computer science, he had studied fashion design and considered becoming a jeans artisan. Jim was an engineer and scientist as well as a successful glassblowing artist. Tristan was a mobile expert who previously built software for Apple and embodied their design ethos.
“We were craftsmen and our tools were code,” says Tristan, reflecting on the values of the early team. “Design was not something we thought we should do, we just did it.” Right from the beginning, the team was obsessed with streamlining the user experience of taking payments, a process that is usually uninspiring and error-prone. Getting details right was so important to the team that Tristan custom developed the UI for Square’s first iOS app instead of using Apple’s standard UI library. Doing so enabled Square to create a unique navigation experience and a distinct visual design.
Getting in sync on design philosophy is much easier when you’re a team of three than when you’re a company of five hundred. In particular, the concentration of design awareness and collaboration in a company shrinks as roles become increasingly more specialized and hierarchical management layers segregate executives from doers. “If you’re a company of any substantial size and you try to retroactively ‘fix’ your design, you’ve already failed.
Design must be already be part of the core team and ethos,” cautions Tristan. To preserve design integrity and product quality at Apple, Steve Jobs famously micromanaged products down to excruciating detail, gave comprehensive feedback, and gated shoddy products from being released. In a similar manner at Square, Jack would stay connected with designers and regularly review their work.
Another common rift occurs between design and engineering as static Photoshop mocks often don’t capture nuanced interaction design and transitions, especially on mobile. When designers don’t specify these execution details, engineers are left to extrapolate their own solutions which are often suboptimal. In recent years, a plethora of prototyping tools have emerged that enable designers to more easily and precisely spec out interactive elements in digital product design, but at the time of Square’s launch the toolsets were much more limited.
To address the latter issue, Square focused on hiring engineers who demonstrated an understanding of user psychology and an instinct for interaction design. The added bonus of this hiring philosophy was that design responsibility rested not just on designers but was instead spread across the product team.
When building out the early engineering team at Square, Tristan rarely employed traditional technical interview questions. After all, if an engineer had a solid computer science degree and work experience at top tier firms like Apple or Google, his programming skills were likely solid. What Tristan wanted to know instead was how well engineers understood the human side of building software — the part not taught in schools.
“Design is a way of thinking, not just buckets of skillsets,” he explains. “The best designers are the ones who can look at everything and be fascinated.” To gauge curiosity and design sensibility, Tristan would ask engineers unexpected questions such as:
- Why is the phone number (415)543–2687 harder to remember than (415)333–5555? Why is this relevant to software design?
- Why is the menu bar on Mac OSX more efficient than the menu bar in Windows?
Memorizing the first phone number requires remembering the area code followed by seven individual digits, whereas the repetition in the second number helps people break the sequence down into just three distinct parts: the area code, three 3’s, and four 5’s. This process of breaking long sequences of information into smaller, more memorable groups is referred to in psychology as “chunking”. Most people can only hold three to seven items simultaneously in their heads so reducing the number of chunks they have to memorize improves retention.
In software, this principle comes into play any time a user must remember previously seen information, such as when learning to use a new feature, navigating menus, adjusting settings, reviewing content, etc. If a user was forced to navigate through a twenty item menu, they would have forgotten the earlier options long before they get to the last option. Instead, better designs would lighten the cognitive load by offering a smaller initial set of options and allowing users to disclose and drill down into nested options only if needed.
The second question often tripped up engineers even if they were very familiar with both operating systems. On Windows, the menu bar with options such as “File, Edit, View, Help” sticks to the top of individual movable windows and therefore has an unstable size and location on screen. This means that when a user wants to access one of the menu bar dropdowns, he or she would need to first visually locate where the buttons are and then navigate their mouse precisely onto the bar to be able to click on them.
On Mac OS, the menu bar for the active program is always at the same place at the very top of the screen. The benefits are two fold: first, the location is stable the user expends no additional cognitive load figure out where the menu bar is for each window; second, the mouse cannot go beyond the top of the screen, so instead of needing to be precise with mouse navigation, a user can simply throw the mouse up to the top of the screen to get to the menu bar.
By hiring engineers who understood interaction design, Square’s product teams communicated more efficiently and shared responsibility for craftsmanship. Instead of having to make Photoshop mocks as well as spec out every nitty gritty detail of flows and animations, designers could focus on perfecting visual design and collaborating with engineers on interactive elements.
Likewise, Tristan also believes “the best designers have a little bit of programming experience so that they have some idea of how to turn visual or interactive elements into functional software”. Cross-disciplinary product teams enabled Square to maintain design quality and software craftsmanship in their Reader app as well as later products like Register and Wallet.