How We Designed Publish
The app that lets you post simultaneously on Twitter & Instagram, and is already being used by over 3 million users in the world.
First Published on July 15, 2016
I have worked on building Publish for Android, iOS (app and extension), Web (app and its Chrome extension). Here is a brief on the process of building Publish iOS app and iOS extension.
Purpose
The purpose of creating the app was to help users post anything easily on social media with few clicks.
Target Audience
Our 15 million users — entrepreneurs, YouTubers, authors, musicians, bloggers, startups, etc., who are trying to market their product or service online.
Instead of jumping straight onto sketch or photoshop, I drew some basic wireframes on paper. This gave me more clarity and perspective to build a better product.
Compose Flow UX
Option 1 : Giving image higher priority
Considering the fact that most of our existing users are from Instagram, and the posts with images have a higher rate of engagement compared to posts without images on social media, we tried a version in which image has a higher priority than text.
Option 2: Giving text higher priority
The goal is to make Publish an instant sharing app. So we try to encourage publishing now rather than later. Considering the fact that sharing thoughts via text is extremely simple, it can create a lot of posts in the system and make Publish a place where you share your thoughts almost instantly.
Option 3: Giving priority to both the image and text.
We don’t really know users’ intent. They might want to post text or image, or probably, both. If we go through either text, or image only flow, they might find the other option a little hard to use.
After considering all the above options, combining with our existing user personas and some initial A/B testing, we decided to go with the Image & Text UX. Later, by analysing the number of posts made using “only text” and “only image”, we could change the flow (only if required).
Account Selection
We wanted to make the selection of accounts easy and quick. Most of the users had more than 2 accounts.
Option 1 : Dropdown
The idea is to show you the selected accounts on top of the compose window with a dropdown. Upon clicking the dropdown, the user will be able to select accounts. This was ditched almost instantly as we found UX Option 2 (explained below) would go better with our product.
Option 2 : Dropdown 2
This is almost the same and yet a better version of Option 1. Instead of a dropdown menu, the user will see a “+” button on the top left of the compose screen. On tapping on the button, they will be able to see all their connected accounts along with “Add a new channel” button on the bottom of the screen. Upon making any changes to the account selection, the “Close” button will become “Save” button.
Publish Button
We wanted Publish to be the fastest and the easiest way for publishing all your posts to any number of social channels at any time. Thus, we planned to allow four options for publishing your content:
- Publish Now
- Publish at best time: Here, the system will automatically calculate your best time based on the engagement you’ve got from the previous post.
- Schedule: You can schedule a post to any time later if you want.
- Save as draft
Giving too many options often confuses the user while making a decision. But considering our target audience, we made the choice of giving all the four options.
Option 1: Primary and Secondary buttons
We want Publish to be an instant sharing app. We had to further break the UX down to “Publish now” or “Later”. We made the “More” drop-down button for letting them choose any of the “Later” options, such as, “Publish at best time” or “Schedule”, or “Save as draft”.
Here, the app will automatically adopt the primary button according to your behaviour. For example, if you’ve posted using “Publish at the best time” for more than a few times, it will be the primary action from the next time.
Option 2: Swipe to publish
Option 1 doesn’t instantly allow users to perform the rest of the 3 actions. So we decided to explore new ways in which he can share. That’s where we found “Swipe to publish”. Users can swipe on the top, right, bottom and the left direction to choose the publish options, allowing them to instantly access all the four buttons.
But, the user might often get confused while using the feature for the very first time. So we added a hint (help text) on the top. This helped us to simplify it further and helped in adding a context. We A/B tested the button internally and found out it was working better.
After testing this out with a few more users, we came to know that the button is not as confusing as we thought initially, and the people loved this feature! So we decided to go with the swipeable action button instead of dividing it to primary and secondary options.
Image selection
Option 1 : Full height images
We preferred allowing users to have a good preview of their gallery and letting them swipe to choose one out of it.
Option 2 : Image grid + Camera upload
It involved a small grid of images, and letting the users have a look at minimum 6 images without any scroll.
After a discussion with stakeholders, we decided to go with Option 2. However, after testing it out with initial users, Option 2 didn’t really work out. So we fell back to option 1 later (you can see this on the MVP video at the bottom).
UI Design
Colour Palette
I usually make the palette first based on the app theme and target audience. As I start building the UI of the app, the font, grid, and palette will come handy. It does go through a lot of changes in order to achieve the best look we want to achieve.
1: Compose
1.1 : Account Selection
1.2: Publish
2: Time & Date picker
3: Feedback
4: Timeline
Interaction design
Onboarding
As the entire app is very simple to use, we didn’t really need an on-boarding other than product on-boarding where we tell about the product, its features and how you can make it useful in a day-to-day life. Any how, if users have a problem in using Publish for the very first time, we have a very simple intuitive on-boarding for them.
If you don’t do anything after opening the app for a few seconds, small bubbles will come out of the “+” button (account selection) in order to get your attention. Bubbles won’t disappear until and unless you close the app or click any button.
Once you click the button, you’ll see the list of accounts you have already connected to the Publish app. Once you choose any of the accounts, “Save” button will appear. On clicking, you’ll see the compose screen with accounts selected.
If you don’t take any action within the next few seconds, same bubbles will now appear above the text area indicating that you have to add some more content. Once it is done, same bubbles will appear on the “Publish” button (if you didn’t already touch the button before).
Publish extension
While building the extension, the goal was to replicate the same quick and easy share. We managed to mimic the default share UI for simplicity.
- Select an image: Simply select an image from your photo gallery, and tap share and choose via Publish.
- Share extension: Here, the extension has the same functionality of the app. The only limitation is that you can’t replace the image once you add it. In order to replace the image, you have to cancel and redo the share again with the preferred image.
- Content filled: The text area is scrollable.
2.1 Account selection: All your connected accounts will be displayed.
2.21 Publish options: The options “Publish now”, “Best time”, and “Schedule” are available through the extension.
2.22 Date and time picker: We have used the default date and time picker with a minimal edit for the simplicity.
2.23 Edited extension window: Final look before publishing.
Today Widget
The goal for building “Today Widget” is to help our users get to know the number of posts which are scheduled for that particular day. There are 3 types of posts. Posts with:
- Image and text
2. Only Image
3. Only text
Some of our users care more for image than text and vice versa when they post “only image” and “only text”. As we don’t want to give the same style for all the three types of posts, we have prioritised things based on user intent and how they prefer to see the preview before it goes live on social media.
Thank you!
I’m Farhan Razak. Design lead at Crowdfire. I Believe in being a part of the entire design process rather than concentrating just on the UX or UI or UI animation or User testing.
