Project Context

• Couchbase UX Design Internship 2023

• Deliverables:

  • Goldfish - user interface

  • Goldfish - instance setup wizard

  • Couchbase Capella - improved information architecture

• Timeframe: 6 months (July - December 2023)

• Team: Tejus Krishnan, Skylar Kurth

• Supervisor: Rob Ashcom

• Tools used: Figma

Deliverables

• Interactive prototypes and demos

• Design system

• User flows

• Mockups

• Personas

My role

• UI/UX Design

• Interactions & visuals

• Design System maintenance
  

Problem + Solution

<convert all this to a graphic>

Problem statement FOR Goldfish:

How might we enable users across the database management lifecycle to launch an OLAP environment, ingest data, and navigate and query that data?

Broader problem statement for Capella 3.0?

How might we integrate Couchbase’s new analytics product into a more streamlined information architecture for Capella, with fewer clicks and better lateral movement between app services?

Persona/Use case:

• John, BI analyst at Netflix

• Netflix needs a platform to ingest the vast amounts of data it stores on its users (viewing history, subscriptions, ratings, search history, etc.) and store it in a structured, multidimensional format. It wants to draw insights from this data to improve its content recommendation engine.

• John opens a project in Capella and launches his first Goldfish instance.

• Our wizard provides John an easy, linear process for setting up remote links to other data services and ingesting the collections stored there.

• Once John has set up all his datasources, he can view them in our sidebar. He can search for specific collections, enable and disable data streaming from any of the links, and add new databases and scopes to bring in more datasources and organize them into sections.

• John can perform queries on the data using the terminal, and utilize Capella iQ, our AI assistant, to construct queries. He can also convert his queries into views that can be accessed on third-party BI tools like Tableau to construct more advanced dashboards and visualizations.

Project Background

What is Couchbase Capella?

Couchbase Capella is a cloud-based database-as-a-service (DBaaS) that stores data in JSON and key-value format. It is primarily aimed at large enterprises that require a scalable, distributed database management system. Capella enables developers to use SQL++, a modification of the SQL querying language, to query data stored in JSON documents. Common user groups of Capella include project administrators, data scientists, and web/mobile developers.

What’s wrong with it?

The current information architecture of Couchbase Capella is confusing and misaligned with customer needs. Its features are arranged based on role-based access levels rather than the jobs actually performed by its users, leading to an interface with too many pages and too many clicks required to perform important tasks. With Couchbase planning to launch a new data analytics product within the Capella ecosystem, it was time to simplify the interface and design the new product in keeping with the updated UI.

<add tree structure IA diagram>

How are we changing it?

When I began my internship, the design team had already drafted a 3-panel layout for Capella designed for lateral movement between app services. All the querying tools were packaged into a “developer workbench” while all organization and project-level settings were sectioned off into a “control center” for admins to use. Goldfish, the new analytics product, was the third item we’d place in the layout.

About the new product

Goldfish is a real-time online analytical processing (OLAP) platform intended for real-time apps and operational intelligence.

• It is designed for complex analytical queries on large datasets using SQL++.

• Importantly, Goldfish supports the ingestion of data from multiple data services (such as Amazon S3 and MongoDB) via the creation of remote links.

• Goldfish also allows for the creation of tabular views - subsets of data derived from queries and arranged in rows and columns - which can be used as data inputs on third-party visualization tools such as Tableau and Microsoft Power BI.

• Goldfish also integrates Capella iQ, Couchbase’s new GPT-based AI assistant, to help users construct and execute ad-hoc queries. It is intended to evoke the look and feel of the wider Capella ecosystem.

Team/personal background

This internship was my first time designing an enterprise product. I have previously designed numerous consumer-facing apps for both web and mobile interfaces. I was also brand new to the field of databases. When I joined, Rob Ashcom, my manager and previously the company’s sole UX designer, had already created some basic mockups of both Goldfish and the proposed new architecture for Capella, laying the foundations for my design work.

Initial UI Explorations

My initial task when I joined Couchbase was to conduct some design explorations over the Figma mockups the team had already created for the updated Capella architecture. I focused my efforts on the developer workbench, AKA the central “console” for users to query their data. I compiled feedback from usability tests the team had conducted on university students studying computer science to identify pain points in the UI, such as certain functions that were confusing or difficult to find. I also drew upon my intuitions as a visual designer to make small improvements in spacing, border radii, and use of icons.

Crucially, very few of the UI elements within the workbench had been converted to components. Seeing as the workbench page served as a template for the Goldfish UI, I converted most of the UI elements into interactive components that could be nested inside one another to form major subsections of the page, such as the sidebar and query results. I also assigned styles to all color and text objects, and utilized Figma’s new Variables feature to enable seamless toggling between light and dark mode.

Workbench: Before

Workbench: After

I then went through a thorough audit of these explorations with the team to determine which UI changes to keep and commit to our design system, aiming to strike a balance between cognitive design principles, aesthetic quality, and the do’s and don’ts of enterprise software at large.

<expound on this more specifically>

Goldfish

The Beginnings

At a glance, the preexisting mockups for Goldfish (known as “Analytics+” at the time) resembled an upscaled version of the workbench, designed for larger datasets composed of both local and remote data. Additionally, whereas the workbench was confined to a single database (sometimes known as a “bucket”), Goldfish instances could house multiple databases. The work I had done to organize and beautify the workbench UI served as a useful starting point for creating a more high-fidelity interface for Goldfish.

Workbench v2

Analytics v0

The first and most important unaddressed question in the UI was: how are links created and populated with data? Seeing as links are the backbone of this entire service, the real question was: how are analytics instances themselves set up? I created some interactive explorations of setting up a new instance inline, but it became clear that the process of setting up an instance was too involved to simply embed within the existing interface. It required a dedicated flow to accomplish. And thus began the process of designing an instance setup wizard.