Zach Steiner
Aug 10, 2015


  • UX
  • Design
  • Javascript


The Problem

Administrators of data systems often have to import data files or accept data from third-party systems. Import cuts down manual data entry, but data is rarely clean or current. This results in conflicts in records. Resolving these conflicts is typically a tedious process of finding and manually fixing conflicts. However, algorithmically merging has considerable risks involved. Typically, resolving conflicts requires a person's approval to ensure data integrity. It's also a relatively risky task because most databases join records in a destructive manner. Once the submit button is pressed the records are forever together.

Intended User

HR staff that administer a large corporation's employee management system.

This Concept

This interface concept demonstrates a method for merging duplicate records when importing data from a file or another data system. In this example, a user imported an Excel file of employee information. There are multiple suspected duplicate employees. Duplicates without differences can be merged at the click of a button or en masse. Those with differences—maybe "Bob" versus "Robert" or a transposed number in a employee number—will require walking the user through a guided merge process. The result is a process that helps the user feel comfortable the resulting data is clean by providing feedback and transparency through the entire process. Despite being a manual process, the interface gives a clear path and empowers the user to quickly make informed decisions. Typical merge operations are destructive, but this method (through a hypothetical, probably NoSQL database) creates a new version of the employee record linked to the previous two, so that merging/separating can be non-destructive. Thus, a user can abandon or undo work as needed through the workflow.

Note: The interactive prototype is intended to demonstrate interactions. This demo does not save information between pages, either client-side or in a database. It is purely to provide an overview of a interface solution to common data system workflow. Refreshing pages or using the back button will not remember state as a real application would

Executive Summary (tl;dr version)

  • Users sees a list of suspected duplicate records with percent match. User can merge 100% matches and resolve conflicts.
  • Users sees a quick overview of conflicts between the records they are merging.
  • Users resolve conflicts in a guided process by using mouse, touch, or keyboard.
  • The final merged record is shown before saving it. The merge can be undone immediately or at a later date.

Read the full description

Technical Information

This concept was built with HTML, CSS3, JavaScript/jQuery, and SVG. Works in modern browsers that support SVG and Flexbox. Browser support aided by Autoprefixer. Grid system is Bourbon Neat. The demo is responsive, so phones are welcome. Typeface is Work Sans. List filtering is provided by List.js. Icons are from Material Design Icon Set. Source Code is available on Github.

©2020 Zach Steiner