Alibaba
Database Console Design
OVERVIEW
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
ROLE
User Research
UI/UX Design
Wireframing and User Flows
Visual Design
TEAM
2 UX designer, 1 PM, 2 engineering teams
STATUS
Released beta on Sep. 2019
Background
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
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.
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.
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?
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.
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.
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.
Based on the user flow, we identified the 3 user roles, below are two examples of personas.
Systhesis
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.
Wireframes
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
The information architecture we think
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
Dashboard for returning users
List vs Table
Menu
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.
Deliverables
Interaction Map
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.
Takeaways
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.