Analytics told us that users who posted at least once were more likely to become active members of the community.
However, our posting success rate was very poor, implying that many users who clicked the post button either didn’t know what to do next or else were intimidated and didn’t know what to post.
Problems To Solve
New users were not immediately sure where to access their photos.
The posting screen was geared predominantly toward text posts.
The experience of adding a photo was confusing, because the newly attached graphic took over most of the screen.
The header area was aesthetically unappealing and offered too many options to the user.
Original Look with typical problems
I first documented competitor’s solutions, taking notes and screenshots.
The nature of our application, with its many different places to post content, presented a challenge that some apps did not have. Also, a fundamental re-thinking of the nature of posting in our application was not within the scope of this project.
I needed to address the user’s experience from the moment that she tapped the post button onward.
I began by sketching out ideas on paper and talking over concepts with team members.
My goal was to reduce the number of clicks that media posting required, and in service to that I wanted to bring the user’s photo library in right away. I also wanted to remove as much visual clutter from the experience as possible.
The header bar with ‘Cancel’ and ‘Post’ on it was industry standard and used by Facebook, but in our case it increased clutter, because in addition to that bar we had a bar beneath it that specified the media feed into which the user was posting.
Pushing this feed definition until the end of the posting experience made sense, however, user testing showed this to be confusing, because the nature of the feed was an important determinant of post content.
A user needed the confidence that she was posting into the correct feed before she authored her post. Similarly, I looked into defining the feed choice in an initial screen and then creating the post, but that delayed the user’s goal of posting even further and proved annoying.
In the end, I combined the two top bars into one, removing our traditional header and introducing a large, colorful post button underneath the content.
This had the additional benefit of clarifying and constraining a user’s choices upon landing on the post page.
At the top of the screen we had the high level concern of which feed the user was posting into. Then we had the content of the post. Finally we had the post button underneath. This better reflected the order of actions a user engaged in: first to define the feed, then to create the content, then to post the content.
Because we had a large visual button for posting, we could contextually disable it when no content was present, so it wouldn’t distract from the experience but would give encouragement to the user once content was entered, through the sudden addition of color.
I also wanted to bring the user’s recent photos onto the initial screen, so they wouldn’t have to click through to the library every time. This would serve to give them a quick reminder of their posting options and provide visual excitement. This reduced clicks needed to add a photo from three to (in most cases) one.
With regular iterative feedback from developers, team members and stakeholders, we honed in on this particular solution which proved to be a solid improvement with regard to posting success.