Design For

Data Mapping Page

4 weeks


UX Designer | 6 people 

(2 Product Owners & 3 Engineers)


Design Goal

How Might We

Help Business Analysts improve work Efficiency?

Primary User - Creator


Secondary User - Viewer

I made some exploration to display the latest changes in the system. Each approach shows information from different perspectives. Which kind of visualization can help BAs and ENGs have a clear and intuitive understanding of what happened to the system would be the most effective one.

Activity logs

Weekly Changes

Quick Access

Users' Needs: 
Quick navigate to the right location

Business Analysts (BA)

Use the platform to process data management


Acquire information from the platform then code to implement


What Is Data Mapping & Transformation?

Data Mapping is to identify the relationship between target elements and source elements, then build relationships between two elements. Data transformation is to define the relationship identified during data mapping.

Data Mapping


Building the Relationship


Data Transformation 


Defining the Relationship

How Business Analysts conduct data mapping right now?

Here is the example of how they do the data mapping using Excel. First, they selected two lists of data, one has already been pasted into the file as a template, the other used as a reference to find the right elements and then copy and paste into the right rows.

"We need to do all the input manually. It's too time-consuming."

Primary User

Business Analysts

Unclear Responsibility among Business Analysts

  • No methods to track who changed the data

  • Unnormalized mark methods

Challenge 1

Global-View For Data Mapping OR NOT?

Business Analysts proposed they would like a global view

"We want a global view to see the big picture. Unlike Excel, limited within two tables. "

Primary User

Business Analysts

Unfriendly to secondary users: Engineers find it hard to read

Business Analysts expressed their urgent needs for a global view when doing data mapping, for a global view would allow them to learn more context and do the mapping accurately and efficiently. How Engineers oppose the idea for "That is a nice to have feature, not a must to have". And it would multiple the technology efforts we need to devote and may take much more time than we expected. But the most convincing one is "It's hard to read!"  Engineers need to read all the info from the window and translate them into code. Information presented in the window is overwhelming and chaotic for Engineers to understand the relationship between different elements. This will cause extra effort for them to digest the information.

"Yeah...It's a fancy feature. But we don't have enough time. Also, it's hard to read!"

Secondary User


Achieve An Agreement: Two Tables Each Time

After discussion, we reach an agreement that two tables for mapping in one window with a clear information hierarchy. From the wireframe we can see, users can easily tell the differences between the target elements, source elements, and attributes. Business analysts can also make transformation rules when they finish the mapping of each element.

Clear Information Hierarchy

Easy To Make Comparison

Challenge 2

Drop-down is the best approach for data mapping?!

Engineers already developed a simple prototype using drow down approach

Engineers have already finished a simple prototype and they persuaded us that drop down is the best approach to do the data mapping,  for minimal technology efforts and a clear relationship between the target elements and source elements.

Dropdown becomes a new headache for a large amount of mapping

I conducted usability testing for 20 elements and 40 elements mapping using two different approached: Excel and dropdown. And I found out that we do the mapping for a small number of elements, dropdown enhances efficiency a lot, however, with the number increasing, the efficiency decreases significantly and becomes a new headache for Business Analysts.

Task 1:  Map 10 elements (sum: 10 elements)

2min 19s


10 elements

With the increase in the number of elements, work efficiency will higher for there are few options left

100 elements


With the increase of the number of elements, work efficiency will lower since for each mapping you will the same options again and again, the number doesn’t change

Task 2:  Map 10 elements (sum: 100 elements) 

Most BAs gave up at the 3rd or 4th selection 

  • Scroll issues

    • If the mouse cursor is outside of the drop-down, users will most likely scroll down the page instead of the drop-down, hiding the drop-down options from the screen.

  • Lack of overview

    Overwhelming numbers of options can be bewildering and intimidating

    • Hard to navigate

  • Inconsistent UI

    Cause friction with other information

    • Introduce unnecessary friction into the checkout process by hiding information that could simply have been exposed.

Hover to view the drop-down menu

We held another round of group discussion trying to find out a better solution which keeps the balance between user experience and technology constraints. In the end, we decided to choose the draw line approach as our final solution for minimal technology efforts, efficient mapping, and better error prevention.

Reach an agreement: Draw lines


Draw lines


Challenge 3

Re-understand Workflow: From Mapping to Transformation

However, from the usability testing, we found out that the mapping efficiency is lowered for scrolling up and down frequently to find the hidden elements out of the window. Also, Business Analysts rarely check the attributes of the elements when doing the mapping. The redundant information will cause friction and distraction. Business Analysts don't need to learn everything to conduct the operation. Full disclosure is less helpful than just the key pieces of information that are most important in this scenario. But when doing the transformation, all relevant information is necessary for rulemaking.

I need to see more elements on one screen. I don't need to see attributes all the time.

Primary User

Business Analysts

Data Transformation

Hover to view what Information is needed for 

Data Mapping

Challenge 4

Drilling down to the finest details

Different line styles to differentiate the strong or weak relationships.

Full/Solid line — a strong relationship

Dashed line —  a weak relationship

Greyline — Hidden relationship

For better accessibility, I conducted A/B testing for multiple versions and came up with the final version as below:

I really like the letter "M"
to notify me once I mapped successfully.

Business Analysts

Option 1:

Color the background 

Option 2:

Letter "M"

Option 3:

Reversed Letter "M"

Final Design

Select target and source data
Successfully Mapped
Hidden Transformation Panel
Name of the Table
Hidden Mapping
Transformation Panel
Dashed line to indicate a weak relationship
Expand for additional information when  making transformation rules
Checkbox to replace typing

View Other Projects !




© 2020  by  Scarlett  Wu - All rights reserved.