Complex Mapping

Enable users to navigate and redesign their schema within complex data mappings.

Overview

One business goal of MongoDB is to help enterprise customers to modernize their legacy applications. As a critical step, Relational Migrator helps users to migrate data from a relational database to MongoDB. When it comes to data migration, schema design plays a crucial role before migration.

👨‍💻 Role

Lead product designer

❓ Problem

For projects with large number of tables and nested mappings, the diagram view becomes slow and hard to use.

🎯 Goal

How might we improve performance, readability, and interaction in the diagram view so users can confidently design and maintain schema with complex and large mappings.

✨ Solution

• Allow users to highlight specific mapping rules in large diagram cards so that they can locate mapping rules that require changes more easily.
• Allow users expand and collapse embedded documents and arrays on the diagram cards so that they can navigate between long diagram cards more easily.

Design explorations

I explored several designs. To validate which one works the best, I constantly shared each design with cross-functional teams. Based on their feedback, I kept iterating. I managed to land on 3 versions to test with internal users.

1. Collapsible field

Adding extra caret icon next to each field. Users can simply collapse any nested mappings. It's intuitive with high affordance.

2. Mapping card

Grouping nested mappings into a card so that users can visualize single mapping rules more clearly.

3. Enhancing the hierarchy

To clear the visual clutter (inline caret icons) on the left side of the mapping card, moved the icons to the right side. Added indentation line so that the data structure is clearer.

Conduct user testing

100% of participants prefer version 3! Each mapping block has its own collapse/expand control, and each table/collection also has a "collapse/expand all" control in the header — letting users compress huge mappings when they want an overview and expand only what's relevant.

Final throughts

The current solution enhances the usability of a single complex mapping. For even larger and more complex mappings, the system might need a global setting that controls how diagram cards are visualized so that users can navigate the diagram even quicker.