Bloglovin'

Collections Feature

Bloglovin' single collection

TEAM & CONTRIBUTORS

Head of Design: Dan Carlberg
Designer: Jayne Lee

PROBLEM STATEMENT

Bloglovin’ users had no convenient way to organize the content they liked, which made it difficult when users wanted to find something specific among all the content that had saved. Secondary to this, Bloglovin’ users lacked a way to define a sense of identity within the platform, outside of a short written description.

Business Need: Increase user retention and engagement metrics

OBJECTIVE

Allow users the ability to organize the content they had saved into groups of their choosing and provide some semblance of defining a personal identity within the platform

BACKGROUND

Bloglovin’s audience was pretty vocal, which became beneficial for the product team. We knew immediate reactions once we released a feature or bug fix. When we asked our audience what they'd like to see or have us improve, the collections feature was one of the most frequently requested.

The primary actions a Bloglovin’ user can perform on the platform were to save a post or to follow a blog. All Bloglovin’ users had a profile, which displayed all of their posts they had saved. With the limited amount of actions, it was difficult for a user to distinguish or define their profile solely based on the types of posts they had saved and when.

Most of the Bloglovin' user base were bloggers themselves, who've spent a lot of time defining and crafting their digital persona. We wanted to give some more control to the user with the ability to curate their profile, by organizing and creating collections.

PROCESS

Creating & Adding to a Collection

A user can create a collection directly from their profile or when they are saving a post, from anywhere on the platform. We saw that it was more intuitive for someone to want to create a new collection only after deciding that they wanted to save a new post. It was less common for a user to know that they wanted to create a collection before finding posts they wanted to save. This is inline with the way we usually think about grouping items, most of the time we don't know how to categorize items until we know what the items are.

When a user saves a post, a modal appears requiring that they select the collection where the post will be saved. Additionally, the user can create a new collection directly from the modal. Selecting the new collection button, changes the modal to display a form the user must fill out with the details of their new collection. Once the new collection has been successfully created, the post has now been saved to the newly created collection.

Receiving Confirmation

When a new collection has been successfully created or a post has been saved to a collection, the user receives a visual notification on screen, communicating that the [post] has been saved to [collection] or that [new collection name] has been created. The user can continue browsing and reading more posts, while confidently knowing that their post or new collection has been saved.

Bloglovin' iOS collection screens

Final iOS comps

Creating a Collection from the Profile

If a user decided to create a new collection from their profile, they would select the create new collection button from the collections page.

The placement and obtrusive design of the new collection button was intentionally designed to motivate users to create more beautiful collections, in hopes of offsetting the stark quality of the button.

Editing Existing Collections

To edit an existing collection (change the collection name, change the description, change the category, or delete), a user has to go to their collections overview page or navigate to the specific collection's detail page. The form to edit their collection details is the same form displayed when creating a new collection, but now with previously input information. This decision was made to prevent additional cognitive overload on the user, as this is a form they're familiar with and to additionally prevent unnecessary development work.

Viewing Other Users' Collections

A user can view other users’ collections by navigating to the user’s profile. Additionally, every collection detail page displays the name (and link) of the collection creator.

Bloglovin' collections on desktop

Final Desktop comp

Day 0: Collection Status

We had to equally account for brand new users and existing users and what their profiles would look like on Day 0, once we released collections. For existing users, we decided to put all of their already saved posts into the default “Saved” collections. This nodded to the legacy behavior that these users were accustomed to and bridge the gap with the new system. For brand new users, everything is already new for them and they're not familiar with the legacy behavior, but they would start with the same default collection, to loosely communicate that when they save posts, they must be within a collection.

Translating Across Platforms

On iOS, we utilized the majority of the same thinking we did for web, but made sure the designs and interaction patterns were native to the mobile experience. Because of the lack of real estate on mobile, we only display the collection name and collection photo, determined by the first post saved to the collection.

Introducing Collections

Generally when a new larger feature has been introduced, there is a drastic change in metrics because it's potentially a big change that can overwhelm users and perhaps require a steeper learning curve. If the feature successfully improves the experience, the numbers will come back up and stabilize, hopefully increasing gradually. We were very cautious of distrupting our retention metrics, so we decided on an initial soft release with no promotion to gain insight from the few users who happened upon the new feature. After we received positive feedback from the soft release, we sent out a promotional email to introduce and promote the new feature.

OUTCOME

During my time at Bloglovin', this feature successfully increased our user retention and engagement metrics. Our audience was excited to finally have a way to organize their posts. The collections feature still exists on the platform with some slight improvements, made after my time.

CONSIDERATIONS

Our audience preferred beautiful images over witty titles, so we ommitted the post titles when viewing a collection overview page.

We were aware that this idea was lacking innovation, but we consciously chose to build a feature that would minimally impact and improve the experience. We preferred iteration over big redesigns. We wanted to introduce a slight improvement to a behavior that our audience was already familiar with, which also allows them to begin to define their presence within Bloglovin'.

DELIVERABLES

Comps/Components for Web, iOS:

Promotional Email & Graphics