CashFlowTool Standard Forecast Mode

Mode Notebook: Dataframe to Chart Builder Flow (WIP)

Company

Mode

Team

Team of 1 PM, 1 designer, 1 researcher, 2 front-end engineers, and 3 back-end engineers

My Role

Interaction Designer

Timeline

October 2022 — On-going

Tools

Figma

Background

Mode is a tool offering a central hub for an organization’s analysis, uniting data teams and business teams around data to drive business outcome. As the lead designer on the Notebooks team, I drove design decisions for the Mode Notebook product area. The Notebook offers an intuitive interface for writing powerful Python and R to analyze data.

Even though Mode offers a powerful data visualization tool with the Quick Charts builder and Data Explorer, this tool has only been available for data created through SQL queries. As we have learned about growing interest from users throughout the year, the team decided to embark on an initiative to bridge the Notebook with the visualization tool.

How might we allow users to import Notebook dataframes into the chart builder and create visualizations?

Process

Discovery

To deeper our understanding of the problem, we first conducted 5 user interviews with experienced Mode Notebook users. The interview questions focused on participants’ general usage and preference with using data from the Notebook.

The analyzed findings confirmed some of our assumptions and reiterated on the user requests that we’d consistently got prior to this project. Our most important conclusions were:

  • 3/5 participants often use the notebook to create data visualization.

  • 3/5 participants have always wanted a no-code way to quickly generate visuals; they wish they were able to access Notebook data in the Mode visualization tool.

  • All participants prefer a workflow where dataframes are imported into the chart builder, as opposed to having a visualization interface within the Notebook.

Ideation

With the findings from our discovery stage, we started developing the solution by creating low-fidelity wireframes. In this phase, we focused on building a user flow from creating a dataframe in a notebook, to making it available in the visualization builder.

We tested out various approaches with different interactions and layouts.

Early wireframes for different user flows (from top to bottom):

  1. Publishing a dataframe from the Notebook
  2. Adding the Notebook data to local data connection, which would be available in the SQL editor
  3. Clicking a button to create a chart from a dataframe within the Notebook

We eventually moved forward with the concept of exporting dataframes from the Notebook to make them available for users to manipulate in the visualization builder. This approach was chosen based on its balance between a user-friendly quality and technical feasibility.

After we finalized the overall user flow, I started creating more polished mockups to add higher fidelity to details such as button labels, icons, and tooltips.

During this stage, we specifically had a lot of discussion on the language of the call-to-action button, i.e. the key interaction that makes the dataframe available in the chart builder. We wanted to ensure the label to stay consistent with our product writing guidelines and with other terms used across the Mode product, while appropriately addressing the interaction.

We temporarily settled on “export,” as a placeholder, but this label required further discussion, as it could insinuate taking the data outside of the Mode product altogether.

MVP Design

After rounds of iteration, we finalized an MVP design, which we intended to use for both an initial round of user testing and MVP implementation. This design focuses on 3 main aspects of the experience: the creation flow, removal flow, and data states.

With the key findings, we discussed among our teams to iterate and make incorporate necessary changes into our design system.

Creation Flow

From within a notebook cell, a user can easily click “Export output” to choose the action to “Export as dataframe.”

They would then be prompted to name the exported dataframe, and see it appear on the left navbar.

The ability to name a dataframe helps users distinguish among different dataframes created from the same notebook.

Clicking on the dataframe name in the navbar opens the dataframe view, which offers 3 tabs: data, fields, and source. Each tab offers a unique aspect of the dataframe, helping users quickly determine the available data and source code.

Removal Flow

To ensure flexibility for the workflow, we offer users 2 ways to remove an exported dataframe. They can:

1. Remove it via a context menu in the left navbar

2. Remove it with the “Export output” button on the Notebook toolbar. The “Export output as dataframe” acts as a toggle that allows an export or remove action based on an output’s current state.

Data States

To help users quickly identify an output cell’s state and avoid unnecessary errors, we included icon identifiers and tooltip explainers throughout the experience.

Each output cell whose dataframe has been added to the chart builder would display an icon associated with its exported state.

When the output cell has an error, which could result from a code or runtime issue, the exported dataframe automatically falls back to the last successful run. This is to help minimize disruption in a user's workflow and prevent errors in dependencies of the exported dataframe.

In this case, a warning icon, coupled with a tooltip explainer, offers clear guidance for users to clearly understand this state.

Next Steps

I left Mode shortly after the design for the MVP were finalized, so I unfortunately wasn't able to witness this project being fully realized. At the time, our next steps were to implement the MVP and conduct user testing with a prototype of this design.

Our user testing plan was to conduct cognitive walkthrough sessions with Mode Notebook users and use the think-aloud method to identify strengths and weaknesses of the MVP. We planned to give participants scenarios with tasks related to exporting a dataframe from a notebook and using the available data to build charts in the visualization tool.

With the findings from the research, we aimed to polish the user flow and ensure a smooth learning curve for existing Mode users, since it would be a new experience within the Mode product. As this feature has been an ask from many customers, I have high hopes that it, once fully implemented, will eventually serve as a powerful tool for analysts to bring data to life.