Do Share

The first Google+ post scheduling app.
Over 26,000 users.
Basically the entirety of Google+.

Do Share was a collaborative project between myself and Tzafrir Rehan, who approached me with an idea for a Google+ post scheduling app in early 2012. He had been interning at Google and had worked on parts of the social network, which explains why he was using it in the first place. There was no official API at the time and there wouldn’t be for a long time to come. This meant two things. First, we would have to employ a few workarounds and hacks that Tzafrir had in mind to make the app work. Second, the market would be wide open for a good while. Big apps such as Hootsuite would wait for a more established API before venturing into Google+ scheduling. We decided not to wait for them.

Do Share Logo

Starting the Design Process

Our first limitation creating the app was it couldn’t post as the user without being logged in as the user. The only way to make a working app was for the user to have his browser open and logged in to Google+. Logically then, Tzafrir opted for a Chrome extension.

The project was straightforward. The extension would need to have its own interface, an indicator button on the browser’s toolbar, and inline buttons within Google+ modals or next to Google+ post buttons. Users would need to be able to either post their content right away or schedule it for a later time, either from within Do Share or from the native Google+ interface. Most importantly, considering the project’s inherent limitations (users needing to keep their browser open in order for it to work) the rest of the experience would have to be exceptionally simple and clear.

Initial Sketches

A few days later I sent Tzafrir the initial sketches accompanied by this email.

Joel Califa

sent via Email on 3/27/2012

What do you think so far? Some explanations are in the rough paper sketch.

This isn’t the final aesthetic, but after some deliberation I decided the app would be better off looking a lot like G+.
You want people to make an easy transition from there to doShare, and more importantly, keep the same mental models.
For instance, I moved the video/link/etc onto the wysiwyg bar for a while, but it wasn’t obvious that you could only add one.
Keeping it the way google has designed it, whether it’s perfect or not, lets us take advantage of what people already know.

This is no where near a final design either. I still have to add edit / delete buttons to posts, for instance.

Honestly, designing this now there’s a lot of things we didn’t think though.

Some things:
  • The app needs a search function, for people who need to go through many drafts.
  • Do you want to add the ability to delete posted posts? If not, displaying them is kind of pointless except as feedback that it worked.
  • What happens when you open a post? Same page or different page? If you open a scheduled item, can you save it as a draft? or is there some kind of unschedule button?
  • I think the best way to go about it is present the normal screen but instead of “save as draft”, change the button title to “return to drafts” or maybe even “unschedule post” and have it just go to drafts.
  • What’s the limit on the list of drafts? should it infinitely scroll or should you have a separate page for your drafts?
  • Do you need an option to disable comments

I’m probably forgetting something and we’ll probably hit some more hitches down the line.
Do Share Sketch

I also included some mid-fidelity wireframes.

Do Share Home Screen
A wireframe for how the homescreen might look. Three columns to represent the pipeline from draft to published post. I quickly decided that published posts were useless in this context.
Do Share Post Screen
Fade the rest of the interface out so that the user can focus on writing.

User Experience

Do Share was an exciting project for me. It was just me and Tzafrir, a relatively small app, and no forseeable deadline (though we did set one ourselves). We had the time to experiment with new kinds of interfaces and interactions, and I took full advantage of this to pursue an uncompromising user experience.

Right away I set us on the path to solve the most frustrating experience online text editors have to offer: user slips. Most text editors include an oversight when it comes to the back button and its effect on user content. That this issue is so prevalent is not surprising—keeping a user’s text inputs in memory requires quite a bit of work behind the scenes, and in most places these small experiential details are never priorities. Here, though, we had a shot at solving this in a novel way, by connecting the post in the list directly to the post in the text box and have them sync in real time.

To create a new draft, all the user has to do is click into the text input and start typing. As the user does so, a box will appear in the drafts column with the same text, updating in real time. Since everything but the main text input is faded out, this is a very subtle effect rather than a distracting one. If a user accidentally clicks the back button or closes the browser—the post will be right there in the drafts column. When you click on a post, its content jumps straight into the text input box and the user can continue where they left off. By not rushing in our attempt to solve the issue of user slips, we ended up finding the core of our app’s experience, one that remains relatively unique even today.

I also pushed for Do Share to have post titles. While Google+ posts didn’t have titles, we decided that they could be incredibly useful within Do share. Mostly for users with many scheduled posts, but also for users who wanted to add additional context. We kept the titles optional and when users chose to use them, Do Share simply prepended them to the published posts, in bold. Then an interesting thing happened—most of our users started using post titles. People without the app then began adopting the custom of first-line-as-title. Our small design choice inadvertently started a cultural phenomenon of post titles within Google+.

More Designs

A week or so or iteration goes by and I send Tzafrir another email with my latest version.

Joel Califa

sent via Email on 4/2/2012

