Bitly: One View
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.
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.
Create a clean and effective Campaign feature that mirrored our previous product while improving upon current functionality.
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.
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
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.
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.