The Design of Farrago 2

Earlier this spring, we shipped the second major version of Farrago. For this update, we really worked to improve every single facet of the product. The app remains extremely recognizable when compared with the first version, but from looks to features to ease of use, it’s better in every way.

As we have often done for major upgrades, I’d like go over many parts of our process, and discuss how we went about making all of these improvements and refinements.
Tiles
Let’s start with the most fundamental interface element Farrago has: sound tiles. They’re the foundational element of the app, with each tile representing one sound that’s available for playback. The functionality of tiles is largely unchanged in version 2, but visually, they’re greatly improved.

The update brings much better resizing to allow larger tiles when needed, as well as crisper colours and some small layout tweaks. The most obvious difference, however, is the new presence of emoji on the tile face.
From early on, we planned to include some sort of images on tiles. As a general rule of thumb, a combination of text and visual icon is easier for a user to identify quickly than just text or an icon alone. However, we weren’t sure how best to accomplish this. My earliest designs allowed any image file at all to be added to a tile, but we found that even with well-chosen images, the interface quickly got cluttered and hard to read.

Eventually, I came to another idea: emoji! Apple’s emoji are very well drawn, and even better, there’s a uniformity that makes all the emoji work well with each other. This made them a great choice to provide on-tile artwork. Farrago now allows for up to five icons to be added to each tile, so you can make combinations like