SaaS Backend Onboarding Design
Brief
Designed a content management system (CMS) featuring rich dialog panels and intuitive user flows to streamline main tasks, with a focus on supporting new users.
Role
UI/UX Designer - planned user flows, designed information architecture, optimized visual hierarchy, and created high-fidelity prototypes.
Period
1 month
The screens shown in this portfolio are for illustrative purposes only and do not represent the actual project interface. All rights belong to the original owner.
Modular Dialog
Designed modular dialog panels that adapt to various content types.
Progressive disclosure
Implemented progressive disclosure techniques, reducing cognitive load.
Preview and guidance
Added frontend preview and guidance and clarify input purposes.
Unified Page and Flexible Progress Tracker
Consolidate multiple tasks within a single interface to maintain the flow state . A circular graphic combined with intuitive cues allows users to visualize their progress and freely jump between steps.
Problem
Settings were distributed across multiple pages, making it difficult for users to locate and complete all necessary configurations efficiently.
Solution
Consolidated all essential settings into a single and designed a clickable progress tracker, allowing users to understand the current step with clear visual feedback.
Real-time Preview and Image Resolution Guidance
Instant feedback on input and image uploads and clear resolution guidelines help users enter the right assets with confidence.
Problem
According to feedback, many users do not have experience with website building. They struggle to understand the frontend placement and image uploads, which increase their frustration to complete the onboarding process.
Solution
By introducing a preview mode in the settings panel with real-time frontend reflection and clear inline guidance, users receive immediate visual feedback and helpful tips as they adjust website details, which reduces confusion and hesitation.
Process
Inspiration
01
Collected interface focusing on dialogs, progress tracker, and preview mode.
Preparation
02
Designed components, information architecture, and flow charts.
Ideation
03
Shared initial drafts with the client to gather early feedback.
Revisions
04
Incorporated feedback and made revisions to refine the design.
Demonstration
05
Developed and showcased interactive prototypes with the client.
Delivery
06
Finalized and handed off high-fidelity and copywriting to developers.