Clarity

Overview

Clarity is a personal information management tool that helps individuals track, review, and create connections between all the important content they consume. Rich data visualizations engage users in their own data and help them build a coherent worldview. Users can use Clarity to share important perspectives, organize their thoughts, and better understand how their opinions are formed.

Clarity is a side project started in 2017.

Role

Project management
User Research
UX
Visual Design and Branding
Front-end implementation

Collaborators

Julian Tescher (Engineer)
Heather Harvey (Engineer)

Timeline

Currently in private alpha
Started in Mar 2017

Early concept prototype

Research

We became interested in building this tool through our own frustrations with finding systems to properly retain and utilize important information.

Foundational research included reading about the field of Personal Information Management (PIM), both within the context of Human Computer Interaction and in less digital spaces. This helped us understand an individual person's holistic needs for PIM, as well as the unique problem space our product addresses. We also interviewed an expert to gain a better base knowledge of the space, and sent out a foundational survey to a small group of people.

If you're interested in PIM, this paper provides an interesting, in-depth overview of the field.

User problem

Through talking to others, we found that there were a couple of core issues that kept coming up:

  • What are my opinions, and how do I explain and validate them?
  • How do I retain, organize, and utilize all the complex information I come into contact with?
  • How do I organize different types of content (blog posts, books, etc) in one central space?

These questions helped us focus our solution around content organization and utilizing interactive visualizations to make data more engaging and useful.

Explorations

After developing a basic problem statement, I started with sketching, user stories, and prototyping to get a feel for the direction we wanted to take the product. A lot of my initial sketching was done collaboratively and used as a framework to discuss the foundational vision for the product.

Data Visualizations

A big focus for the product is helping people utilize and understand their personal information. One direction I wanted to explore was using interactive data visualizations that not only would allow users to understand how their information was connected, but also give users the ability to explore the data and navigate to new pieces of information.

I developed a basic framework for how to display a user's data including color palette, logic, and interaction guidelines.

I decided to use bubble charts to help users visualize their data in novel and engaging ways. Bubble charts allow users to understand how different pieces of information are connected, as well as explore the characteristics through filtering. The backbone of our data visualizations are built using D3.js.

Early prototypes are shown below.

Project Management and collaboration

With three people working on this project, one of whom was remote for the duration, we knew we needed to create systems to manage timelines, improve on process, collaborate, and communicate. We used agile workflows as a jumping off point and a number of tools to help us organize everything. Some of the tools and process structures I set up for the team included:

  • Agile methodology: We followed a general agile workflow, including utilizing regular standups, weekly sprint planning, and retrospectives. We met weekly via Google Hangouts to reflect on our week, talk about challenges, and plan for the week ahead.
  • Trello: We used a standard kanban framework to organize our workflow, and Trello to keep track of all the moving pieces. Labels were created to keep track of engineering vs. UX tasks. We assigned individuals to specific cards and used a backlog board to keep track of any feature ideas.
  • Github: We used Github to review PRs and collaborate on the codebase.
  • Slack: Slack allowed us to get quick feedback and ask questions, especially when working with our remote teammate. A number of integrations helped us increase visibility across the team, including a Zeplin integration that showed when mocks were updated and a Github integration to alert teammates of the need for a PR review.
  • Zeplin: Zeplin is a redlining tool that helps with collaboration between engineers and designers. We used Zeplin to organize our mocks and link to specific flows within the project.
  • Remote pairing: Whenever we needed to quickly pair on an issue or get something reviewed, we used Screenhero or Google Hangouts.

Landing page

I put together a basic landing page for the product using SCSS and JavaScript.

Clarity is currently a work in progress. More updates coming soon.