I am Lizzie

One View 2

Bitly: One View

logos-01.png

One View offers users the ability to organize links into campaigns and track performance by channel. Users can turn links into trackable marketing assets, determine which platform is performing best, and compare customer experience across a diverse set of custom channels.

purplebox3.png

01_Background 

In the past three years, Bitly completely rearchitected and redesigned their free and premium platforms. The free version was developed and shipped first. We then incrementally designed and added each premium feature, slowly forming a robust paid product. We tackled the Campaign Creator first, which in the process of creation became what we now call One View.

 

02_Objective

Create a clean and effective Campaign feature that mirrored our previous product while improving upon current functionality.

 

03_User Research

 

We conducted a series of customer feedback calls to determine what about the feature was working and what about it was insufficient in meeting our clients' needs. The following were are most important findings.

Our Findings

Flexiblity

We learned that the product's flexibility was welcomed. User's weren't just building campaign assets, but looking for ways to create discrete sets of aggregate data. Our product was working to meet their needs because of it's flexibility. That's why decided to change it's name to One View, where it had previously been called "Campaigns"

Bulk Link Uploader

Our most sophisticated users attach parameters to their links so they can mine robust analytics. These users were creating CSVs with thousands of entries and looking to upload links in mass. We built a Bulk Uploader to meet these users' needs.

Channel Attribute as a First Class Entity

Many of our users wanted to know how their links are doing across platforms; ie/ are their audience more likely to click on a facebook link or a twitter link? However, these comparisons are only possible in campaigns. We decided to add "channel" as a primary attribute on all links, thus allowing users to compare across platform on all future links.

 

04_Creating An Interface

Screenshot 2017-12-29 13.17.31.png
 

After compiling user feedback, defining use cases, and understanding product requirements, our design process is broken down into the following phases:

1. Concepting  // 2. Creating low fidelity mocks // 3. Gathering internal feedback // 4. Iterating // 5. Finalizing UI designs

 
 

1. Dropdown Navigation

Our new navigation accommodates premium features not available in the free product.

2. Filtered Campaigns

Using our existing filter pill design, allows users to display only select campaigns.

3. Expandable Campaigns

Bitly's UI displays a list of all campaigns, with associated channels nested below in an expandable window.

4. Bitlink Actions

Users have the ability to add or remove channels and bitlinks to existing campaigns.

5. Campaign Details

The right hand of the screen displays side by side graphs of channel performance. Further information is available on click of a campaign channel.

BBT2_Campaigns_Filtered_View Copy.jpg
BBT2_Campaigns_Megasheet.jpg
BBT2_Create_Campaign.png

Creating a Campaign and Adding Channels

The above image depicts the campaign creation flow. On click of the create new campaign button, a mobile optimized action panel appears on the ride hand side of the screen. Here the user enters the title and description. 

The user can either select and create channels through a search box or secondary action panel. Each channel appears as a pill.