UX/UI Case Study  ·  Internship  ·  2026

Designing trust
into data import

Creating SendBase's first contact importer from scratch - turning a broken, anxiety-ridden process into a confident, guided experience.

Marketing CRMUX ResearchInteraction DesignUsability TestingUI KitFigma
Role
UX/UI Designer (Intern)
Timeline
8 Weeks
Platform
Marketing CRM Web App
Tools
Figma · FigJam · Slides · Tally.so · Claude · ChatGPT
01 - Project Context

SendBase needed its first
data importer. Built from zero.

SendBase is a marketing automation CRM. Teams needed a reliable way to import large contact databases - and no such feature existed. I was tasked with designing it from scratch.

Phase 01

Research

Competitive analysis across 4 platforms. Community research on G2, ProductHunt, Reddit. No direct user access - secondary data only.

Phase 02

Design

User flows, LoFi wireframes, full UI Kit with atomic design, HiFi screens, and interactive Figma prototype.

Phase 03

Testing

8 moderated in-person sessions. Think-aloud method with screen recording. Marketing managers and developers.

02 - Research

Understanding the competition
before touching Figma.

I analyzed MailChimp, MailerLite, Brevo, and ActiveCampaign - their import flows, community feedback, and UX patterns - to find the gaps worth designing for.

Application
Weaknesses
Strengths
  • Charges for duplicate contacts upon import
  • Confusing bulk import process
  • Additional clicks required for basic options
  • Beginner-friendly import flow
  • Clear step-by-step guidance
  • Lacks advanced contact management features
  • Occasional CSV import reliability issues
  • Inconsistent interface between sections
  • Intuitive, user-friendly interface
  • Easy subscriber migration from Mailchimp
  • No real-time sync - manual updates required
  • Instability with large datasets
  • Friction when deleting contacts
  • Free unlimited contacts, no duplicate billing
  • Clean, intuitive interface
  • Steep learning curve, overwhelming for new users
  • Extra clicks for basic import options
  • Unnecessary complexity for simple tasks
  • Powerful segmentation and tagging during import
  • Ideal for advanced users with complex needs
  • Built-in CRM, highly reliable
What real users were saying
Errors don't clearly explain what went wrong.Brevo user · G2
I always end up cleaning the file manually first.G2 reviewer
Duplicate handling takes extra manual work.ActiveCampaign user · Reddit
If the CSV isn't perfect, the import fails.Reddit · r/emailmarketing

Key insights

What users struggle with - and what they actually need.

Pain Point

Confusing import process

No balance between simplicity and power. Flows overwhelm first-time users from step one.

Pain Point

Hidden charges & duplicates

Contacts billed without notification. No real-time updates. Users feel blindsided - trust disappears.

Pain Point

Too many unnecessary clicks

Extra steps for basic actions. Steep learning curves. Limited, non-shareable dashboards.

03 - Design Opportunities

Seven gaps the competition
left open.

Enable automatic mapping and validation of CSV fields

Smart auto-detection that maps common fields instantly, reducing manual setup from minutes to seconds.

Reduce problems related to large data import

Handle datasets of any size without crashes, timeouts, or silent data loss.

Enable users to validate contacts and control duplicate handling

Full visibility and control over how conflicts are detected, merged, or skipped.

Introduce real-time error detection during import

Surface issues as they happen - not after the entire import fails silently.

Introduce cost transparency before data import

Show users exactly what they’ll be billed for before any commitment is made.

Replace cognitive load with adequate guidance

Guide users step by step instead of overwhelming them with every option at once.

Enable a simplified, shareable dashboard for users

Give teams a clean view of import results they can share across the organization.

04 - User Personas

Two different workflows,
one shared goal.

Through an online survey conducted via Tally.so, two distinct user profiles emerged. Marketers who value trust and control (Hanna) vs developers who prioritize speed and automation (Benjamin). Designing for both meant finding the balance between guidance and efficiency.

