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.
Why Did We Build It? Who Did We Help?
Analysts and business people use dashboards every day to share business critical insights within their organizations. Periscope Data only supported storytelling through charts on dashboards.
Our users wanted to be able to share additional information with their audiences through copy. Custom text annotations was a highly requested feature that I had a chance to lead.
Timeline
August 2018—October 2018
Team
UX Designer, PM, Engineering Lead
Uncovering Business Users' Stories:
Together with a PM, we reached out to users who have requested the feature. We learned their use cases, workarounds and requirements.
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, Testing and Visual Design
A lot of work in Periscope happens in the code editor. We had a hypothesis that our users may prefer to add the text via Markdown language. We disproved that hypothesis during user interviews. Most of the ideation on this project focused on:
1) Adding a text box to the dashboard
2) Writing and formatting the text
3) Text box interactions in context of the dashboard
4) Text button placement
Drawing a text box.
Exploring interactions, layout and visual design.
Interactions
Dashboards are packed with interactions—from data rich tooltips, annotations to searching and editing. By introducing a new object to the canvas, I had to ensure that all the components would work in a consistent manner.
Later, we were looking at incorporating query-based copy in the text box through a modal.
Visual exploration of the WYSIWYG component.
Users can draw on the empty areas of the dashboard canvas. We were considering allowing users to draw between other objects, but the development of that would exceed our deadline.
Internal testing and release
We released the feature internally and gathered feedback through a dedicated slack channel. Additionally, we organized a contest for Periscopers to create the best dashboard.
Later in the process, I collaborated with engineers to make sure that the working solution is following the design and we were addressing any edge cases we might have missed.
After releasing the feature—called Data Discovery—to our users, the PM and I joined feedback calls in order to identify areas of improvement.
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 had great adoption with 80% of enabled accounts using the annotation feature.
Formatting text
Lessons and Challenges
Lessons and Challenges—Interactions
Introducing new interactions, such as drawing and editing on a dashboard, needed to feel natural with our core experience. Additionally, the text box creation and editing couldn't follow established product patterns, so I needed to create new harmonious experiences. We have also learned that our data analyst users, while very technical, enjoyed some aspects of point-and-click experiences.
Bigger Picture
The feature took us closer to a more fulfilling workflow, however it also highlighted that we needed to take a closer look at the aspects of 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.