How to make Buffer App better?..

An open letter to Buffer

Hi Buffer. I’ve been using your app for a while, and it has helped me to build quite a big follower base on Facebook. Since I’m a designer, I’m almost always picky about user interfaces and experiences, but I couldn’t fault your app. It was doing everything I wanted in a way I wanted it. Your Google Chrome extension made scheduling posts a breeze, but besides scheduling my content, you didn’t have anything else to offer which leads me to your new product — Pablo.

Pablo by Buffer.

I spotted that you added Pablo to your Google Chrome extension (via create an image function) and I decided to give it a shot. Before Pablo launched, I assumed that I would be able to add text and effects on top of an image that I’ve already chosen to schedule, but that was not the case. I was thrown into a new tab and faced with an interface that had nothing to do with my previous action. I knew there and then that it’s against any logic and people just won’t use Pablo in such an awkward manner.

Fortunately (or unfortunately) Pablo now has its own Google Chrome extension but as far as I see it — it doesn't deserve one. Let’s face it, Pablo is a super simple image editor that is supposed to add value to your existing product — your scheduling app; it’s not strong enough as a standalone product. There are quite a few sites that offer the same (and better) service. Also, why would busy marketing people burden their browser and install yet another extension? They already use a zillion of them and asking to install another one will force them to prioritise what’s more important. Pablo might not be on that list. In case you didn’t know it, not everyone is on the latest Mac with the latest version of Chrome. Even a few extensions can make your browser into a “slimy slug”.

It begs me to question why you have spent time designing and developing something that doesn't add value to your core product? Somehow it doesn't make sense to me.

Let's talk about the scheduler now.

I believe that Pablo should have been integrated into the existing Buffer extension for reasons I mentioned earlier and will continue to mention all throughout this article. I will explore the pitfalls and possible solutions.

A Part of the Buffer Scheduler

In the image above you can see that I've spent time and made a conscious decision to use this exact image along with my post.

Buffer should be smart enough not to present people with this “Create an image” function because at this point in time it's irrelevant to the user. As I see it, there is a solution that fundamentally changes how Pablo works, a solution that actually makes it useful to users. To illustrate my idea, I will create a few simple visual alterations.

Let's count the steps.

We have to start by counting how many steps a user is supposed to go through just to create “engaging social images in 30 seconds”. I will explore two different scenarios and will base this on assumption that a user wants to share an image from an article he has found relevant and has decided to share, which I assume is the primary use of Buffer — to share interesting and relevant content around the web, not just their own.

User scenario one (without Pablo extension).

In this scenario I will assume that the user is not familiar with Pablo browser extension and therefore downloads his chosen image just to get it uploaded into Pablo for editing.

Download an image of your choice (4 steps).

1. Right click on the image;
2. Left click to “Save image as..”;
3. Choose file directory;
4. Press “Save”.

Go back to the post scheduler tab and chose “Create an image” (2 steps).

1. Navigate back to the browser tab holding the Buffer scheduler;
2. Press “Create an image”.

Alternatively:

1. Navigate to https://buffer.com/pablo

Process your image in Pablo (5 steps).

1. Press “Upload an image”;
2. Navigate to your image in file directory;
3. Press “Open”;
4. Add your own text & effects (I will count these as a single step because they are optional and will always vary);
5. “Download your image”.

As as side note, I should probably mention that even if you do decide to use Buffer to share your newly created image on Pablo, the scheduler is only going to pre-populate your text input field based on what you wrote on your image. Absolutely nothing was carried over from the article where you initially decided to share your image.

Go back to your Buffer scheduler tab in your browser and finalise your post (5 steps).

1. Select your Buffer scheduler tab in your browser;
2. Press “Click or Drag a Photo/Video here”;
3. Navigate to your image in file directory;
4. Press “Open”;
5. Once your image is uploaded you can finally press “Add to Queue” and be done with it.

