RxBenefits Data Mapping Module
Overview
While we were planning our Financial Analysis Application, we needed a way to import data from different sources. Data mapping is how you match data from those different sources. For our application, we will be importing spreadsheet data in either CSV (comma-separated values), Excel, or by other values separated by other symbols (; |, etc.).
Because this functionality could be used by other applications, Engineering decided to build this functionality as a separate application.
Role:
As Lead UX Designer, I worked with a Product Owner to flesh out the functionality. I also worked with the Engineering Architect on the basic wireframes.
Tools:
- Lucidchart for initial wireframes
- Figma for additional wireframes, comps, and prototyping
Problem
Data mapping is complicated for most users. We needed a way to make matching columns (fields) from a basic spreadsheet to the data that the application expects as a simple process. Some of the fields will need to be transformed a bit to make the data match up.
Solution
For the first iteration, we had most of the heavy lifting done on the server, based on server-based configuration files. The transformations were limited to trim and replace. The design is from our Ant Design component library.
UX Research
There are many great articles that provided great information. One of the best articles was provided on Smashing Design by Suzanne Scacca, "Designing An Attractive And Usable Data Importer For Your App".
Users
We conducted several demo interviews with the Financial Analysts and Strategic Pharmacy Analysts, recording the sessions.
Discover/Define
Initially we determined that we would be matching the data to be used in the Financial Analysis application. The Product Owner provided definitions for all the data in the Financial Analyses:
We used these definitions to better understand how much the data may need to be transformed within the UI.
Wireframing
I worked through much of the functionality with the Engineering Architect (a very smart and funny guy :)) as wireframes before moving to Figma:
Program Flow
We created a detailed flow of the Financial Analysis application so that we conceptualize how all the pieces fit.
.png)
Then I broke down the Data Mapping functionality into a Task Flow to make it much easier to visualize the steps needed for data mapping only.
Design
File upload and data preview:
After several iterations, we finally settled on a simple approach with the imported columns on the left and the expected columns on the right. A transform button renders whenever transformations are needed.
Clicking the transform button opens a drawer where users may simply choose which column to transform, the transformation needed, and the text/integers to apply the transformation.
Users may then save the configuration for future use. The configurations may be loaded before the data is analyzed.
After the transformations are applied, the app displays the results of that transformation in a Summary/Defaults interface indicating auto-calculations applied to allow a successful analysis to be run. It also lists any data that could not be read successfully. In this case, the data is handed off to the Financial Analysis application. From here, users may change the date range used for running the Financial Analysis.
Prototype
We tested the transformation prototype with our users and engineers to make sure that the transformation drawer functionality made sense:
Key Takeaways/Lessons Learned
Our initial wireframes/designs for the data mapping module were way too advanced for the users that we targeted. We simplified the data transformations so that they would be more intuitive. Additionally, we simplified the experience so that our development team could build the module much faster than it would have taken using drag-and-drop and other complicated patterns. We ended up moving the transformations to the drawer control because this pattern had been used in many other parts of the application. Implementation was so much simpler than our original vision.
We launched the data mapping module on time, ready for use inside of the Financial Analysis application. The design will also work for other implementations where the data mapping function will be needed. Feedback was very positive, especially from the business, our main targeted group of users.