Hanna
Hanna
Marketing Manager · 29 years old · Marketing / eCommerce

Hanna analyzes campaigns, creates reports, and ensures data import and segmentation are accurate. She uses Mailchimp and ActiveCampaign, and requires a tool that ensures data import, newsletter sending, and performance tracking are performed properly for successful campaigns.

Digital tools
Data handling
Problem solving
Communication
ToolsActiveCampaignMailchimp
Behaviours
  • Before final import, manually cleans and formats files outside the platform
  • Believes this approach is safer - gives her certainty she won’t import wrong data
  • If an error occurs, manually locates it, fixes the source file, and re-imports
Motivations
  • Ensure data accuracy and proper segmentation when importing
  • Trusts in a clean and secure database for successful campaigns
  • Values tools that let her review contact validity before importing
Goals
  • Import large databases in an intuitive and automated way
  • Automatically recognize formatting errors to save time
  • Clearer, solution-oriented notifications when errors occur
  • Review campaign performance metrics
  • More user-friendly, simple interface
Frustrations
  • Cleaning and polishing data before uploading - time-consuming
  • Excessive manual data work that wastes time
  • Unnecessary complexity for tasks that should be quick
  • Unintuitive systems
Benjamin
Benjamin
Developer · 30 years old · IT / SaaS

An indie developer building and marketing SaaS applications. He handles both the technical and marketing sides of his products. For marketing purposes, he needs a tool that offers speed, automation, and minimal steps to achieve his goal. He uses MailerLite and EmailOctopus.

Digital tools
Data handling
Problem solving
Communication
ToolsMailerLiteEmailOctopus
Behaviours
  • Imports data via CSV upload as his primary method - speed is priority
  • Expects the tool to map columns and recognize the format automatically
  • Tries to automate data reconciliation outside the platform when errors occur
  • Collects data in a database, exports to CSV, then uploads into marketing systems
Motivations
  • Believes in an intuitive, user-friendly interface
  • Priorities are efficiency, speed, and simplicity
  • Automation is most important - doesn’t want to waste time on unnecessary steps
Goals
  • A tool that maximizes efficiency and replaces manual steps
  • Simpler tool to import contacts, create campaigns, and review performance
  • Ability to adequately manage campaigns and the editor
  • Multiple error recognition options to ensure correct data imports
Frustrations
  • Complex systems with too many options
  • Slow, unreliable systems lacking automation for basic operations
  • Preparation and collection to get data into the right CSV format
05 - Problem Statement

One workflow doesn't fit all.

After analyzing competitors and community feedback, one core tension emerged: data import tools force users into a single rigid workflow. Some need control. Others need speed. What if the system adapted to both?

Marketers and agencies need a reliable tool with real-time sync, upfront cost overview, and the ability to reliably migrate large datasets - because unreliable systems cause data loss and unexpected charges.
The core insight

One bad import experience → lost customer forever. The data importer isn't just a feature - it's the first trust signal users encounter on the entire platform.

The design challenge

Design a tool that feels simple enough for first-timers and fast enough for power users - without sacrificing transparency, control, or trust at any step.

06 - Strategic Foundation

Four principles behind
every decision.

01
Transparency First
Users see exactly what's being imported - with full control before any commitment is made.
→ Builds trust, eliminates surprise charges
02
Automate the Tedious
Smart field mapping and duplicate detection run automatically in the background.
→ Saves 4–6 hours weekly, reduces human error
03
Progressive Disclosure
Simple entry for beginners. Advanced features surface only when the user needs them.
→ Reduces learning curve while serving power users
04
Clear Error Recovery
Mistakes are easy to spot and fix before any damage occurs - with clear inline guidance.
→ Prevents failure, builds confidence at every step
Key Design Decision - Single page or multi-step wizard?
Rejected

Single-page import

Faster for advanced users - but increases cognitive load for first-timers. No sense of progress. Reduces trust. More errors on first attempt.

Chosen

Multi-step wizard

