RxBenefits: Data Mapping Module
Scope and Personnel
Project
Data Mapping module for use in Financial Analysis application + future applications that need this functionality.
Team
- 1 UX Designer
- 1 Product Manager
- 1 Data Analyst
- 1 Engineering Architect
- 2 Developers
- 1 Scrum Master
Tools
- Figma
- Lucidchart
- Jira
- Confluence
Lean UX Design Process
With our aggressive timetable, we used a Lean UX approach with heavy emphasis on protoype testing. Project requirements shifted dramatically throughout the process so we tested with prototypes frequently.
"The world's second most popular React UI framework." Chosen by RxBenefits' Engineering team for it's large and flexible controls.
Storybook is not only a solid component library, it is also useful as a way to build a robust and usable design system. We worked with the front-end engineers to keep Storybook updated with the latest controls and responding code.
Project Goals
Business Challenge
Large datasets had to be imported manually, which was an arduous process that took a long time. Additionally, the process was prone to mistakes that were difficult to debug.
Business Solution
An automated data-mapping application with the ability for users to transform the data to match the targeted data type. Also the flexibility to make revisions after mapping.
Automate the Data Mapping Process
The system needed to be smart enough to map data columns based on similar column names and data types. If there are mismatches, the interface needed to call out the columns that didn't match so that the user can figure out whether their data either needed to be adjusted before re-importing, or if they wanted to make adjustments within the app after import.
Make Customization Easy and Intuitive
If there are data mismatches, it should be easy to make adjustments so that the app can transform the data to match up. The methods used by the frontend should be intuitive, using pre-existing patterns familiar to RxBenefits users.
Ability to Make Revisions After Data is Mapped
After import, any data that doesn't conform needed to be known to the user so that they can make adjustments further into the process. If they don't adjust the data, the user should know the degree to which the data is accurate so that they can better understand how to use the results.
Research (Lean UX Process = Think)
Research Similar Implementations
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".
User Interviews
We conducted several demo interviews with the Financial Analysts and Strategic Pharmacy Analysts, recording the sessions, then rewatching the sessions and taking notes.
Internal user persona, Senior Sales Executive
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, which gave us the data types that we would typically need to match:
What We Learned
Our Sales Team Spent Way Too Much Time Matching Data
Before creating a sales proposal, our Sales Team had to rely on the technical expertise of a small group that were technically saavy enough to match data types in a spreadsheet. If a proposal takes too long, a sale could be lost.
We Needed a Custom Solution
We researched whether we could use a third party SaaS implementation before deciding that we needed a solution that we could customize for our specific needs.
Creating Controls from Scratch Would Take Too Long
We needed to use our pre-existing library to speed up development. Building custom drag-and-drop components would slow down our launch date considerably. Additionally, our testing showed that our users found that drag-and-drop was confusing for this use case.
Design (Lean UX Process = Make)
Whiteboarding
I worked with the Engineering Architect and Director of Engineering to refine the Data Mapping functionality on the whiteboard before beginning the wireframes.
Program Flow
We created a detailed flow of the Financial Analysis application so that we conceptualize how all the pieces fit.
Wireframes
I collaborated on wireframes with the Engineering Architect. We created several versions, then met with the Product Owner to refine functionality. Initially, we tried a drag-and-drop approach but after walking through it with the business, we determined that it needed to be a more traditional approach.
Prototyping
Each phase of prototyping revealed potential improvements and flaws.
Test (Lean UX Process = Check)
Testing
While the backend was in development, we tested the frontend with users using prototypes. From here, we only needed to do some fine tuning. Final Screens from the prototype below:
Landing Page - Claims Home
Upload Data File Modal
Mapping Interface
Data Import Summary
