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):
- Publishing a dataframe from the Notebook
- Adding the Notebook data to local data connection, which would be available in the SQL editor
- 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.