Each step has one clear purpose. Progress is always visible. Easy to correct errors at any stage. Feels guided, not overwhelming.

Research showed the biggest barrier was lack of trust - not lack of speed. The wizard provides security and control. A correct first import, even with a few more clicks, is always worth more than raw speed.

07 - User Flow

I started with flows,
not pixels.

Before touching Figma, I mapped the complete user journey across all three import paths. Here’s the simplified view - the two primary entry flows. The full annotated diagram, including all error states, edge cases, and decision branches, is available on request.

Simplified view · Two primary import paths · Full flow available on request

User flow
Full annotated flow available on request · Includes error states, edge cases & all three import paths
08 - UI Kit

Tokens first.
Screens second.

Before any screens, I built a complete UI Kit using atomic design - ensuring every component, state, and pattern would be consistent across the entire import flow.

Typography
Typeface
(Headings / Text)
Inter
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9
Hierarchy
NameWeightSizeLine height
Heading 1Semibold2028
Heading 2Semibold1826
Heading 3Semibold1624
Heading 4Semibold1420
Body 1Medium1420
Body 1Regular1420
SmallRegular1320
SmallSemibold1320
CaptionRegular1218
CaptionMedium1218
TinyRegular1116
Colors
PrimaryPurple · Main color
50
#FCF9FF
100
#F5E9FF
200
#EBD9FB
300
#DBBCF6
400
#C591EF
500
#B572E8
600
#9A46D7
700
#8534BC
800
#702F9A
900
#5C277C
SecondaryLavender · Secondary color
100
#F6F4FE
200
#EEEAFD
300
#C7BAF8
400
#C0B3F8
500
#B49EF4
600
#8972C9
700
#8046E1
800
#7134CD
900
#5D2BAC
AccentSoft blue · Accent color
100
#ECF3FF
200
#DFEAFF
300
#C5D8FF
400
#BAD0FF
500
#B2C9FF
600
#7D99FC
700
#414DEA
800
#333BCF
900
#2C34A7
Neutral
White
#FFFFFF
50
#F8F9FB
100
#F6F6F6
150
#E1E1E1
200
#E1E4EB
300
#C9CDD7
400
#9196A3
500
#5B5F6A
700
#2D3036
900
#17181C
Semantic
Success
100
#E3F5E3
200
#C8EAC9
300
#9DD89F
400
#6BBD6E
500
#4CAF50
600
#358438
700
#2D6830
800
#275429
900
#224525
Warning
100
#FFF8E1
200
#FFECB3
300
#FFE082
400
#FFD54F
500
#FFC107
600
#FFB300
700
#FFA000
800
#FF8F00
900
#FF6F00
Error
100
#FEECEB
200
#FCD2CF
300
#F8A9A4
400
#F3776F
500
#F04438
600
#DA342A
700
#BB241D
800
#9B1B15
900
#7E110D
IconsOutline · Lucide set
message-circle-question-mark
bell-dot
settings
user
layout-dashboard
chart-no-axes-combined
mails
plus
x
trash-2
circle-alert
cloud-alert
cloud-download
cloud-upload
check
loader
chevron-down
chevron-up
search
chevron-left
upload
receipt-text
download
file-output
file-stack
file-x-corner
copy
undo
banknote-arrow-down
chevron-right
file-up
link
scan-eye
file-scan
eye
list
users
grid-2x2-check
key-round
lock
square-pen
minus
info
file-spreadsheet
lightbulb
arrow-right
arrow-up-down
activity
calendar
refresh-cw
Icon sizesStroke scales with size
24px
stroke 2
20px
stroke 1.75
16px
stroke 1.5
12px
stroke 1.25
Grid system
Grid system
Core UI Components
Core UI Components
Atomic design
Atomic design
09 - HiFi Design Screens

Four moments that
build trust.

Each screen solves one specific problem identified in research. Every decision has a reason.

01 - Choose your import path

One entry = one mental model for all. Three clear paths eliminates ambiguity from click one.

