View on Vimeo.
This is a post detailing the first Raindrop iteration in the design process. It talks about what we did, problems that surfaced, what worked, and what didn’t.

↪ screenshot: first two column iteration (click images to enlarge)

When I first started working on Raindrop I was given a very raw two column layout to work and play with. It was overwhelming at first to try and organize and classify this huge quantity of information into a layout that would allow for legibility and ease of navigation. Although pulling from a very restrained colour palette I aimed to give each message the attention it deserved through highlighting, and a clear typographic hierarchy. Each message type is not only separated by visual space, but also by message classification. In order to save space and try and achieve a familiarity from the viewer, an iconographic classification system was created.  These icons are further reinforced through their implementation in the sidebar menu, which acts as a legend for mapping your messages. The inflow pictured above has two direct messages, followed by a group tweet, and then followed by another direct message (read: these systems of classifications are a work in progress). The area above these messages is the quick compose field allowing for quick and easy message composition.

↪ screenshot: keyboard navigation instructions overlay

The two column layout also worked well for simple and intuitive keyboard navigation. Using the arrow keys as opposed to the “J” and “K” keys for navigating to your next or previous message simply made sense in a one column layout. Using the right and left keys to swipe back and forth from the full conversation reader was also an obvious choice given the swiping page transition. (When the user navigates to a message and presses the right arrow key, the page swipes out to the left and the full conversation swipes in from the right. This is similar to the swiping navigation on iPhones.)

↪ screenshot: widgets at bottom of page

An important aspect of the Raindrop system is the use of grouping widgets, which categorize and create a hierarchy of importance within your messages. The two column layout did not work as well for this as the widgets were simply pushed to the very bottom of the page. This *does* create a hierarchy of importance, but it places them so far below the fold that they simply were not accessible.

Learning from this:
The emphasis for this design was on simplicity and creating familiarity between different messaging platforms. However as the project progressed I began questioning some of the fundamental design decisions I had previously made. For example, although the two column layout has been proven to work on a large number of interfaces prior to Raindrop, it was not allowing for the maximum amount of information to be shown at once (widgets being pushed to the bottom, lots of empty screen real estate, etc). Furthermore, I began wanting to create an aesthetic that was simply more functional and lighter feeling, rather than forcing everything into a monochromatic template. And lastly, I wanted to see how it would be possible to create a framework which better accommodated the widget/grouping system.

Summary:

Pros: Simple two column layout, easy keyboard navigation, icon system for message classification.

Cons: Ineffective use of screen-real estate, widgets get lost at bottom of page, read/unread status is confusing

-Andy Chung