This scenario is an extreme case where a user has not realised that it's possible to Buffer his image through Pablo. One would argue saying that it's impossible to miss the big blue share button in Pablo but I disagree. There is so much white space on Pablo's page, why the hell is the Buffer button hidden? It takes an additional step just to share an image. This is very bad to say the least. The Buffer button should be “in front and centre” because that's what it's all about.

At this point the user might be thinking “Wait, I already have an opened tab with my Buffer scheduler, why would I share it again?” You can easily see why this is so confusing.

Ouch, that's a lot of steps.

An average user would take 16 steps just to schedule a slightly tuned version of their image? Trust me, they will only do it once and never open your app again. Most people struggle with fewer than 5 steps, let alone 16. This is madness. I am not exactly sure why you folks have made it so complicated. It makes me sad because I'm used to your effortless user interface.

User scenario two (with Pablo extension).

1. Click on the Pablo button on the chosen image;
2. Edit your text (because it was not carried over from your previous interaction);
3. Edit edit your effects;
4. Click on the share button;
5. Click on “Buffer your image”;
6. Edit your message for Twitter, Google+ and LinkedIn (because it was not carried over from your previous interaction);
7. Edit your message for Facebook;
8. Click the “Add to Queue” button.

It's a bit better now.

If we compare these two scenarios, we can see that in the second scenario the amount of steps is reduced by half (from 16 to 8). This might be good to some but I believe that 8 steps to get the job done is still a bit too long-winded.

Now then, let's talk about how to improve this situation.

First and foremost, Buffer scheduler should distinguish when it has been initiated from the browser app menu or an image via the blue Buffer share button. There are currently a few differences, but they are not good enough. These are the two different scenarios that I will explore below.

Obviously, if people initiate Buffer via the browser app menu, they are looking to start fresh in which case it makes sense to offer them the “Create an image” option, however, the title of the page should still be carried over and injected on top of their Pablo image to save time. Let’s face it, if someone has made a couscous decision to share an article, it’s almost certainly going to contain the same wording. If it doesn't, at least it will be a good starting point.

Below you can see both of the original Buffer schedulers. If a page is shared via the browser app then it's clear that you can replace the default thumbnail with your own custom image but it's not exactly the same if you're going through the image overlay share button (on the right). The “Click or drag a photo/video here” button only has one representative icon and no descriptions despite the fact that it works under multiple conditions. Since Buffer only offers one image/video per post, that’s very misleading. Besides design changes, it would be nice to see some sort of messaging about that too.

If you have already uploaded an image or are sharing an image from somewhere one the web, I dare you to try and upload another one. You will get a nasty alert. Whoops! It’s ok; it’s not your fault because you didn’t know what’s coming, did you? This is pretty bad user experience, and it still bothers me that nothing has been done about it since the scheduler is at the core of what Buffer is offering.

In the example below, you can see a scenario, I came up with, where a user has already chosen an image on their website of interest and therefore is offered either to swap it or to enhance it. I hacked together and animated (in AE) an icon that represents image swapping. On hover, the icon is animated to enhance the meaning, and an info bubble appears to explain further that you can only swap your image. Mostly you are never left alone in the dark. No errors, no fuss.

Off the topic, but I never fully understood why all images that are shared via the “Share Image” button get screwed up thumbnails that are squashed into a square? Look at all that white (dead) space next to the shared image. Surely it’s possible to make this preview adaptive and to display all images at their correct aspect ratios. Just saying..

Buffer scheduler and Pablo integration.

Regarding Pablo, I believe that it’s not a good practice to send people to another tab from a modal (in this case the scheduler). Although it is a viable option, the user journey has to be heavily optimised to minimise all of the steps involved. I will discuss it a bit later.

So why it’s not a good practice, to begin with? Users have already initiated action by opening the scheduler and therefore sending them away straight away will make them feel like they have to do extra work. People wouldn’t mind doing it a few times, but it’s easy to see how it can become a chore if you do it daily. It creates unnecessary friction. It wouldn’t be so complicated to include a stripped down version of Pablo right into the Buffer browser plugin (scheduler).

