Growing Branch

[growing-branch]

Behind the scenes: new feed and compose

Today we shipped improvements to two important parts of Branch, the public feed and the compose form. Both of these went through many iterations, and we thought we'd briefly share our thinking behind them with you.

Public Feed

We designed the former signed-in home page right before launching last August. Since the page was brand-new, we didn't have user behavior data to draw from while building it. On this page we included three branches we hand picked for the day, some recently created branches, and a selection of our featured branches. 

One of our favorite learnings after launch was how eager our users were  to contribute to conversations that were just started by people they didn't necessarily know. We decided to make this section much more prominent for the next version of the page.

We experimented with different ways to present branches, to come up with a layout that let people locate interesting branches as quickly as possible, while providing a fun user experience.

Designing in the browser

Since we do most of our design work in the browser at Branch, we had the opportunity to use production data in our designs. This freed us from having to make assumptions about what this page would look like with actual data in it, a problem commonly faced when making mockups using tools like Photoshop.

v0: "HN Style" Before we started design work, we wanted to try out the most obvious solution, and printed out a flat, textual list of branches. (This might remind you of a web site you visit every day ☺). Even though it is efficient with space, owing to being really text heavy, we noticed it's difficult to focus and pace oneself while scanning all the items in this layout.

v1: Cards We moved on to a design where each branch was represented with a card, much like our old featured page. This layout was fairly easy to skim, but we realized that it's easy to lose interest in the content with such a layout since all items look the same. We unintentionally made the container span the entire window, and also noticed that skimming through titles while scrolling through a three column layout was cognitively overwhelming. 

v2: Masonry We experimented with not truncating the first post to fit the card, which added some visual interest, but made it harder to skim the items since titles didn't line up at all. 

v3: The sweet spot While experimenting we found the sweet spot which adds visual interest while maintaining scanability. If a post is longer than a single card, we double its height. This way the titles line up, and are easier to scan.

v4: Adding images At this point the feed was still very text-heavy, and we wanted to experiment with adding images. We use embed.ly to parse the links our users start branches from, and they are able to extract the main image from articles and other web pages. We tested this idea with real data, and validated that most links on Branch did indeed contain images we are able to grab. We experimented with the amount of information in this card, and settled with a clean layout, that can be expanded to reveal the text.

Combining the multiple-height idea with adding images resulted in a lively feed that's easy to skim and fun to look at; helping our users more quickly discover branches they are interested in.

Quick Compose

Since launch, a number of folks pointed out to us that they haven't started branches because they felt intimidated about writing in the compose form. It's always been easy to grab a link, whether it be an article, a photo or a tweet, and start a conversation based on that, but we weren't highlighting the different use cases. As a result, most branches created have been text-based. 

We wanted to improve the compose experience by making it feel less like a form, rather a friendly widget that not only suggests the types of things you can talk about, but also the people you could talk to. Moving from a single-page form to a three-step flow lets us do this without needing tooltips or a tutorial.

These two updates help us reinforce the mission of this page, to help you talk about things you care about, whether it means starting a branch, or hopping into an existing one. 

Follow our designers Cemre  @gem_ray <![CDATA[// <![CDATA[ // <![CDATA[ // <![CDATA[ // <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); // ]]]]]]]]]]><![CDATA[><![CDATA[><![CDATA[><![CDATA[> // ]]]]]]]]><![CDATA[><![CDATA[><![CDATA[> // ]]]]]]><![CDATA[><![CDATA[> // ]]]]><![CDATA[>]]> and Julius  @tarngerine <![CDATA[// <![CDATA[ // <![CDATA[ // <![CDATA[ // <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); // ]]]]]]]]]]><![CDATA[><![CDATA[><![CDATA[><![CDATA[> // ]]]]]]]]><![CDATA[><![CDATA[><![CDATA[> // ]]]]]]><![CDATA[><![CDATA[> // ]]]]><![CDATA[>]]> on Twitter to find out more about design at Branch.

Sound interesting? We're hiring product minded designers and engineers, get in touch with us.

[growing-branch]

Designing the drawer

At Branch, our design philosophy is to give you what you need, at the precise moment you need it — simply and delightfully. Last week, we shipped the drawer. Now, every branch you participate in, subscribe to, or are added to — as well as notifications about them — come with you wherever you go on Branch. In building the drawer, we had two goals: simplify and consolidate the inbox with the rest of your Branch experience, and build an elegant, original notification system. To make sure the drawer met these goals, we knew it had to be:

Simple

Having both activity-based notifications and a separate archive of your branches felt fragmented, so we decided to combine both in the drawer, which displays branches by activity with the most recent at the top. Newly active branches are highlighted and accompanied by text describing the type of activity. (Has someone posted? Asked to join?) To make it easier to manage all the new activity, we allow you to decline invitations and unsubscribe in-line. When you act on a notification, the text descriptions disappear, and you’re left with a clean repository of your branches.

Accessible

Since launch, we’ve noticed many of you come to Branch not via the homepage, but via individual branches after they’re shared or embedded elsewhere on the web (a horizontal trend which has been echoed to us by many of the publishers we work with). This told us it was even more important to allow instant access to your branches anywhere on the site — not hidden behind an extra page load in our inbox. To do this without needlessly cluttering the pages, we looked to mobile (where screen real estate is limited and interactions are forced to be simple) for inspiration. Simply click on "My branches" in the top left of any page on Branch and the drawer slides out. We also made sure to keep the drawer open for you as you click through your branches, rather than closing it each time.

Responsive

We’re still committed to making our site as responsive as possible. If your browser is wide enough, we automatically open the drawer, no additional click necessary. It also works great on mobile browsers, where a sliding drawer feels just right.

We do our best to carefully consider how every aspect of new features will affect people who use Branch — the interaction, the visuals, the infrastructure, and even the copy — and our thinking for the drawer was no different. We fell in love with the drawer as soon as we started prototyping it, and we hope you will, too.

Are you interested in working with us? We're hiring product designers.