SaaS Backend Onboarding Design
Project period: 1 month
Role: UIUX Designer responsible for flow planning, information architecture, visual hierarchy optimization, and high-fidelity prototyping.
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.
Unified Page and Flexible Progress Tracker
A circular graphic combined with intuitive cues allows users to visualize their progress and freely jump between steps to review or edit information.
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.
Modular Dialog
Designed modular dialog panels that adapt to various content types and user needs.
Progressive disclosure
Implemented progressive disclosure techniques, reducing cognitive load for new users.
Preview and guidance
Added frontend preview and guidance and clarify input purposes.
Process
1. Inspiration
Collected interface focusing on dialogs, progress tracker, and preview mode.
2. Preparation
Designed components, information architecture, and flow charts.
3. Ideation
Shared initial drafts with the client to gather early feedback and ensure alignment with project goals.
4. Revisions
Incorporated feedback and made revisions to refine the design.
5. Demonstration
Developed and showcased interactive prototypes with the client.
6. Delivery
Finalized and handed off high-fidelity prototypes and copywriting to developers for implementation.