Social networks, as they’ve evolved from Friendster and MySpace to Facebook and Twitter, have come to adopt the same models: tab- and feed-based layouts with friends, followers, likes, and +1's. But such traditional wisdom wasn’t satisfactory to Josh Miller, the cofounder of buzzed-about startup Branch. "We originally thought, 'Well, we need to design our equivalent of the Facebook news feed or the Twitter stream," Miller says. "Then we realized, 'Wait, that’s the wrong way to do it.'"
Branch is a public conversation platform for invite-only debates on specific topics. Only users involved with the conversation can invite others to join, a mechanism which filters out the excess dialogue seen on services like Twitter in favor of a higher level of discourse. (Only recently, for example, users could watch MG Siegler and Anil Dash discuss the pros and cons of Apple’s Maps fiasco.) In August, Branch came out of public beta, and has since gained much press attention for its novel approach to social. But Branch’s approach to design--with its rigid focus on dead-simple and borderline plain user interfaces--is arguably one of the service’s strongest differentiators. Today, Branch unveiled a new stripped-down design which, like its aim to clean up online conversation, cuts out even more UI clutter common of other social networks.
The main feature of Branch’s new design is what the team is calling "the Drawer," a tiny button on the left-hand side that users can click to slide out a column of all their additional Branches. Whereas before, users had to navigate to various pages to discover content, the Drawer allows them to carry that content wherever they go. It’s a simple solution, certainly, but one which Miller says captures Branch’s approach to design, an approach that emphasizes a mobile and seamless user experience which values novel interactions over established social thinking.
When it came to designing the first iteration of Branch, Miller and his team spent a lot of time thinking about Branch’s homepage. But after working with publishers ranging from The Atlantic to The New York Times, which use the startup’s conversation platform, Branch realized homepages were becoming a thing of the past. "When all these other sites show you your stuff, it’s always on the domain’s dot-com, but that’s an artifact of an older web where it was all about destination sites," Miller says. "We realized that if you’re coming in horizontally to the site, you should be able to access your content without having to navigate to another page."
In other words, with the rise of Twitter and Facebook, it’s rare for users to discover Branch conversations on the company’s homepage; rather, users typically discover Branches from another source, and travel there directly. "Most people don’t go to Gawker.com or Buzzfeed.com directly anymore," Miller says. "They go to the specific articles." That realization led the startup to rethink how the content traditionally found on a homepage could be accessed. "It wasn’t a good UX to have different places to view your content," Miller says. "What we figured out and designed was that in the future, you’ll want access to your stuff from anywhere."
As Miller points out, the Drawer is an inherently mobile interaction--the idea of pulling out a section from the side calls to mind swiping gestures on smartphones. "Most websites design their web UIs and then figure out how to translate over to mobile later," Miller says. "But given that there’s definitely going to be a mobile app, and 50% or more of our users are going to use that more than our web app, we knew we should design the web app with mobile in mind."
But that’s not just some pie-in-the-sky design philosophy for Branch--"mobile first" design has become a Silicon Valley cliche. Rather, the startup has a rule that, if a design does not work on mobile, it cannot be used for the web. For example, for showing recommended Branch conversations, the startup initially considered adding another column, just as Facebook or even our own website features recommended content. "But we realized that doesn’t play out on mobile, cause there is no second column," Miller says. Instead, the company introduced a simple solution: Recommended Branches would be hidden at the top or bottom of the page, accessed in the same way you might pull-down-to-refresh content on the apps on your iPhone.
The mobile-centric approach also meant avoiding the temptation to fill empty space provided by web-based screen real estate. "When you design for web, you have all this space, so you have this inclination to fill it all up, so every ounce of space is used here for something--so every little pixel is taken up," Miller says. "Again, that doesn’t translate to mobile. You can’t clutter it up. You have to make it simple and clean." The result on Branch is a minimalist, almost empty layout that features not much more than the Branch conversation itself.
In creating yet another social network, it’s hard to ignore the designs driving the larger players in the space: Facebook, Twitter, even Quora, the slightly similar question-and-answer service. But Miller believes it’s impossible to create solutions to problems if you’re mimicking other experiences. "If we replicate what everyone else does, that means everyone else nailed the perfect solution on the head, and have the exact same problem as us, which 99% of the time is probably not going to be the case," he says.
Rather, the Branch team ignored some of the trappings of social networks. "You don’t see a like button, you don’t see feeds and followers," Miller says. "You don’t need up-voting and credits. A conversation is a very simple interaction. You don’t need to complicate it with all this other stuff." In fact, Branch ended up taking a different approach recommended by two of the startup’s closest advisers and investors, Twitter founder Ev Williams and Buzzfeed’s Jonah Peretti. On Twitter, for example, content is divided between the main tweet stream, the discover tab, the connect tab, and direct messages. "Almost all major networks have your stuff in multiple places, with this stream or that stream or this other stream," Miller says. "Why can’t we have that all in one place?"
Anyone who has experienced the pain of working with Yammer’s cluttered UI will know what Miller is driving at. "Instead of having a notifications tab, and inbox for messages, and like all this other stuff you want to see, we’ve consolidated it all in one place, and made it easy to filter it all out," he says. In many ways, Branch has become the anti-Buzzfeed in terms of design. As Buzzfeed ramps up with more buttons and streams of content, Branch has continued to pluck away as many UI elements as possible. "Jonah is one of our closest advisers and the king of making things go viral," Miller acknowledges. "He is advocating for what they do on Buzzfeed, but we think a delightful user experience is more important." He adds, "We want to solve problems, and not just replicate what other people are doing."