top of page


Database Console Design


The project is part of my summer internship experience working at Ant Financial(Alibaba Group Company), the biggest FinTech Company in China. 

In six weeks, I worked with a design mentor, PM, software developers, and front-end developers to design a new database console for OceanBase Database in Alibaba Cloud.

The main goal of my team is to streamline the database set up, operating, and scaling process. To optimize for simple, seamless, and consistent user experiences, we designed a database management console and integrated features from 7 existing internal products.

* Due to the NDA, dummy data are used to present the design

​​Link to Slides



User Research

UI/UX Design

Wireframing and User Flows

Visual Design 


2 UX designer, 1 PM, 2 engineering teams


Released beta on Sep. 2019


OceanBase is one of the best distributed relational databases in the world. OceanBase management console makes it easy to set up, operate, and scale OceanBase in the cloud. Learn more about OceanBase

Before I joined the company, OceanBase only provided service for internal users(DBAs within the company), they were using seven non-user-friendly products(OceanBase Product Suite) and even command line to operate the database. While I joined the company, OceanBase was developing its public cloud version for the first time. Thus, a new vision evolved: to create a simplified and efficient technological environment for companies across the globe.

While the original product suite served internal users for 7 years, the new one had to serve external users from all over the world. The new one should be simple, secure and scalable tool making it as easy as humanly possible for companies to manage their servers and databases. The entire tool had to be re-designed from scratch.

Design Goal

01 To create a simple web-based database management console that was going to make the working life of DBAs simpler & more productive

Before OceanBase database console was brought up, OceanBase only provides services for Ant Financial itself, users of OceanBase are the DBAs within the company, they use 7 different non-user-friendly in-house products and command line to set up and operate the database in the cloud. Those in-house products were created by engineers and without any usability testing and had little consideration for the technical and product limitations on the scope of work. We cannot integrate those products directly. Thus, we have to design a simple web-based database management console that was going to make the working life of DBAs simpler & more productive 

Group 111.png

02 To create a database management console that follows users' mental model, though OceanBase has a different hierarchy from traditional relational database.

The traditional relational database that most of the users are using is constructed with only Cluster and Database. Compared to the traditional relational database, Oceanbase has 3 layers of hierarchy, from Cluster to Tenant, and then to the database. Therefore, it is important to help users rebuild the mental model easily.

Overview final.png

Dashboard - Helping users

uncover the problematic clusters within minutes

The new OB management console needs to help uncover valuable cluster performance insights within the minutes in order to find deeper problems in the tenant.

Cluster List - Checking the cluster information at a glance 

Users can create a new cluster from the common buy page and then check cluster information as well as act on those clusters in a simple and clear way.

2.2 集群列表.png
Create Tenant.png
4.5 集群_工作台_租户.png

Cluster workbench - Manage the tenants in clusters easily

Users can create a Tenant by simple clicking.


Users can check or manage all of the tenants or nodes within the cluster in the cluster workbench. 

Design Process

How I address the challenge?

design process.png

Though there were tons of documents about the database, related products, and a ton of user feedback in the form of various docs.

It is hard for me to understand the concepts and figure out the user flow. Our team decided to do user research in different user groups (both large enterprises and small businesses) to understand how they use similar products.

Final Design Overview

Welcome Screen - Avoid the mind gap

Changing the database is troublesome. The welcome page helps new users understand the whole workflow of using OceanBase by telling users the whole user flow. Help Center is the strongest backup for users.

1.1 概览_新用户.png

User Research

Identifying User Needs and Business Requirenments

The goal was to create a simple database management console from scratch that would work for global clients from large enterprises who need tens of clusters and hundreds of Tenants to small businesses with only one cluster and a handful of Tenants. To create something for everyone, we risked helping no one. There needed to be constraints to prevent this from happening. Also, due to the technical complexity and unclear constraints around different user roles, we have to remap the features.  So we did a whole load of user research to decide on which targets to aim at. 

