Improving 3rd Party Posting to Facebook

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Overview

Web App, B2C SaaS, Feature Improvement

Company
Company
Client
None; Internal
Date & Project Length
2015-16 - 2 Weeks
Role
UX Designer
Tools
Sketch, Invision, Balsamiq
Framework
Agile

About

Multibrain is a Social Media 3rd-party publisher tool for the Direct Selling industry.

Problem

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.

Solution

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Discovery

Users

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Ideation

New Rule: Condensed "Parent" Connection Tiles

If a user has connected 5 or less Pages, Groups, or Events in the Posting Interface, the tiles will remain separate for each connection. 

Max Number of Single Connections Tiles

Explanation

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.

Selecting Connection: Screenshots

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.

Designing the Connection Tiles & States

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Prototyping

Invision Prototype: Screenshots

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Testing

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Final Product

Results

This approach solved the experience for high connection users, creating a more organized way of finding the events and connections in the UI, without affecting the experience for users with few connections.