MarbleAI's first native experience
Overview
MarbleAI is an early stage startup that helps non-technical individuals (those who don't know how to write SQL or Python) access and analyze data with AI. People who use MarbleAI were previously using Excel or relying on others (like data analysts) to gather insights and perform their tasks. This tool gives them freedom to access data independently and do it 10x faster.
When I started working with the MarbleAI team, they had already launched an MVP, but it was built with third party components and had limited functionality. They were in the process of understanding the primary needs and problems of their users, as well as figuring out what to enhance and in which direction to evolve the product.
I partnered with them to help evolve their MVP from a static chat interface, into their first fully native product solving the needs and pains identified in customer research.
My role
Product Designer
Mission
The objective of this work was to evolve the product into it’s first native experience.
Timeline
December 2023 - February 2024
The current product
In the video below, Grace, co-founder and engineer, shows the MVP experience they had in place when we started working together. It was built on a plug-and-play interface (Streamlit) that left little room for customization to address the customer pain points.
The objective of this work was to evolve the product into its first native experience.
Research Stage
We used interviews as the primary research method. The audience consisted of professionals from operations teams (Ops, Product Ops, ReveOps) and data teams (Data Scientists, Data Analysts, and Product Analysts).
Throughout this phase, we gathered insight from 100+ user interviews, as well as offline feedback (emails) from users of the MVP.
Gathering insights
I reviewed the entire documentation of all the user interviews, as well as attended ~25 of them, and identified common themes that were repeated the most, and grouped them under 5 categories to address in the design process.
The 5 different themes to address
Chat
history
The MVP was an ephemeral chat interface, and the chat history was lost every time a conversation was closed. Users often wanted to update analyses rather starting a new one from scratch every time they used the tool, so a lot of duplicate work was being created.
We probed deeper into why people were using the tool: It was for reporting. Copying and pasting outputs elsewhere was a burden, and also a missed opportunity to offer a more complete product where users could complete all their jobs to be done in one place.
Creating reports
Collaborative environment
Users had to share their findings internally, whether it was with their manager or someone more technical (e.g. to validate a analysis that was being used in an important decision), but there was no way for them to do.
The tool provided code snippets for review purposes, but power users found them overwhelming. The interface would quickly fill up with a lot of information that they may not necessarily need to review every time. For non-technical users, it felt intimidating.
SQL explanations
Editable charts
When the charts from the tool didn't meet the users's expectations, they wanted a quick and easy way to edit, update or customize them, such as changing the chart type or updating the colors to match their company's branding in their presentations.
Ideation process with
"How Might We"
After defining the most pressing pains, I used the "How Might We" exercise to come up with more specific questions about the users's experience and potential solutions, using low-fidelity sketches. Below, I show design recommendations.
Recommended solutions
& key decisions
01
HMW make analysis available for users after they closed or finished the conversation?
-
A home page with recent chats and other docs
-
A chat screen where users can find past conversations easily on the left side
02
HMW make report generation easier for users within the same tool?
-
A notebook feature where users are able to add charts or answers they got in the chat conversation
-
AI generated charts in the notebook section
03
HMW facilitate seamless sharing of findings with the team or stakeholders?
-
One-click shareable content (the entire conversation or specific tables or charts)
-
Users can add their team or stakeholders to their reports or other documents an will be able to collaborate with the comment feature
04
HMW make SQL instructions available but less overwhelming?
-
Open and close button in case the user wanna review instructions
05
HMW make charts editable?
-
Add a customization section where users can edit and go back to the chat conversation with the changes made
The user flow
First, I created a user flow diagram to understand the step-by-step process of the experience for both the chat and the new notebook interface.
.jpg)
Understanding the user flow further with paper wireframes
Chat experience
Home with recent chats, notebooks and menu bar on the side
Chat screen with recents on the left, upload data at the top, and edit/share options
Edit chart screen. Customize your chart on the right side
After customizing, users go back to the chat UI
Notebook experience
Notebook with formatting menu options, and recent docs on the left side
Add recent charts in the notebook section
Add charts with AI by typing what is needed, right on the notebook UI
Share notebooks with team, comment, and collaborate
Bringing ideas to life with low-fi Figma prototypes
Home and chat experience
This chat experience starts from the homepage. Users can input data, start a conversation, and quickly edit their charts, saving time and reducing manual work. Recent chats can also be easily accessed.
Chat experience
In the chat UI, users can upload tables, analyze them, and extract data and insights. Users that want tor review the code can open the snippet, and those that don't can and keep it collapsed.
Notebook experience
In the notebook UI, users can analyze data using AI, create new charts or add existing ones, and put it all together in a report, all in one single collaborative environment, where their team and stakeholders can view, comment, review, or edit.
UI Kit
Color Palette
#5188F4
#9F6BF5
#282828
#A1A1A1
#F4F4F4
#5188F4
30%
#A1A1A1
30%
#F5CA32
30%
Fonts
#F9F9F9
Iconography
Components
Unlocking other insights through the design process
During the design process, we continued conducting interviews and identified two new insights that were incorporated into the design process.
In the example video, one can notice that having to scroll up to reference data tables as the chat grows, makes for a very clunky user experience. The longer the chat grows, the further one is from the data source of truth (tables and columns). This was especially painful for power users who made dozens of questions in the chat and had to constantly scroll up to reference the data they were using
01
Browsing data tables and columns
Existing tools as Excel or Tableau, allow users to navigate complex issue trees to edit and customize a chart. Some users have grown accustomed to this, but it is burdensome nonetheless. We introduced conversational chart edits to help users change the look and feel of their analysis using natural language.
02
Conversational AI-enabled editable charts
Incorporating feedback and opportunities in my final designs
01
Improved and simplified workflows
Updates from previous iteration:
-
A cleaner home page UI to easily find and access recent files
-
A new workflow to add data, and a data catalogue to quickly reference data tables and columns
-
AI-enabled conversational chart edits, in addition to the conventional formatting method
Enhancements to the Chat UI
02
Changes relative to the lo-fi prototype include:
-
Easy copying of code snippets to run complex code in code editors
-
The data 'download' button, previously located below the table as a chat component, now integrated with the chat to save space and clean up the UI
03
Powerful, flexible, data Notebooks
Updates incorporated:
-
Redesigned look and feel: Moved away from the Chat UI to its standalone, dedicated interface
-
Improved discoverability of notebooks with a new search bar
-
Customizable screen views to expand, collapse, and switch to other notebooks easily
Graph widget in Notebooks
04
Identified opportunities to streamline the work done on notebooks:
-
Users didn't realize they could create graphs in notebooks, so we added a AI component, activated with "space bar" at the start of a paragraph, to help users notice the feature and access it more easily
-
Improved visual experience with a fullscreen option
A closer look at the final product
Adding data and browsing tables & columns
Building graphs with conversational AI
Filtering data and downloading files
Flexible Notebook interface
Core UX for Notebooks
Importing data into notebooks
Creating graphs with conversational AI in Notebooks
Learnings
Working with an AI product was a great learning opportunity from a design-thinking standpoint, as users interact more freely and in a less structured way with the product, and this creates design challenges stemming from multiple modes of engagement with a single feature.
To address this, I had to be very thoughtful about intended and unintended ways that users could interact with the product, and be vigilant of how I could simplify those experiences. For example, power users would ask more questions, in turn making the experience more clunky, as they would have to scroll all the way to the top of the chat to reference the data sources. This was solved by pulling the data sources out of the chat experience, and building a separate table explorer that sat on the side of the conversation.
Next Steps
The engineers at MarbleAI are currently working on implementing these designs, and once we finish this project, we'll introduce dashboards to the experience.