Usability Testing
RWD
UI Design
SaaS Onboarding in Four Steps with Live Preview
Designed an intuitive onboarding experience for a content management system, guiding first-time users through essential setup steps.
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.
Peak-End Rule: Make Endings Memorable and Rewarding
Create a delightful sense of completion that motivates users to continue engaging with the system.
Problem
Users often lose momentum after completing setup steps. Without clear next steps, their workflow is easily interrupted. This leads to lower motivation to continue engaging with the system.
Solution
The design not only guides users through four key setup steps but also rewards completion. A confetti animation creates a moment of satisfaction and closure. Direct shortcuts connect users to the live site and related settings. This smooth transition keeps their momentum and encourages continuous use.
