top of page
Rakuten Big Data Web Application

SuperDB

SuperDB is a big data web application that provides business analysts and data scientists the capabilities to easily ingest, transform and consume data assets, while aligning to the regulations and Information Security guidelines. 

 

 

Project Type / 

UI/UX Design

Group Work

 

Year / 

2018~2019

​

​

My Responsibilities

​Interaction Design

Wireframing

Prototyping

Usability Test

Visual Design

​

Platforms

Web

Design Process

process.jpg

Website Structure

structure

SuperDB platform consists of two products: Discovery and Pipeline. The current focus is the Discovery product. I worked with the product owner and manager to create the website structure based on user requirements.

Insights

Web Structure

UX Challenges

ux
Challenge#1- Classify Data Sets

What's the user's GOAL?

Update and enrich metadata for data sets and classify data sets to meet regulations.

What's the flow?

In the existing process, the most frustrating part is classifying countless table columns in an Excel sheet. The web application is designed to solve this problem by:

  • To allow the user to classify with an intuitive UI 

  • To allow the user to bulk upload the Excel sheets, review, submit online
    In this case, designing an intuitive UI becomes the challenge.

flowchart-classification-1.png

Classification-Flow Chart

Painpoints

  • Classifying large number of data sets (Classification times=columns X numerous tables) on a daily basis requires plenty of efforts and time

  • User tends to make mistakes in the current process (manually type in an Excel sheet) 

  • Lacking review process for the user to double check the classification

  • Missing feedback mechanism between approver and submitter 

Opportunities

  • Reduce the efforts of clicking and scrolling

  • Allow the user to classify data efficiently and without error

  • Allow the approver to give feedback on changes

  • Easy to preview columns data before classify attributes

#1 Wireframe

1wireframe
classification-flow.png

UI Classification Flow

Through the brainstorming and paper mockups, we divided this task into three steps: 

  • Enter table details (allow the user to input metadata)

  • Classify attributes (allow the user to classify all the columns from all the tables)

  • Review (allow the user to review the classification and submit)

1wireframe.gif

#1 wireframe for classify attributes

What worked?

  • Clear logic similar to Excel sheet: require less learning curve: allow the user to switch to another table by one click

What didn't work?

  • Really long page with horizontal scrolling

  • Easy to lose count among the columns

  • Limited space to preview sample data

#2 Wireframe

2wireframe
2wireframe.gif

#2 wireframe for classify attributes

What worked?

  • Clear process by introducing three-step wizard

  • Less horizontal scrolling compare to the previous version

  • Icon + text works better for decision-making 

What didn't work?

  • Horizontal scrolling (less but still)

  • Has to scroll vertically to preview the sample data

#1 Hi-fidelity Mockup

1mockup
1mockup-1.gif

#1 Hi-fidelity mockup-classify attributes

complete 2.gif

Detail animation

What worked?

  • Three dots sit next to each table name reflects the current process

  • A carousel-like component allows the user to switch to next column earlier

  • Added an "Apply to all" button that allows the user to copy the first column's input to other columns

What didn't work?

  • More clicks (switch to next column)

​​

​

#2 Hi-fidelity Mockup

2mockup
2mockup-1.gif

#2 Hi-fidelity mockup-classify attributes

From Horizontal to Vertical

After receiving feedback from our core users, we changed the design from horizontal layout to vertical layout. Originally, we wanted to keep the scrolling style similar to Excel so users wouldn't need to have a steep learning curve. However, user preferred to do vertical scrolling considering the daily workload. So we changed it to vertical layout and gained positive feedbacks.

mockup-final2.gif

Interaction details

Final Design for Classify Attributes

finaldesign
challenge2
Challenge#2- Search for Data

What's the user's GOAL?

  • Search for data assets with keywords

  • Browse data assets within different company/service/database, etc. 

  • Get metadata, security-related information for tables/columns

  • Request access to data 

What's the flow?

  • Based on the users' goal,  I came up with an idea that allows the user to have an ecommerce-like experience where they can put the data assets to "Data Cart". The process of requiring access becomes a similar process to "checking out" on an EC site. This pattern will reduce the user's learning effort and turn an unfamiliar to experience into a familiar experience. 

flowchart-datacatalog.png

Search for Data-Flow Chart

Painpoints

  • 7 levels of hierarchies makes it difficult to navigate/browse data assets

  • Difficult to browse table details/column details to make decision on which columns to apply access

Opportunities

  • Allow the user to easily navigate through 7 levels of hierarchies to browse/search for data assets

  • Allow the user to browse table details/column details 

mockup1-search for data

#1 Mockup-Search for Data

0.gif

#1 mockup for search for data

What worked?

  • Clear logic of showing details for each table/column

  • Easy to switch between table search and column search with tabs

What didn't work?

  • Too many levels in the company & service filter dropdown make it hard to navigate 

1.gif

#1 mockup for require access

What worked?

  • Clear logic of showing details for each table/column

  • Column format is consistent to classification function 

What didn't work?

  • Each column takes too much space, makes it more scrolling and less effective information on a page

#2 Mockup-Search for Data

mockup2-search for data
3.gif

#2 mockup for search for data

What worked?

  • Easy to navigate and filter through 7 layers of  databases

  • Easy to switch between table search and column search

  • More effective information on the page (more tables/columns are shown within the same space)

What didn't work?

  • The two search boxes on the top seems to confuse the user

4.gif

#2 mockup for require access

What worked?​

  • More effective information on the page (more tables/columns are shown within the same space)

What didn't work?

  • Hidden secondary column details require one extra click to review 

final design-find

Final Design for Discovery Find-Search for Data

Visual Design

visualdesign
Style Guide

For the visual design, I tried to compromise corporation design language for brand coherence. However, SuperDB is very different from most of the products developed in the company, I customized many components and icons following the same principle to be visually consistent.

Style2.jpg
Branding
branding

To design the logo, I tried to combine the letter "d" with the letter "b" to form a meaningful shape. In the following picture were the four final options that I sent out for a survey in the department. After voting, option4 won.

super db logo-8.jpg

Four final options of Logo design

superdb logo-1.png

Logo Mark

branding.png

Final Design

Logo Design Process

datacatalog-thankyou.png

Thank you!

bottom of page