Data Mapping Page
UX Designer | 6 people
(2 Product Owners & 3 Engineers)
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.
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.
Building the Relationship
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."
Unclear Responsibility among Business Analysts
No methods to track who changed the data
Unnormalized mark methods
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. "
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!"
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
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)
With the increase in the number of elements, work efficiency will higher for there are few options left
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
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
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
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.
Hover to view what Information is needed for
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.
Color the background
Reversed Letter "M"