Case Study: Privacy Conscious Bookmarking & Discoverability

A modern interface for self-hosted, privacy conscious bookmarking and discovery.

Client
Open Source Project
Date Completed
2019
Duration
3 months
Role
UX, Visual, Development

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?

As great as these open-source projects are, their free nature can result in a lack of usability and slower feature implementation at times. It was my goal to take a design first approach to both the visual aspects and functionality improvements. A key aspect I identified during my research was the need for better "re-discoverability" of previously saved bookmarks.

With this in mind I decided to focus on 6 key benefits:

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

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

The first idea I explored was a method to visualize textual content. This would be based on the frequency of certain phrases in your saved content.

Saving content

Next I explored creating 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.



Discover

What good are bookmarks without the ability to re-discover what you have previously saved? The discover page gives you direct access to your most frequently read topics as well as Clio recommended topics to explore.

Discover Home
Discover Home

Topic View

The primary topic view incorporates articles and bookmarks from all your sources in an easily searchable interface. In addition to this, articles can be quickly viewed, read, and listened to.

Article View
Article View

Article w/ Player
Article w/ Player
Collections Home
Collections Home
Topic Search
Topic Search

Visualization Graph

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

Visualization Home
Visualization Home

Visualization Searched
Visualization Searched
Visualization Article
Visualization Article

iOS Designs

Next up, I started work on the mobile version of the Clio application. Specifically I focused my initial efforts on the iOS version while keeping in mind much of this would need to be transferable to Android OS also. It was important to maintain feature parity which was successfully accomplished in the latest design iteration.

The mockups below provide visuals for what will be the base of the initial mobile applications.


Discover
Topics Index
Topic View



Save Bookmark
Article View
Audio Player



Visualization Home
Visualization Search
Splash Screen

Retrospect

Personal knowledge management is something that I've struggled with for a while. What to save, how much to save, how to retrieve it, how to handle images and video, are just a few of the questions I've yet to find a perfect answer for. Clio is my attempt to solve a small portion of this problem, archiving and retrieving primarily text based content, for myself and others I've found with the same problem. This project allowed me to apply UX principles to a topic I'm passionate about and allowed me to dust off some old front-end and back-end development skills at the same time.

Managing the entire process from research, to ideation, to visual design, and finally development proved to be a daunting task but valuable nonetheless. One of the problems I encountered was that scope creep started to present itself and needed to be managed. Adding new shiny features often comes at the expense of improving the existing experience. This was an especially interesting dilemma as the sole person making each decision. Focusing on the research, specifically the user survey responses and compiling requests from discussion boards help anchor me into what was important. After settling on a suitable feature list, I was able to quickly iterate through multiple design decisions and receive valuable critiques at each stage from my small feedback group.

Future steps:

  • Recruit participants to run usability test on current MVP version.
  • Expand the current ideas for content re-discovery, especially the visualization graph.
  • Create further mockups of additional functionality that was not part of the MVP.
Thank you for reading.
View the next project while you're here...
Next Case Study Reimagining the Omnichannel Contact Center Experience

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.