Image
Top
Navigation

RelateIQ Data Import Tool

A highly interactive tool designed to help both new and existing users import data into RelateIQ

Problem:

Both new and existing RelateIQ users needed a way to import data from other systems. However, only an internal team at RelateIQ had access to a tool that allowed them to import user data. This tool was cumbersome to use, required significant training, and prevented users from having complete control over their data.

Solution:

Our team created a user-facing import tool that allowed users to directly import several types of data into RelateIQ: contacts, accounts, and fields to add to a list (a collection of contacts and accounts, such as sales leads or opportunities). The process to import data was completely redesigned in order to more clearly support the task and to reduce errors.

Team:

  • Interaction Designer (me)
  • Product Manager
  • Visual Designer
  • Front-End Developer
  • Back-End Developer
  • Import Contractors and Sales Team

Process:

User feedback review

I reviewed existing user feedback regarding the existing import process, and interviewed the internal import team to better understand the limitations of the internal tool.

Requirements and specification review

I reviewed competitive research, functional requirements, and success metrics as defined by the Product Manager. I worked with team to define user flows and detailed requirements.

Whiteboarding and brainstorming

I conducted several brainstorming sessions with both Product and Development team members to identify initial design approaches.

Early concept prototyping

I explored multiple design approaches in the form of an interactive prototype. I discussed with the team the pros and cons of each approach, and iterated based on internal feedback.

What was the hardest design challenge?
Ensuring that it was extremely clear where data was going to be imported. With three different objects to import into (contacts, accounts, or list fields), users needed to be able to understand the differences between these objects and know with certainty how their data would be mapped to the fields within these objects in RelateIQ. My early concepts assumed users knew the difference between contacts, accounts, and list fields, which proved not to be the case. We decided we needed to focus on one object at a time, and use both explanatory text and a visual depiction of the object to make it clearer what each object represented.
What early interaction approaches didn't work?
I explored a few different options. I started with a very simple but ultimately confusing design using drop-down menus to select a field in the CSV and the field where data should be imported. This approach prevented users from visualizing the full picture of what they had selected to import and what remained to be imported.

 

Design and interaction definition

I refined the proposed design direction and prototyped detailed interactions using Axure RP. I also worked with a Visual Designer to apply the appropriate visual design patterns in the prototype.

Why use drag-and-drop?
Dragging-and-dropping fields within the interface made it easier for users to visualize which fields they had already mapped and which remained. It also had the benefit of being a more intentional, tactile action that reduced the likelihood of users mapping fields incorrectly.
What are the downsides of drag-and-drop?
Drag-and-drop inherently slows users down. It takes time to drag an object and drop it somewhere else on the page. It also requires a certain amount of dexterity and precision that some users may struggle with. I decided to optimize for clarity and the prevention of errors despite these challenges with drag-and-drop.

 

User feedback and usability testing

The team interviewed several users in order to validate the design approach. Following those conversations, I identified several usability optimizations and iterated the design based on their feedback.

Testing and iteration to cover edge-cases

During the final stages of development I stepped into an oversight role and continued to test and iterate on the product as the team identified edge-cases that weren’t originally accounted for in the design. I stayed involved with the product’s development until (and past) its launch.

Final Design

Below is the final prototype I created entirely in Axure RP, demonstrating each step of the import tool process and the various interaction states.

Results

Data

The new import tool increased the productivity of our internal team focused on importing customer data by 92%. More importantly, the tool allows users to import their own data in less than 2 minutes on average with a completion rate of over 55%.

Customer quotes:

“Just got it done and wanted to let you know that it was very easy and I was very impressed with the interface and simplicity.”

“Ahhhh…. This is huge.  A feature we so desperately need!!”