I’ve already professed my love for Paper¹, and one of my primary usages is for wireframing UX models. I used it for a few of the improvments we added in Social 2.5, and thought it might be fun to share a couple of them here.

One of the biggest changes we made was an overhaul of the Broadcasting screen. Here is the “before” version:

This worked OK, but you can see a few problems:

• You can’t send different messages to different accounts on the same service. This was something I wanted to be able to do, to have different voicing on @alexkingorg and @crowdfavorite.
• Facebook pages aren’t visible by default.
• The character counter limit indicator is too far away from the textarea it is reflecting.

So we worked on some different approaches. These are pretty close to what we shipped in version 2.5:

And here is the version that shipped:

We also made some significant UI changes to the way accounts are managed on the admin side. Here is the “before” version.

Again, functional but can be improved. In particular I wanted to consolidate this into a single list rather than having one place to add/remove accounts and a separate place to indicate the default accounts. Also, you can see the problem (again) of pages not being shown by default.

This concept allowed the two lists to be combined into one:

And what we shipped was pretty darn close to that:

In addition to making the admin screens more compact, this design also makes it easier to support more services in the future (Google+, etc.).

So there you have it, a little “behind the scenes” fun. I definitely recommend incorporating sketching and wireframing into your design process, it’s been a huge help for us as we brainstorm, discuss ideas, etc.

This post is part of the project: Social. View the project timeline for more context on this post.