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.
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.
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.
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.
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.
Sound interesting? We’re hiring product minded designers and engineers, get in touch with us.