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.

Posted by Julius Tarng 8 months ago