屏幕快照 2019-09-15 下午2.59.12.png
屏幕快照 2019-09-15 下午2.59.29.png

Visualizing user flows to get everyone on board

The project has 20+ engineers and only 2 designers. Engineers consist of database core developers, database product suites product developers and front-end dev. Those developers always claim "Users only care about the features, they wouldn't complain once the product has advanced features ". However, due to the complexity of this project, we needed to decompose them into a set of scenarios to help us, engineers and other stakeholders understand them. Therefore, I invited engineers and targeted users to create the visualized user flow and shared among engineers, PMs, and our target users.  It turned out to be very helpful for making a complex workflow simpler. 

By creating the user flow, we identified key moments in the lifecycle of the database, establishing a shared vision with stakeholders and revealed pain points and key features early in the product development process.

user flow.png

Based on the user flow, we identified the 3 user roles, below are two examples of personas.

Desktop HD.png
Desktop HD Copy.png


A day in the life of a DBA is hard

Database administrators (DBAs) are under tremendous pressure every day to deliver value to the business across a variety of fronts. However, DBAs are expensive.


For large enterprises, they have money to hire enough DBAs. Large enterprises own multiple businesses and plenty of databases. Thought they have experienced DBAs, it is still difficult for DBAs to detect performance problems in businesses. Most of the time, DBAs have to spend a whole day to solve a specific performance problem.


Because of the high cost, small businesses lack DBAs,  sometimes, there are only a few DBAs or even only Developers who have no experience with database maintain the databases of the whole company, they find it difficult to get started when creating and maintaining the database.

Identifying features 


User flow also helps us to identify key features and the screen to focus on first.

Low fidelity prototype

Wireframing the solution

We selected key features with PM and quickly created some basic wireframes to gather feedback from PM, developers and the users on the overall layout and information architecture.




Low fidelity prototype

Validating the designs

We created paper prototypes based on the wireframes we built, tested with users and went through several rounds of design critique with the design team. During the testing session, I observed how they interacted with the prototype to define any errors within our prototypes and reveal more specific details of the pain points in the DBAs’ workflow.

​Information Architecture Iteration

OB Console 2.png

The information architecture we think

OB info architecture 1.png

The information architecture users think

At first, we designed information architecture based on our understanding, but after user testing, we asked how users think of the information architecture and then modify it. For example, we put Monitoring, Suggestion and SQL under the Diagnosis at first, because we thought users would click Diagnosis first to find any problems in their database and then check the monitoring. However, users claimed that checking monitoring was a daily routine while checking diagnosis was not. So we moved Monitoring to a higher layer.

Design Iteration Highlights

Welcome screen for new users

1.1 概览_新用户备份.png
1.1 概览_新用户.png

Dashboard for returning users


List vs Table

CLuster compare.png


Menu compare.png

Hi-Fi prototype

Design in Alibaba Cloud Tone

I created my high fidelity mockups in Sketch and then imported them into In-house demo tool to allow the engineers to inspect the file and export the HTML and CSS code.

I worked very closely with the Front End team to spec out any missing interactions that were not covered in the high fidelity mockups. I conducted a UX review of each front-end ticket that was implemented to ensure it was aligned with the designs before it went live.


Interaction Map

interaction map.png

Design System

The hifi prototype is based on Ant Design system developed by my team, which is a design system with values of Nature and Determinacy for the better user experience of enterprise applications. Part of my job was to iterate and design more components for generalized enterprise product scenarios.

Design System.png


01 Create a strategic plan to launch an MVP 

  • This helps deal with out-of-scope requests that could potentially derail the project and helps deliver a quality product in time.

02 Cross-team Communications

  • Involve engineering upfront. This helps to reduce any rework later on as an understanding of the technical limitations upfront will help to inform your design strategy. Incorporate the ideas and thoughts across the teams, and draw a line for what should be prioritized for the core users in my design solution. 

bottom of page