Case Study: Privacy Conscious Archiving and Bookmarking

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

Client
Clio
Date Completed
2018
Duration
2 months
Role
UX, Visual design, Product design

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 Process

Key deliverables from the process

Defining Success

What does success look like?

I approached this design project with the goal of creating a unified, modern interface to facilitate the search, consumption, and saving of content. It was important to reduce the number of interfaces a user would have to visit while facilitating the use of their preferred bookmark tool.

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.

Findings

Archiving and privacy are growing concerns

  • 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.

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.

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.

Content visualization

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

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.

Article Actions

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

The Design

Visualizing the Final Idea

After iterating on the sketches for a couple days, I jumped into Adobe XD to incorporate color into the proposed visual layout and heirarchy. I also worked on developing an attractive, yet subdued color scheme.



Notebooks

The initial screen shows the notebooks you have created. From here you are able manage your notebooks including what bookmarks and content will be displayed under it.

Notebook View

The primary notebook view incorporates bookmarks and content from all your sources and allows them to be searched and read easily.

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.


Retrospect

The first iteration of this concept covered the basic desktop experience and delved into some cool data visualization ideas. It was a fun exploration into different ways to explore archived data. In the future I want continue exploring different methods to visualize article content and saved bookmarks.

Future steps:

  • Design a mobile app prototype
  • Expand on the ideas for re-discovery of saved content
  • Explore the idea of actionable bookmarks

Let's make something awesome.

I'm always open to new and interesting products. Feel free to contact me.
I’d love to talk about how we can work together to make your project or idea a reality.