Case Study: ReelSurfer

Folyo case studies examine the design process behind collaborations between startups and Folyo designers, and are a great way to learn from real-world examples.

Folyo helps startups find great freelance designers, and one such startup is ReelSurfer.

Out of the YCombinator startup incubator, ReelSurfer recently launched after working on their design with Jonathan Patterson. I asked both Jonathan and Neil Joglekar from ReelSurfer a couple questions to find out more about the design process.

Introduction

First of all, can you introduce Reelsurfer?

ReelSurfer lets anyone clip and share any video from any website. As opposed to sharing a long video, ReelSurfer lets you cut and send the seconds you actually care about. To clip a video visit http://www.reelsurfer.com and enter the video url or use our bookmarklet.

From there you can combine and organize clips into reels (collections of clips) and share with friends. Afterwards, sit back, relax, and watch the best short clips from the web created by our community.

Visual Design: Coming up with a Theme

What you immediately notice about ReelSurfer’s design is its very strong movie theme. While this makes a ton of sense for a movie-related service, in my experience maintaining a global theme over a whole site can sometimes also be tricky.

The site obviously has a strong movie theme. Did having such a strong theme help come up with visual ideas? Or were there occasions where you felt constrained by having to stick to this domain?

The cinema or video theme was a natural choice given the name and type of service/tools ReelSurfer provides. I’ve found that sometimes the best solution is the most obvious one. It can be easy to over think, and subsequently overcomplicate, a design solution.

Once the overall theme is conceived the more difficult part of working within that context is to weave in the rest of the website and application. For example, the clip interface itself is presented on a cutting matte background that has cut marks on top of it. These are synonymous with cutting something, a video in this case, and adds a nice visual to this area of the application. Another example would be the login modal, where I used a film slate.

The ReelSurfer clipping interface

Typography plays a big role in web design. Can you introduce the fonts you selected, and explain why you picked them?

Fonts go a long way in helping establish the look and feel of a brand. The corproate font for ReelSurfer is called Asap. It strikes a good balance of readability and playfulness. It goes without saying that in any modern web or application design it’s important to use fonts that are suitable to use with a font replacement technique or service such as Google Fonts or Typekit.

One of my primary factors for choosing a font, aside from what it looks like, is how many weights it comes in. It’s never good to only have one option… “regular”, for example. When you have a lot of content to style you’ll need thin, regular, bold, extra bold etc. The more options the better! Using CSS to style fonts bolder or in italic doesn’t look the same as a font that has been specifically designed with those looks. That’s a detail many people overlook but one that I feel is pretty important in a high-end website or application design.

The style guide showcases various fonts and elements

There’s a lot of talks about “mobile first” design these days. Is that something you thought about? Is the fact that the site uses a bookmarklet a problem for mobile versions?

Both ReelSurfer and I are taking a very pragmatic approach to the project. We’re certainly mindful of the variety of ways that users will access the site, however, our first focus was to create the basic functionality and look then continue to iterate and enhance the site and application as time goes on.

A movie-themed log-in dialog

What are your thoughts on the “Minimum Valuable Product” philosophy? Do you think good design and a strong identity should be part of your product’s first version, or is it something you can add at later stages?

We definitely subscribe to the minimum valuable product theory. As Paul Graham puts it, a startup should launch when they have a “quantum of utility.” That’s why we launched our private beta about a month ago – mostly to learn about our core user scenarios. Clipping for non-video editors is relatively new so we wanted to be able to iterate on the UX first.

For the larger launch, however, we thought a bit differently. We feel the bar is getting higher and higher for design. Services like Instagram and Pinterest really took their time to get the design right and that made the user experience that much richer. Design and product development are both iterative processes so I don’t think we will ever really stop doing either. We have worked hard to create a strong identity and hopefully are off to a good start.

Thoughts

Despite being around for quite some time now, design has recently become something of a trendy buzzword in the startup community.

But a lot of startup make the mistake of only focusing on the “how it works” part of design. I won’t dispute that this is the most important part, but the visual aspect of your product (a.k.a “how it looks”) also plays a huge role in how people will apprehend it.

So I thought featuring ReelSurfer here was interesting, because they’re a rare case of a startup focusing on both great product design and visual design, while also adhering to the minimum valuable product philosophy.