My experience designing a flagship new release for Couchbase, a NoSQL database management company, during an 8-month internship.
My project here was successfully shipped and launched to the public in September 2024. It was previously announced at AWS re:Invent 2023.
Overview
Project Context
Design Manager: Rob Ashcom
Timeframe: July 2023 - February 2024 (8 months)
Products: Capella Columnar, Capella iQ
Tools used: Figma, Slack, Jira
Deliverables
Interactive prototypes + demos
Upgraded design system
User personas
Information architecture
My Role
UI/UX Design
Interactions & Visuals
Design System
Usability Testing
Context
What is Couchbase?
Couchbase is a NoSQL database product for businesses to store and manage their data. It stores its data in the schemaless JSON format, which can handle a wider variety of data types than traditional relational databases. Its original offering is known as Couchbase Server.
Couchbase uses a querying language called SQL++, a modified version of SQL that allows developers to easily query JSON data.
What product did I work on?
Couchbase Capella is Couchbase’s cloud-based database-as-a-service (DBaaS), which allows businesses to launch NoSQL databases on a variety of cloud providers including AWS and Azure.
At the time I joined Couchbase, the company’s top priority was launching Capella Columnar, a new real-time data analytics service for Capella. It enables developers to run complex queries on larger volumes of data pulled from remote databases. It was to come with a host of new features such as data ingestion and generative AI integration.
My job as a designer was twofold: introduce this powerful new service to Capella, all the while overhauling its existing UI architecture to be more user-friendly.
PROBLEM STATEMENT
How might we design a real-time analytics service for Couchbase Capella, while simplifying the information architecture of the existing service?
My Work & IMpact
Over the course of my time at Couchbase, I got to design a number of key workflows that made a major impact on the overall Capella product ecosystem.
COLUMNAR UI
I played a pivotal role in the design of Capella Columnar, Couchbase’s real-time analytics service, designing end-to-end flows for cluster setup, data ingestion, and data management. The product was announced at AWS re:Invent 2023.
GENERATIVE AI INTEGRATION
I helped integrate Capella iQ, a generative AI tool, into Columnar, enhancing its design and functionality based on cross-departmental collaboration and feedback.
DESIGN SYSTEM OVERHAUL
I conducted a comprehensive design system audit, leading to a more cohesive design language across Couchbase’s products.
WORKBENCH IMPROVEMENTS
I enhanced the visual design and usability of the developer Workbench, incorporating user feedback to optimize spacing and icon usage.
REFLECTION
My internship at Couchbase was one of the most personally transformative experiences of my life and career. Here are some of the key takeaways I had from this project.
What did I learn?
Read on for a full-length breakdown of the
design process and deliverables for this project.
DESIGN PROCESS
Over my 8 months at Couchbase, each of my projects was a highly collaborative and iterative process, shaped heavily by feedback from a variety of stakeholders.
Design Deliverables
Starting Point:
Capella 3.0
Prior to my joining Couchbase, my manager Rob Ashcom was already working to simplify Capella’s convoluted architecture, an initiative he called “Capella 3.0”.
This new design served as the baseline for all my work.
Capella: Old Version
The previous release of Capella was designed and implemented largely by developers themselves, resulting in a UI that was functional but difficult to use. Key functions were buried in subpages inside subpages, with too many layers of changing breadcrumb navigation. It was like a kitchen with different floors for each station.
Capella 3.0: Version 1
My design manager Rob Ashcom had created a simplified architecture for Capella, which served as the baseline for all my project work. The updated framework was optimized for lateral movement between Capella features and services, with the query workbench given a simple three-panel layout for data navigation, querying, and assistive tools.
I. Design System + Improved Workbench
Outcomes:
1. Rounded up all components into a robust, organized design system on Figma.
2. Improved the workbench UI based on feedback from prior usability tests, incorporating better spacing and icons.
Deliverable A: Design System
I conducted a comprehensive audit of all the components in the redesigned workbench, and committed them to an organized, scalable design system on Figma. I also used features like Auto Layout and Variants to clean up and organize the components so that they were scalable, dynamic, and reusable.
Deliverable B: Workbench Cleanup
We had recently conducted usability tests of Rob’s workbench on computer science students. Based on their feedback, I conducted a detailed visual design tuneup of the workbench, optimizing spacing and icon usage to make the UI cleaner and more comprehensible. I also used Figma’s Variables feature to create a Dark Mode design. This exercise laid the foundations for the rest of our design system, and gave me a better understanding of the Capella platform and its various functions.
II. Columnar
Outcomes:
1. Developed a robust, comprehensive wizard for cluster setup and data ingestion.
2. Designed forms for ingesting data from several data providers (including AWS, MongoDB, and MySQL.)
3. Integrated generative AI assistant (Capella iQ) into Columnar UI.
4. Product was successfully announced at AWS re:Invent 2023.
Full Flow
The following is an end-to-end prototype that combines all the individual flows I designed for Columnar into a single demo of its capabilities. The user journey breaks down as follows:
Part I. Instance Setup + Data Ingestion
Create an instance (a parent database housing all data)
Choose a data source hosting the data you plan to stream into your instance, from a list of available providers
Establish a link to that data source using its required credentials
Create JSON collections in your instance, corresponding to the data housed in your source
Repeat steps 2-5 to create other data sources (links + collections), then launch your instance
Part II. Main Columnar UI
Use the sidebar to navigate the data in your instance. You can sort the data either by the links streaming the collections, or browse the collections themselves.
Use the query workbench to query your collections, and view the results in various formats
Use iQ (our AI assistant) to turn your plain-language questions about the data into queries
Full end-to-end prototype I designed for Columnar, from setting up a data source to running queries on JSON collections.
Deliverable A: Instance Setup Wizard
I started my work on Columnar by designing a wizard to create an instance and populate it with data. I created a flow that lets you select a data provider from the list of supported platforms, and use simple form fields (rather than code) to establish links and create JSON collections. I added an instance preview panel on the right to show users what their data sources look like within the Columnar sidebar. I worked extensively with our product management team to iterate on the wizard design.
The four-step wizard I designed for ingesting data via links to remote datasources.
Deliverable B: Data Ingestion + Navigation
I designed unique form fields for each of the six supported database platforms from which users could ingest data into Columnar: Couchbase Server, Couchbase Capella, Amazon S3, Amazon DynamoDB, MongoDB, and MySQL. I regularly consulted with engineering leaders on our core development team to ensure that all the forms contained accurate credentials for each of the above platforms. I also worked extensively with the design team to prototype an interactive sidebar to navigate data.
Deliverable C: AI-Generated Queries with iQ
I integrated Capella iQ, Couchbase’s new GPT-based generative AI assistant, into the Columnar UI, designing flows for generating both sample data and contextual queries based on plain-language prompts. I also collaborated with Rob to give the iQ UI a visual cleanup.
iQ home page.
iQ annotates results and lets you perform actions on them inline.
Deliverable D: Tabular View Builder
I worked extensively with the core development team, as well as database expert Mike Carey (a consulting chief architect at Couchbase) to develop a multistep tool for creating tabular views: subsets of data organized in table format, which can be exported to BI tools like Tableau and Microsoft Power BI to run analytics and create visualizations. The target users were data scientists and BI analysts, who typically perform this process using code. I spent a lot of time with the team understanding Couchbase’s key/value data storage system in order to create this flow.
III. iQ Explorations
Outcomes
1. Updated the visual design and functionality of iQ based on stakeholder feedback.
2. Made several exploratory enhancements to iQ’s functionality, such as explaining code blocks, defining keywords, and toggling between a Q&A and SQL++ generative mode.
Towards the end of my internship, I met with several Couchbase engineering directors to plan out how iQ’s capabilities could be expanded beyond simple query generation. Over a week, I researched AI copilots across platforms like Microsoft Office and Salesforce 360, and designed two exploratory flows each introducing a powerful new feature to iQ.
Exploration A: Explaining Code Blocks
I designed a flow allowing users to highlight code blocks and then have iQ explain their function in simple terms. This was intended as a first step in a broader set of annotation capabilities for iQ.
Exploration B: Q&A Mode
I updated iQ’s UI to toggle between the existing code-generation tool (which I dubbed “SQL++ mode”) and a “Q&A mode”, where iQ would function like a traditional chatbot and answer questions about Couchbase’s platform and database concepts at large. I also designed a “Define Terms” feature within Q&A mode, intended for users who may be familiar with database concepts at large but new to Couchbase and unfamiliar with our specific parlance.
IV. Other Explorations
Outcomes:
Created exploratory prototypes for several Capella functions:
1. Query Monitoring
2. Doc Viewing
3. S3 File Browser
Naturally, we had a number of hanging items left in our design roadmap over these 8 months, and I spent the final weeks of my internship designing UI elements to fill some of those gaps.
Exploration A: Query Monitoring
I designed a UI state for query monitoring, which allows users to track the speed and success rate of their queries on Capella. This feature existed within Couchbase Server, albeit in less visually comprehensible form. I created a clean, color-coded table view for query monitoring, which would reside in a tab next to the querying terminal.
Exploration B: View Docs
One glaring missing feature from Columnar was a CTA to view the JSON data stored in a collection. You had to manually run a SELECT * query on a collection in order to view its contents, which seemed absurdly inefficient. I designed a flow where users could right-click a collection, select “View Docs”, and see the data in both tabular and JSON format in a new tab. I also made it so users could detach the tab as a floating window, so that they could have the data visible on the side while running queries on it.
Exploration C: S3 File Browser
Among the six data source providers in Columnar, Amazon S3 was an outlier, in that it’s just a storage service for data in various formats, rather than a specific, optimized format that requires a Kafka connector to stream into your instance (as is the case with other databases like MongoDB). As such, the engineering team had long wanted a visual interface to browse and select files within S3 rather than having to manually obtain each file through code, so I made the following design: