Logo of UI Challenges
Sign in
Wireframe example for Importing & Exporting
An example interpretation of the prompt
Icon of target

Importing & Exporting

Icon of book open

Design the import/export flow for a SaaS product where users move data in and out of the app. Start from the place in the product where the action is launched, then move through file/source selection, validation, review, progress, and completion. Make the path feel like a real product flow, not a generic upload dialog.

If the user is importing, show what format is accepted, what fields map automatically, and what happens when the file has missing or invalid rows. If the user is exporting, show what data range, format, and destination are being used before the export begins. The user should know exactly what will happen before they click the final action.

Include clear in-progress feedback for long operations, plus cancel and retry where they make sense. Show at least one failure state that keeps the user’s current selections and explains the problem in plain language. Finish with a success state that confirms the result and offers the next step, such as viewing the imported data or downloading the exported file.

Icon of book open

Keep in mind accessibility principles, such as providing alt-text for icons and ensuring progress indicators are perceivable by all users. Adding these details can make importing/exporting a standout feature!

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.