Clicktree API Builder

clicktree-api

Our intent with Clicktree was making a directory of APIs for content rich websites, which would allow our customers to distribute and monetize their content, while also detecting and protecting web scraping. 

Our product empowered partners and affiliates to design APIs from web content by establishing a virtual, secure connection to share a website's content with third parties. We provided  API analytics so that customers could understand who was using their API, how often their content was accessed, and how valuable their content would be.

At the same time, we analyzed traffic logs and applied machine learning algorithms to track web scraping activity so content-owners could maintain control over who could access their data. On Clicktree, developers were able to access APIs built on top of a web application to access a website's content. With the API builder, they're able to understand a website's structure and the type of data they would receive on different types of pages. 

GOAL

To support our mission, we needed a way for users to access a website's API documentation and understand the calls they wanted and needed to make to get the content they wanted. We also wanted to make sure the APIs made sense to less technical users, so we decided to build a "site content" tool, which allows users to see what data they're getting from each call. Aside from the API documentation, a large part of the product was showing our customers who was accessing their API and surface and block potential scrapers through an analytics dashboard.

MY ROLE

As the only designer on our small startup team, my job was to work through information architecture and design a UI to support our business goals, while also creating marketing collateral and our pitch deck.


DESIGN PROCESS

Narrow Down the Problem

After conducting interviews with potential users and area experts, we brainstormed how we could use both web scraping detection and API development to improve the content distribution landscape.

Building the System

After we settled on the idea of building flexible APIs content-rich websites, we spent time mapping out our ideal system. We started by building and testing the web scraping detection part of our product to validate the need for our API builder. From our pilot customers, we found that a surprising number of visitors were bots. 

Designing the UI

With a few pilot customers we determined the required functionality and features. After that, I began sketching and iterating on a UI design, which we refined with our customers.


Final Design

With our final product, we deployed an API solution for content-rich and e-commerce websites instantly, empowering their partners and affiliates to design APIs from their content. Developers can choose the specific content they want to see in a customized API and Clicktree then deploys this API. The structure of finding content is flexible, based off of the site map for the customer's website. In the example below, Listnerd allowed users to use the content populating their "discover" section, by search, or by access a specific list. Users can see the different types of data and view what content is received after a specific API call.

With our analytics dashboard, we help our customers understand the make up of their web traffic and help them work towards increasing the percentage of their traffic made up of real users and eliminate web scraping through our API deployment.

Reflections

Although Clicktree did not work out as a business, I learned a lot about how to build a product from scratch in the real world. In design school, a lot of our projects were tackling interesting problems, but lacked the realism of real world products. There was little attention to business plans or sales cycles, which made it easy to build unrealistic, overly complex systems with a lot of contingency issues and too many stakeholders. While our product might not have found it's market at the right time or with sufficient functionality, content matters.

BONUS MATERIALS!

To get a better sense of how we framed our product, check out the final pitch we presented at Plug and Play.