STRAP

Technical
Research

Since 2002  ·  Made in
N. Holland, Netherlands

Quordinate, an iOS-specific contacts management startup founded by Hung Tran (the former CTO of Machinima), asked me to both design their app (from concept, to wireframes, to full-fidelity mockups) and create branding for their marketing and landing pages.

Quordinate attempted to solve the non-connected and opaque nature of the iOS address book. We attempted to re-envision what an ideal address book would look like, with features like social media integration, easier contact sharing, calendar integration, etc. We spent a lot of time thinking about how users actually use their address books, and discovered that remembering and understanding the person behind the name in your contact book was a big problem, especially for frequent conference-goers or executives; generally, the more people you meet, the less able you are to make connections between a name and a person.

We chose shades of orange as the corporate color. The app bridged the gap between iOS 6's skeumorphism and iOS 7's totally flat aesthetic — Quordinate's mobile app incorporated subtle gradients, bright colors, and flat buttons but also added shadows to give depth to the interface.

We started with basic wireframes, sketched on paper and then wireframed in Balsamiq and Mockingbird, before we moved onto higher-fidelity mockups. Those were built in Sketch, a vector drawing app — an exported PNG of the mockups is shown below.

The app icon was also something I had the opportunity to refine — the original design was a leftover from Quordinate's previous designer.

The original idea for Quordinate was to build a system that allowed easy scheduling — we were pitching it as a "real–life game lobby."

One of the many (older) full-fidelity UI mockup boards created during the process. This one shows both contact and event creation flows.

After some deep soul-searching, re-designing, and pivoting, we ended up with a fully-featured contacts management app. We felt that this solved a more important pain point.

I was enamored with flat design at the time; these newer mockups reflect that. Still, this is a hybrid flat/skeumorphic design — shadows and depth are there to help the user understand that the top menubar would stay static and everything else would slide underneath.

There were small, interactive touches throughout the interface that are normal for iOS apps today — at the time, we thought the + that turned into an × (switching context from open to close depending on if the button's dropdown was open or not) was a cool touch.