At Roundarch we often work behind the firewall – which for people not familiar with our terminology, means we work on projects we’re not allowed to discuss, much less show publicly. As designers, not having a public audience/forum for our work can be both liberating and frustrating. So when Sam Lessin and Chad Stoller from drop.io contacted us to assist them in redesigning their simple yet powerful service, our ears perked up. Not only would we have an opportunity to creatively contribute to a product we all believed in, but we could do so publicly without risking the ire of valued but secret clients.

I can’t stress enough how useful their tool really is. I use it all the time. I have used it for an internal Roundarch presentation on Cloud Computing as well as for other personal things like picture drops and quick file transfers (when my IM craps-out). The ways in which to use their service seem to grow with each user’s imagination.

Roundarch and drop.io
Roundarch was brought on board to work with drop.io for a few reasons.  As a company, we are focused exclusively on designing and building leading edge digital experiences.  We are known in the industry for tackling the toughest design challenges and for bringing both breakthrough design and enterprise scale technology.  We are also known for being a leader in the development of Rich Internet Applications.  This is really a long way of saying we understand design, user experience and technology and we know how to bring them all together seamlessly.  We also understood that drop.io has a long-term road map for the services it provides.  The old design was quite a bit confusing and not able to keep up with new technologies and service improvements.  They needed a design that would complement and grow with future services.  We understood this challenge and were able to collaborate on a design solution.

The Challange
Drop.io is “Simple, Private Sharing”, but that doesn’t mean it’s an easy service to understand. Simplicity can sometimes be confusing. Retaining simplicity while providing a design that was easy to use and understand from day-1 was our primary focus. The real design challenge is that if a user is new to drop.io, and they’re given a URL to go to from someone, say, at a party who has just taken some photos among friends, when that user arrives at that URL they’re deposited right in the middle of a “drop”. No context. No on-boarding. The user just wakes up in a room and needs to figure out what it all means. So the nature of their service is simple: online storage space where files of any type can be dropped, viewed and shared, but partnering with Roundarch was critical to presenting their service to the novice user in an easy, understandable way.

At the core of the drop.io service is inputs, views and outputs – but their old UI and design strategy didn’t reflect this. Switching views was confusing, output controls and parameters were located in a few different places and their choice of using the color red (to be ironic) was amusing to only a few. Our task was to collectively figure out a UI template that met a few key criteria: input, view and output needed to be clearly defined and the design had to be extensible for co-branding and personalization. We also wanted to target Drop.io For Business (DFB) with a template design and information-page that showed the flexibility of their service for businesses.

The Process
We began by taking their existing logo and “growing it up” a bit. We chose a beautiful and clean typeface (Archer) and chose a simple typeset execution.

Our next task was to nail the header. This was critical because the header is really where the concept of the service is expressed in the navigation of the site. Input, view, output became Add, View & Share. By keeping that functionality hidden but handy we eliminated the need for users to hunt around the site to trigger functionality. The trick was that when the user is browsing their drop, we wanted to keep the maximum possible vertical space for their content. It’s only when the user wants to do something with the drop that we wanted to surface UI controls (while retaining the statefulness of the page).

From there we chose to execute the body elements, the actual content of the drop, in a clean and simple way that clearly separated drop-content from any customization the user might choose to perform and future-proofed the content-display area from any other view paradigms drop.io might choose to implement moving forward. At the forefront of our minds was scanability. We needed the user to quickly scan the page and understand where their drop content was located. Through the use of iconography and a change in type size we were able to accomplish this while adding to the aesthetics of the experience. Lastly, we addressed the home page. Like most of the rest of the strategic planning for this site, the home page had a trick to it we needed to get just right. Unlike most homepages, the drop.io home page was most likely not the first page a user new to the experience would see. This is because users most likely would encounter drop.io in the context of viewing someone else’s drop. And in that scenario, the user would be deposited in the middle of a drop as explained above. So their drop page is really their homepage and their homepage is really their drop-provisioning page. It was in this light that we wanted to streamline the process of beginning to use their service as much as possible. 4 steps vs. 3 steps is a big deal in the web 2.0 world of zero patience. We solved this by defaulting certain settings in a collapsed menu and brought the number of steps a user had to do in order to create a drop down to two. Name it and put files in it. Done.

The Results
Needless to say the project was a success and all sides were thrilled with the results. I encourage you to check out drop.io for yourself.  As I mentioned earlier, this is really an outstanding service that will continue to push the limits of what can be done with file sharing and beyond (geotagging, freedom to upload from many sources, collaborative sharing options, etc.).  Sam Lessin sums it up thusly, “Roundarch did a very nice job learning about our product and our future feature roadmap and then helping us conceptualize some of the design vocabulary necessary to meet our immediate users needs, while still leaving us open to future growth and extensibility.” Agreed.