I came up with a concept that explores “squeezing” a simplified version of Pablo right into the Buffer scheduler. I believe that this would make life a lot easier for users. It would eliminate almost every single one of those 16 (or 8) steps that I counted previously. You would only see the Pablo photo editor once you would click on “Enhance your image” so essentially it would be easy to access if you need it but it would be out of your sight when you don't. Even though it's such a small part of the scheduler UI, it deserves the utmost attention because this feature could really take Buffer to the next level. It's quite complex to put it in words so let me show you an animated walkthrough that I made in Principle. Keep in mind that GIFs suck and that's why you can see a better better version here.

This is my take on how Pablo should be integrated into the Buffer scheduler.

In the animation above you can see that I’ve streamlined the entire process while keeping 90% of Pablo’s functionality. I also kept in mind that people use Buffer on different screen sizes and therefore made sure that this new layout comfortably fits in at least a 13" screen even when fully extended, however, if you did change the image layout from wide (default) to square or tall, you would inevitably make the scheduler extend outside of the viewport, which is not optimal. Since the current scheduler is fairly small and centred, a potential fix could be to make the Pablo editor slide out from the right side (not bottom) of the scheduler.

Forget about going from one screen to another and doing a ton of different clicks. As far as I see it, this sort of a process is so much easier.

Whoa, that still seems to be equally complicated?

Let’s count the steps involved in the user journey, shall we?

1. Click on “Enhance your image”;
2. Add effects/text on your image;
3. Click the “Add to queue” button.

With an assumption that people may want similar style images, step 2. could be eliminated entirely by making Buffer scheduler to cookie/remember user’s previously selected effects. With that in mind, I’ll count it as 2 steps.

Two steps, are you serious?

Yup, it’s entirely doable and if anyone says it otherwise, they need a kick in the back side. We’re living in the 21st century and code has come a very long way. So much so that almost nothing is impossible.

President Obama agrees.

To sum it up, we’ve gone from 16 steps to just 2. How about that? We’ve made it to the advertised “engaging social images in 30 seconds”.

Oh you are so smart, came up with some step counts and that’s it?..

I hope that my concept, along with a visual example and an animation, was descriptive enough to show how much easier it could potentially be for the end user because that is (should be) the end goal.

Is there an alternative?

In case integrating Pablo into the Buffer Scheduler in not an option, there is an alternative. As I mentioned before, Buffer always used to be frictionless and very efficient but with the release of Pablo it all turned upside down. So how do we make it better? It's pretty straight forward. Buffer's browser extension has to be tightly integrated with Pablo. They have to “talk to one another”. I'll give you a pretty casual example.

Say you were reading an article and you felt it's relevant to your social media channels. What would you do? You would share an image that represents this article in the best way possible. You would press the blue Buffer share button on your selected image and get presented with the usual Buffer scheduler modal. From there on you would like to modify that image. You would click on “Enhance your image” but instead of getting your editing tools right in the scheduler, Pablo would open up in another tab as it already does. It would have your initially selected image and it would also grab the title of the page and overlay it on top of it. Once you are done with effects and positioning, you would simply click on the “Save” button in Pablo. Pablo's tab would close and throw you back into the Buffer scheduler tab where you would be presented with your newly created image and you would simply click on “Add to queue” to finalise this entire process.

Let's look at the user journey again.

1. Click the Buffer share button on an image of your choice;
2. Click “Enhance your image” on Buffer scheduler;
3. Add effects/text on your image;
4. Click “Save” in Pablo;
5. Click “Add to queue” on Buffer scheduler.

5 steps is still better than 8 or 16.

This is all basic stuff and that's exactly the problem. Look, I have no design awards but there is something I do have — something that makes my face go all weird when I see bad user experience.

I’m glad you read this far and that’s why I’ll give you the Sketch file as well as the Principle file as a reward. They both come with super-neatly organised layers — crafted with care and attention to detail.

Pssst. I’m looking for a job so if you are interested, say hello@designer.market