Didn’t get as much time as I thought I would, so I only got one page done. I really like how it turned out, though.
When it was wider, the experience felt overwhelming. I think people want to see boundaries. I think it calms them.
The new width is 620px, which is 90px more than the previous version. Personally, I think it’s a great size to write in.
The light grey background is also helpful in creating a calm writing environment.
While you’re writing, the posts will fade out, like in the previous version.

New icons to replace the default google+ ones. They look more or less the same as the originals, but push the brand colors (and are honestly better looking)

Posts don’t need buttons since they themselves are the buttons. The bright hover color makes this obvious.
I think it’d look great with a really fast css transition between the two states.
I think the new borderless backgrounds are much fresher than the square borders I had earlier.

As you can see, posts can have titles, but can also not have them. Not a problem.

Later on, when writing posts, you’ll have color coordinated buttons to post to drafts (over the drafts), to schedule (over the scheduled posts), and to share now (in the logo’s purple and in its own column to the right. The intensifying colors will mirror the intensifying actions (don’t post -> post later -> post now) and the positioning will connect them to each column and help create a solid mental model of how the product works for new users.

Lemme know what you think

Tzafrir had also asked me to work on some possible brands, so I sent him the most successful direction, which was based on the same concept I used to color the interface. Intensifying colors for intensifying actions.

Do Share Brand V1
The initial Do Share logo, in beautiful Museo Sans. We later decided to bring it closer to Google by using Roboto, the Android typeface.
a new high fidelity
A higher fidelity mockup of how I thought the app should look.

A few days go by and I send Tzafrir a mockup of the post-editing state with inline notes on how it should work. In the meanwhile I send him the sprites and CSS and he pushes it overnight. At this point he is pushing versions of Do Share faster than I can ask him for new design details, and reminding me what a pleasure it is to work with a badass developer. No amount of looking at your mockups can provide you with the level of insight that you can get from playing around with a working prototype, and I had an up-to-date version almost constantly.

Do Share post editing
Clicking ‘delete post’ would make it flip into an ‘are you sure?’ button. User confirmation, yo.

I get on post scheduling and send him the next mockup. Sometimes not working directly with code is a dream.

Joel Califa

sent via Email on 4/2/2012

I’ll explain the specific interactions to you in the morning, but basically:

Drafts will simply save to drafts. I think it would be best to save, write “SAVED” somewhere, and let you keep working on it. Also have it auto-save once in a while.

Tags will push down a row if you have more than fit. I can remove this section if you say that you only have the ability to push to public. Remind me tomorrow. In that case, btw, share now will simply share to your stream.

A schedule widget will open when you focus on the date field. I’ll design that tomorrow.

If you type something like 14:30 into the time field and press return or tab, it turns into 02:30pm. if you type 2:30pm it turns into the same. Basically try and get every sort of string that can constitute an hour, that’s the kind of magic people love.. so 1430, 230pm 2:30pm 1430pm. Hell, even 14.5 should work :P Trust me this is something that is worthwhile to spend an hour on.

You can cancel the action by pressing anywhere outside the scheduling box, but that won’t remove the entered information, so if you reopen it later it’ll have what you wrote.

Also, forgot to mention that everything should fade out in the previous version of focusing on the post, as well.

Added a feedback button in the upper right.

PS this box should have a slidedown animation to make it hella beautiful
Do Share Brand V1
Only what you’re currently working on is ever in focus.
post scheduling
How to style the scheduling calendar.
resharing posts
Resharing posts. Another feature that Google+ did not yet have.

A few more mockups, then we add tagging, and we’re more or less done with v1.

Launching and Beyond

The launch went smoothly and the reception was wonderful. People loved the app from the get go. We got thousands of users in days. The app’s delightful experience seemed to overpower the inconvenience of having to leave your browser open in order for it to work. Tzafrir had added a huge alert screen letting users know (Kanye-style) what they’d have to do in order for it to work. It wasn’t well designed but it was so hilarious I didn’t feel the need to intervene :)

We got a bunch of press from CNET, Marketing Land, and THIS GUY, plus many other blogs tailored towards people who schedule posts on Google+. Guy Kawasaki took a liking to the app and even wrote about it in his book, so there is real physical ink now somewhere that spells out Do Share.

Since then, Tzafrir has continued working on the app single-handedly and has added tons of cool and useful features. His designs leave much to be desired, but the functionality is fantastic and I wholeheartedly recommend that you give it a shot. You know, if you’re into that sort of thing.

Designated Compliment Box

Working with Joel is joyous and smooth. His designs are not only beautiful, but also specifically crafted for the intended medium. They speak its language. Get ready for fast design to code cycles, because Joel knows his environments as well as you, and will always have your latest code on his machine. If you want to get things done and stay happy while doing it, you better call Joel!” —Tzafrir Rehan