Empty state screen

Step 1 of 2 - User lands on empty state screen

Import modal

Step 2 of 2 - User triggers a modal to choose the import option

02 - Smart field mapping

Auto-detect saves time. Manual override gives confidence. Unmapped fields block progress until resolved.

Smart field mapping
Smart field mappingAutomate the obvious. Surface what needs a human.

03 - Duplicate handling

Exact matches auto-merge. Only real conflicts surface - where a human decision is actually needed.

Duplicate entries
Duplicate entries undo
Step 3 of 4 - DuplicatesOnly show what needs deciding.

04 - Final review before import

The #1 requested feature in testing. One last look before no return. Eliminates import anxiety.

Final review part 1
Final review part 2
Step 4 of 4 - Review & ConfirmFull visibility before commitment. No surprises.
10 - Prototype walkthrough

Prototype walkthrough

A short guided tour of the end-to-end import flow - showing how the wizard, auto-mapping, duplicate handling, and final review come together in one cohesive experience.

11 - Usability Testing

What worked - and
what didn't.

8 moderated, in-person sessions. Think-aloud method. One core task: complete the full import flow without any guidance or prompting.

8

In-person sessions

3 marketing managers · 5 developers
1

Core task

No guidance, no prompting
3

Issues fixed

+ 1 flagged for next iteration

Step-by-step wizard structure

The layout gave users a clear sense of progress. Knowing exactly where they were - and how many steps remained - reduced anxiety around handling important data.

“I felt like I was being guided the whole time - I always knew what to do next.”

Final review screen

Full visibility before committing - valid entries, skipped rows, flagged issues. Users felt completely in control of their data.

“I liked that I could see everything before committing. Nothing felt like a surprise.”

Inline validation feedback

Errors surfaced in context - right where users were working - not at the end of the flow. Easy to spot. Easy to fix without losing momentum.

“It told me exactly what was wrong and where - I didn't have to go hunting for mistakes.”
01

Double CTA on empty state

Two “Add Subscribers” buttons - one centered, one in the header. Users hesitated, unsure if they were different actions. Doubt introduced at the very first step.

Fix AppliedRemoved the header CTA. Single prominent button in the center.
02

Inactive tabs looked disabled

Pale grey inactive tabs were indistinguishable from a disabled state. Multiple users didn't attempt to switch tabs at all, assuming they were locked.

Fix AppliedDarkened inactive tab colour. Clearly signals switchable, not disabled.
03

Invalid rows flagged by colour alone

Invalid and duplicate entries marked using colour only - an accessibility gap. Users with colour vision differences have no reliable way to identify which rows will be skipped.

Next IterationAdd icon indicators alongside colour on each flagged row. WCAG 2.1 AA.
12 - Reflection

What this project
taught me.

Good design isn't about the most beautiful interface - it's about designing pieces that actually belong. Pieces that fit the ecosystem, solve real problems, and make the system feel whole.

Design is responsibility

There was no product, no system - which meant every decision set a precedent. Designing from scratch isn’t freedom - it’s accountability. What I created wasn’t just a feature, but the beginning of a foundation.

Iteration isn't failure

Every project is a hike. Peaks - features shipped. Valleys - first versions that weren't right. And gear collected - knowing how to defend decisions with data, collaborate with developers, and understand that the process is the work.

13 - Future Opportunities

Where I'd take this next.

01

Accessibility pass

Icon indicators alongside colour coding on flagged rows - WCAG 2.1 AA. Identified as next iteration from testing.

02

Shareable import dashboard

A customizable, simplified view for users who need to share import analytics with team members or clients.

03

Direct CRM integrations

Extend import beyond CSV - direct sync with Salesforce, HubSpot, and other platforms. Eliminate the manual export/import loop entirely.

Looking for a designer who
thinks before she draws?

Emina OhranovicJunior UX/UI Designer · Available 2026
Let’s connecteminaohranovic98@gmail.comdribbble.com/emina98