Case Study: Privacy Conscious Bookmarking & Discoverability
A modern interface for self-hosted, privacy conscious bookmarking and discovery.
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.
Key deliverables from the process
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:
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.
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:
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.
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.
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.
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.
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.
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.
Content should be the main attraction so I explored ideas on how to minimize the visual distraction of several article actions.
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.
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.
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.
The final solution involved an interactive keyword map weighted based on the frequency of occurrence within users’ saved content.
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.
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.
- 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.