Multibrain is a Social Media 3rd-party publisher tool for the Direct Selling industry.
Our posting flow was originally designed to only allow users to connect 1 Facebook Profile, Page, and Group to their account. Due to Stakeholder Outrage, we changed the UX last minute, allowing them to post to unlimited connections.
This lead to major issues. Our users were attaching multiple Facebook groups to post to, and edge cases had over 50 connections, making it hard to locate and select the appropriate connection.
I established a new rule for the connections which increased findability, and made smaller chunks, reducing the overall effort in the posting flow. By using our existing design patterns, we were able to move fast and correct the issue.
Our two most polar users are Diane, Facebook Noobie, and Brittany, Social Media Aficionado. Diane has little experience with Social Media and only posts to a couple of connections. Brittany is a Social Media whiz, and has many Facebook Groups and Events–sometimes up to 100 conections with just groups–and has a defined social media strategy.
If a user has connected 5 or less Pages, Groups, or Events in the Posting Interface, the tiles will remain separate for each connection.
When a user with more than 5 connections of single type have their connections condensed into a parent tile, it lessens cognitive load. Less stuff on a page will make it easier to post and lowers eye strain/fatigue.
We prototyped a low fidelity mocks using balsamic and invision. Here are the screens
Note each connection card has a star in the right corner. This allows a user to pin the connection to the top of the list for faster selecting.
Using the current conventions of the On/Off state and naming hierarchy for tiles, I designed 12 new Tiles with On/Off states in Sketch. I also removed the word Facebook from the connection Tiles to clean up the UI experience for our users.
Collaborating with our UI designer, we came up with the following designs. We then threw together a simple invision click through to showcase the flow and states. Below are key screens from the prototype.
Note the Events is in the Off State.
When the page loads the user sees the scroll bar to indicate more options within the Div.
The color selection and the checkmark to give user feedback.
When selected, the Tile transfers into an On state giving confirmation that the flow was completed to the user. Note the H2 setting within the tile. This was done to emphasize the number of connections selected.