Data ETL UX Design

This case study illustrates how I redesign a data analytics ETL (extract transform and load) UI to address user pain points.

Target Users:
Data Producer
Data Engineer
Data Scientist

Join UI

Current UI Pain Points

Through our routine sync ups with users, there were 3 pain points of the current layout:
1. The data transformation editing panel is too narrow.
2. The rendering of the sample data table siginficantly impacts perforance.
3. Once user edits the transformation, s/he no longer has the visibility of the transformation stages.

Ideation Sketching

In order to address these pain points in the redesign, I started with pen and paper sketching, to explore as many options as possible to work around the UI real estate and performance issues.

Low-Fidelity Wireframing

I created low-fidelity wireframes, to present different solutions to my stakeholders, primarily engineers, to ask feedback and evaluate implementation cost.

User Interviews

With the help of my fantastic researcher, we conducted 8 in-depth 1:1 interviews with our ETL expert users, and demoed the new layouts to them. We got very positive feedback of how the layout and interaction changes could help solve the three pain points we identified early on.

Final Deliverables

After collecting users' feedback and internal engineering team's recommendations, I modified my design, and generated the final high-fidelity mockups. I presented the final design back to all internal and external stakeholders, and delivered the design specs for implementation.

1.Edit Join transformation - config area will be displayed with pipeline panel together.

2.Validation stage is a SQL based UI, with data rendering on the right

3.Filter transformation is a GUI based condition builder UI

4.Union transformation requires a lot of real estate for configuring

5.User can expand the Union config panel to full width

6.Edit Join transformation - user can collapse the transformation stage panel

7.Manage Fields transformation - user can see the right side data got updated in real time (WYSIWYG)

8.Transformation outcome mode remains similar to the current layout

9.User can switch from data table view to data list view

❮ ❯

Back To Top