Custom Text Annotations

 
 
 

Custom Text Annotations on Dashboard 

annotations

Our users were requesting a way to annotate data on their Periscope dashboards, so we built a rich text widget that was well-received and adopted by 80% of users.


Background

Periscope Data is an analytics platform that helps data analysts answer critical questions. Charts on dashboards enabled our users to share their work, however they were unsatisfied with lack of support for more narrative formats. We saw many feature requests asking for rich text formatting in our product.

da

Persona—Data Analyst

Data Analyst (DA) creates advanced analysis, models data and can manipulate data with Python or R. They make the data accessible to the data consumers and business users. 

 
 
 

Working with data

  • writes data definitions

  • builds data models

  • creates ETL pipelines

  • discovers new data relationships

  • on average spends 6+ hours working with data

Responsibilities

  • interpreting business requests

  • translating business requirements to data terms

  • enabling Business Users to self-serve

  • ensuring data correctness

  • data reporting


Problem

No support for annotations that allow users to provide storytelling around dashboard data.

 
 

Process

Research
Through user interviews we discovered that:
• users did not want to use (learn) Markdown, preferring WYSIWYG interfaces
• users wanted to be able to add and edit the text in context of the analysis


User Stories 
As an analyst, Rebecca is responsible for sharing weekly analysis with the leadership team, which she distributes over email. She needs to provide a summary of the report and context around data.

As an analyst, Brian is building a report that contains multiple sections to improve the dashboard consumption. Brian needs to style the copy to add visual hierarchy to his report.

Wireframes and testing

A big focus when wireframing was around introducing new interactions to already interaction rich interface. After locking a direction in place, I worked on the visual design aspect of the project.

Exploring adding the text as a part of a dropdown button (adapting current components)

Exploring adding the text as a part of a dropdown button (adapting current components)

Visual exploration for adding the components

Text annotations in new text editor (following the flow of adding a chart)

Text annotations in new text editor (following the flow of adding a chart)

Creating text box; set box size for placement with options to resize later

Introducing edit mode, where adding chart, text, spaces and moving objects is a part of one experience

Introducing edit mode, where adding chart, text, spaces and moving objects is a part of one experience

 

Inline editing

Challenges 

Interactions 
Introducing new interactions, such as drawing and editing on a dashboard needed to feel natural and harmonious with our core experience. 

Bigger Picture
The feature takes us closer to a more fulfilling workflow, however it also highlights that we need to take a closer look at the storytelling and report creation in general. There are future plans to introduce different workflows (ad-hoc analysis vs report) that will be addressing the issue.

Business Results

The feature was received with great enthusiasm, with comments such as:

"I love it! Everyone lost their sh*t here in the <company name> offices. Thanks! <3”

"You're holding Text hostage from me, aren't you.”

“Just wanted to say I’m so glad that the text box feature rolled out!

The feature has a great adoption; 80% of enabled accounts have been using the annotation feature. Please see below the gif & screenshots showcasing the feature:

Drawing text box

Inline editing

Changing text colors