Social 2.5 Sketches

I’ve already professed my love for Paper1, 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:

Broadcast Social 2.0

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:

Broadcast sketch

Broadcast sketch

And here is the version that shipped:

Broadcast Social 2.5

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

Accounts Social 2.0

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:

Accounts sketch

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.

  1. Speaking of which, I hope we’re due for an update here soon. 

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