The Challenges or Problem Statement&nbsp;

Q1: What was the challenge or key issue with the original design?

The original import bulk feature lacked a user-friendly experience. It had an inconsistent UI with unclear call-to-actions and no proper guidance for users on what steps to follow. The sidebar also lacked toggling functionality, causing a cramped and visually overwhelming interface.

Q2: How did the problem arise?

The original dashboard interface was built without considering accessibility, responsive design, or proper UX writing. It seemed developer-driven rather than user-focused, with minimal hierarchy, too many filled icons, and unclear next steps.

Q3: Who is the user and what are they experiencing?

The users are internal CRM users or business admins who import account data in bulk. They struggle to understand what each button does, where to begin, and how to recover from errors due to unclear guidance and sharp, aggressive UI elements.

Q4: Why is this problem important?

Bulk import is a critical first-step action for many users setting up or updating their CRM data. If this flow is confusing, it can lead to bad data, incorrect mappings, or even abandonment of the process—costing time, resources, and user trust.&nbsp;&nbsp;

Goal 1: Clear Field Mapping &amp; Error Identification

Ensure users can easily map fields with visual cues (e.g., color-coded states for mapped/unmapped) and instantly identify any missing or invalid data points. 

Goal 2: Transparency &amp; Traceability

Provide real-time visibility into file name, size, total rows, and import status—along with access to error logs and summaries for post-import audits.

Goal 3: Responsive, Accessible, and Intuitive UX

Design for consistency across devices with responsive layouts, intuitive controls, and assistive features that support users with varying technical skill levels.&nbsp;&nbsp;

The next plan of action was to create colour palettes and typography that would help communicate the brand’s identity and also give the product an exciting feel.

Improved Onboarding: Faster time-to-import for new users

Reduced Errors: Smarter feedback and validation

Increased Efficiency: Saved configurations and mapping memory

Professional Aesthetic: Modern, trust-building UI&nbsp;&nbsp;

Every project brings surprises and this one was no exception. While the outcome aligned with the user goals, not everything went smoothly during the process. Constraints in layout, tool limitations, and evolving expectations pushed me to think creatively, adapt quickly, and balance design quality with practicality.

1. Import Properties Table

The table included too many columns to display effectively within the given space. Despite multiple ideation rounds and research into optimal layouts, the volume of data made the table feel overwhelming.

I implemented a horizontally scrollable table to maintain clarity without truncating key data. Prioritized the most relevant columns for initial view and added clear indicators for overflow.

Designing for data-heavy interfaces requires balancing visibility and usability. Scrollable layouts are effective when paired with strong headers, sticky columns, or filters. Next time, I’ll prototype complex tables earlier to validate the data density and user interaction model upfront.

2. Field Mapping (Mapped and Unmapped)

Some of my initial assumptions regarding dropdown interactions and color change logic conflicted with Figma’s prototyping limitations especially when trying to trigger two simultaneous actions (e.g., selection + visual feedback).

I implemented a smart workaround: when a user drags and drops a field into the dropdown, the mapping status dynamically changes to green ("Mapped") mimicking dual interaction. This maintained a seamless UX despite tool limitations.

Creativity isn’t just in visuals it’s in interaction problem solving too. This experience taught me how to push prototyping tools beyond their default behaviors to simulate real-world flows more effectively. In the future, I’ll continue using such clever techniques while considering tool limitations from the start.&nbsp;&nbsp;

This was a task of a company that I initially designed in Figma and then converted into code, demonstrating my hands-on skills in both design and development.

Q1: What was the challenge or key issue with the original design? 

Q3: Who is the user and what are they experiencing? 

Bulk import is a critical first-step action for many users setting up or updating their CRM data. If this flow is confusing, it can lead to bad data, incorrect mappings, or even abandonment of the process—costing time, resources, and user trust.  

Goal 1: Clear Field Mapping & Error Identification

Goal 3: Responsive, Accessible, and Intuitive UX

Design for consistency across devices with responsive layouts, intuitive controls, and assistive features that support users with varying technical skill levels.  

Creativity isn’t just in visuals it’s in interaction problem solving too. This experience taught me how to push prototyping tools beyond their default behaviors to simulate real-world flows more effectively. In the future, I’ll continue using such clever techniques while considering tool limitations from the start.  

Bestie CRM Bulk Import Feature