A real-time analytics dashboard for developers to monitor, troubleshoot, and build with vector databases.
ROLE
Product Designer
TIMELINE
Summer 2023
TOOLS
Figma + React
SHIPPED AT
Pinecone.io
PROBLEM
The index analytics dashboard is the most used feature of the Pinecone Console. It's essential for onboarding, setup, and troubleshooting an index – but users frequently complained it was confusing and hard to use.
Were changes to their index successful? Was it even turned on? They had no idea.
My goal was to revitalize the dashboard, and give the Console a "heartbeat" to help users quickly check the health and performance of their index. I also overhauled the Index Details page, used by over 100,000 users, to create a modular and flexible foundation for future product updates.
USER INTERVIEWS
Developers want real-time feedback about their indexes
I assumed our highly technical on average users wanted an analytics dashboard for curiosity and deep data analysis. But after talking to users and internal engineers, I learned the most common use for the dashboard was to quickly see if everything was working properly and to confirm that any changes were successful.
Troubleshooting, monitoring, and analysis were still important to them, but these weren't the reasons they checked the console every day.
This makes sense – our users are technical, but they pay for Pinecone so they don't have to spend time managing their database.
Troubleshooting and data analysis are important, but not everyday tasks
The charts on the current dashboard are confusing, laggy, and hard to read
KEY INSIGHT
User's want to quickly see the status of their index and if everything's working properly. They're looking for a heartbeat to check if Pinecone is alive and well.
I just want to see the vector count and if it’s going up
MACHINE LEARNING DEVELOPER
I don't want to write more code to know if my data operations worked
SENIOR SOFTWARE ENGINEER
CHALLENGE
Build analytics that give developers quick feedback and actionable insights
Pinecone provides mission critical infrastructure for tens of thousands of production apps, and developers need to be able to monitor, debug, and troubleshoot any issues as quickly as possible while they're developing.
Our dashboard leaves a lot to be desired.
GUIDING QUESTION
How might we provide meaningful metrics and information to developers to help them monitor the status of their database and troubleshoot errors without overwhelming or confusing them?
USER JOURNEY
Refresh, check, refresh, check, refresh…
I mapped potential user journeys to find points of friction, like right after creating an index or after adding data.
Users could end up in frustrating loops of checking and rechecking, not sure if what they did worked. This reinforced our desire to focus on giving clear, instant signs that the index is healthy and working.
DESIGN AUDIT
The current dashboard has most of the right pieces, but it doesn't tell a story
The control-plane of the Pinecone platform is tracking thousands of metrics at all times. My job as a designer is to work with user's to find the right metrics to tell the right story about each user's index, so they can quickly and easily take action.
To explore the current design, I wrote a Python script that simulates a user interacting with a Pinecone index and seeds the database with data. This filled the charts with real data so I could experience using the console as though it were a production app.
Data lags behind and charts need to be manually refreshed
Tooltips block data, making it difficult to analyze trends
Tooltips block data, making it difficult to analyze trends
Tooltips block data, making it difficult to analyze trends
DESIGN AUDIT
The current dashboard has most of the right pieces, but it doesn't tell a story
The control-plane of the Pinecone platform is tracking thousands of metrics at all times. My job as a designer is to work with user's to find the right metrics to tell the right story about each user's index, so they can quickly and easily take action.
To explore the current design, I wrote a Python script that simulates a user interacting with a Pinecone index and seeds the database with data. This filled the charts with real data so I could experience using the console as though it were a production app.
Data lags behind and charts need to be manually refreshed
Tooltips block data, making it difficult to analyze trends
Data lags behind and charts need to be manually refreshed
Tooltips block data, making it difficult to analyze trends
DESIGN AUDIT
The current dashboard has most of the right pieces, but it doesn't tell a story
The control-plane of the Pinecone platform is tracking thousands of metrics at all times. My job as a designer is to work with user's to find the right metrics to tell the right story about each user's index, so they can quickly and easily take action.
To explore the current design, I wrote a Python script that simulates a user interacting with a Pinecone index and seeds the database with data. This filled the charts with real data so I could experience using the console as though it were a production app.
Data lags behind and charts need to be manually refreshed
Tooltips block data, making it difficult to analyze trends
Data lags behind and charts need to be manually refreshed
Tooltips block data, making it difficult to analyze trends
LOW-FI WIREFRAMING
Exploring all the ways to play with data
I began with low-fidelity wireframes, exploring line charts, tooltips, and quick stats. I experimented with different chart types, interactions, and time window selectors to make the data more intuitive and actionable.
Note: I lost the original copy of these wireframes, but was able to salvage a HANDFUL OF THEM IN single low resolution screenshoT. I upscaled IT using the open-source AI project ESRGAN before extracting each WIREframe. There's some artifacting, especially around the text, but HOPEFULLY IT STILL GIVES A SENSE FOR MY WireFRAMING pROCESS.
Exploring Chart Types
Chart Legend
Tooltips
Chart Interactions
Redesigning the Index Details
The Index Details page is the main entry point for users to monitor their database health. I redesigned it to highlight the Vector Count graph, which now updates in real-time and includes a pulsing endpoint to indicate an active, healthy index.
I organized the information into modular sections to accommodate future product changes and provide structure to the data-rich information. The modular design makes it easy to modify and extend for new features and ensures that the page remains uncluttered and focused on the most critical information.
Final Design
Real-time, auto-updating graphs for instant feedback
Intuitive time window selector to monitor with precision
New legend filtering and hover interactions to solo data
Glanceable data with enhanced labels and tooltips
Flexible, modular Index Details ready for new features
Before and After
Wins
I watched a user successfully check their index's "heartbeat" using the new design while they were working on a project, confirming we achieved our goal
Maintaining a laser focus on surfacing the most important information for users, minimizing clutter and maximizing usability
Ideas for the Future
Exploring more advanced interactions and animations for data exploration, further enhancing direct manipulation and user engagement
Making the design responsive and handling zero-state scenarios with informative no-data messages, despite current technical limitations