Clio Case Study

A modern interface for self-hosted, privacy conscious bookmarkers and archivers.

Client
Clio
Date Completed
2018
Duration
2 months
Type
Web Application

Overview

Privacy conscious internet users are increasing day-by-day with each revelation of data breaches and intrusive advertising mechanisms. Privacy is becoming a feature unto itself today. In response to this demand dozens of open source, self-hostable web applications have been developed to fill this need for privacy and data security.

While these applications frequently perform on par with SAAS based applications they suffer from a unique disadvantage. Because of the separation of the projects, the user interfaces and overall user experiences are different for each application. There is an app for bookmarks, another for saving articles, one for your blog, and yet another for note taking. Each of these apps are well crafted for their intended purpose, but each offers a different interface, API, and user experience. Add to that list the desire to self-host software and the problem magnifies.

Design goals

I approached this design project with the goal of creating a unified, modern interface to facilitate the search, consumption, and saving of content. I wanted to create one single interface by utilizing application APIs, a single in-application add interface, and a bookmarking widget to provide a consistent and enhanced save interface which would aid in knowledge location and retention.

Secondary Research

What are the common complaints and desires?

To jumpstart the research process, I browsed some of the most popular online communities in which people discuss self-hosted software and offer solutions and recommendations. I combed through postings and discussion forums on Reddit, Quora, Github, and Hacker News. This process resulted in dozens of useful facts and insights about what these users needed and shortcomings they find in the current tools available.

Survey findings

How do users like to manage their bookmarks?

Continuing the research process, I developed an online survey consisting of 16 multiple choice and 2 write-in questions. I posted this survey on a few of the most popular self-hosted online communities. In total I received 33 responses with the key findings including:

Competitor Analysis

What features are currently available in the market?

Lastly I conducted a competitor analysis of the most popular open source and paid product offerings. I engaged in an exploration of each product to get an idea of how each product functioned and their feature offerings.



What I learned:
  • Self-hosting aficionados care about owning their data.
  • Browser extensions and mobile apps are a must have.
  • Many are worried about losing access to online content in the future.
  • There is a growing concern about the privacy implications of using mainstream services.
  • Saved content re-discovery is important when having hundreds of thousands of bookmarks.

Personas

Who am I designing for?

Based on the research I performed I developed three personas which embodied the behavior and characteristics of the most common needs I uncovered.

Jobs to be Done

What do users need to do?

Next I explored some of the common tasks that users would desire to accomplish using the application. Some of the use cases were the user wanting to save an article and annotate, saving an article to read later, and organizing research for dissertation.

Jobs to be Done

Task Analysis

Finding the right flow.

After developing a high level overview of the jobs users need to perform I selected a couple of those jobs to break down using a task analysis diagram.

Task Analysis

Sketching

Exploring some concepts

Next, I started the design process by sketching out some initial ideas and concepts in a Rocket Book. To expand the possibilities, I initially stayed away from standard ideas to see what kind of creative solutions I could come up with.

Saving content

The first idea I explored was a unified saving interface. Since users may use multiple applications to save their bookmarks, a single interface can streamline the process.

Bookmark Flow

Content visualization

I then explored methods to visualize textual content. This would be based on the frequency of certain phrases in your saved content.

Content Visualization

Article Actions

Content should be the main attraction so I explored ideas on how to minimize the visual distraction of several article actions.

Content Visualization

The Design

Visualizing the Final Idea

Searching and Consuming

A unified save interface that is consistent across in-app and bookmarklet allows users to easily save their bookmark in their preferred application. Users are also provided extended functionality to enhance productivity.


Bookmark/Content Visualization

Final solution involved an interactive keyword map weighted based on the frequency of occurrence within users’ saved content.


Streamlined Bookmarking

A common complaint of many users was that each application they used had a different saving process. Clio solves this by integrating with each application’s API and providing users with a single interface.