Building Crusoe: Custom UI for Rich Data

Built Light developed a novel UI for Crusoe, an iPad app that encourages users to make and explore meaningful links between their Evernote notes.

A linked note in Crusoe contains a lot of data. We developed an information bar at the top of each note that gives the user all relevant information about their notes’ links in an efficient way. At the top of each Crusoe note is a link intensity bar. This is a quick, visual way of understanding how linked a given note is compared to other notes. A link counter shows the total number of notes linked to the given note while color-code counters show the number of these linked notes the user has color-coded in a given way.

The information bar helps the user prioritize their navigation through the dense web of connections they’ve made.

With so much content presented in the UI, we sought additional opportunities to provide the user with features and options that give them the right balance of control and feedback.

We implemented a content priority setting which allows users to view their notes with either the image or the text given priority in the thumbnail view. This gives a user more of the information they find meaningful while they make and explore links between notes.

One of Crusoe's key features is Link View, which allows users to view existing links in a way that is intuitive and simple. We developed a note counter that helps orient users amongst a possibly extensive range of links and linked notes. It shows where they are in their "pile" of notes quantitatively and visually.

Central to Crusoe is the creation of links and the ability to annotate those links in meaningful ways. This is done primarily in Link Mode, so we concentrated on making this screen as intuitive and easy to use as possible. When a note is selected for linking the linking UI appears over the note allowing the user to modify it’s color-coding or create an annotation as well as visually confirming that this note is being selected for linking.

Crusoe allows a secondary way of creating and modifying linked notes in Link View. Shown below.

When a user wants to focus on exploring the connections they’ve made between notes and the annotations made about those connections, they use Crusoe a different way: they enter Link View. Link View creates a beautiful and intuitive way to explore the thread of ones thinking as it relates to linked notes. To make this process as engaging and clear as possible, we built a completely custom interface that takes advantage of Apple's powerful graphics and animation frameworks.

In Link View, a user can quickly scan which notes have existing annotations and explore those connections by tapping the filled annotation button in the UI.