🎯 The Challenge
Creating a professional website is often overwhelming for small business owners and individuals. They face daunting technical hurdles such as configuring custom domains, managing DNS records, setting up SSL certificates, and integrating payment gateways. The primary design challenge was to abstract this backend complexity into a seamless, intuitive, and delightful user experience.
💡 Key UX/UI Contributions
1. Ultra-Fast Onboarding Experience
- Minimizing Friction (3-Step Wizard): Drastically simplified a highly technical process (provisioning Docker containers, setting up DNS records, configuring plugins) into a lightning-fast, 3-step onboarding flow. Users can now launch a site in under 60 seconds.
- Cognitive Load Reduction: Designed clear, guided pathways for users to choose their category, claim their custom domain, and confirm deployment—eliminating unnecessary decisions and cognitive overload.
2. Information Architecture & Landing Page Strategy
- Value-Driven Layout: Restructured the main landing page to immediately communicate the platform's core values. Designed a prominent visual section highlighting the "Core Values": Blazing Fast Speed, Built-in Integrations, Zero Coding Needed, and Enterprise-Grade Infrastructure.
- Scalable Resource Hub: Designed a clean, 3-column layout (Getting Started, Troubleshooting, Integrations) to guide users effortlessly to the right resources. This intuitive categorization reduces support tickets and encourages self-service.
3. Localization & E-commerce Workflows
- Native Integrations UI: Crafted intuitive configuration screens for localized Vietnamese services. Designed flows that make it effortless for users to connect complex 3rd-party systems like KiotViet (POS), GHN (Shipping), and VNPay/VietQR (Payments) directly from their dashboard.
4. Design System & Atomic Architecture
- Atomic Design Methodology: Architected the UI component library based on Atomic Design principles (Atoms, Molecules, Organisms), ensuring high reusability, easier maintenance, and seamless developer handoff.
- Systematic Spacing: Established a 4-tier macro layout standard (Micro, Component, Section, Macro) leveraging Gestalt Laws of Proximity. This ensured a highly consistent and premium look across the entire application interface.
- Modern Aesthetics: Utilized clean typography, thoughtful whitespace, and engaging illustrations to create a platform that feels approachable yet highly professional.
🚀 Product Strategy & Future Roadmap
As the Lead Product Designer, I am also shaping the future vision of the platform to maximize user retention and expand the target market:
- End-to-End Merchant Lifecycle: Designing a holistic ecosystem that supports small businesses from start to finish: inventory management, sales processing, automated shipping (GHN), e-invoicing (sInvoice), and comprehensive after-sales care using native Zalo ZNS and Zalo Mini App integrations.
- Actionable SEO & Behavioral Analytics: Integrating native analytics with visual heatmaps to track user behavior. Prototyping an "SEO Health Score" feature that not only identifies site weaknesses but also generates step-by-step SEO strategies for the user to execute.
- Unified Omnichannel Dashboard: Evolving the platform into a centralized command center. Users will be able to manage products and view unified analytics across multiple sales channels, seamlessly syncing data between the main Website and native Zalo Mini Apps.
- App Marketplace Ecosystem: Transforming individual integrations into a beautifully designed "App Store" UI, allowing users to 1-click install add-ons (e.g., KiotViet, GHN), creating a scalable and sticky ecosystem.
- AI-Driven Onboarding: Prototyping an AI-first wizard where users simply describe their business in one sentence, and the system automatically generates the layout, color palette, and dummy data—reducing time-to-value from 60 seconds down to just 10 seconds.
- The "Vibe Coder" PaaS: Expanding our audience by designing frictionless deployment workflows for "Vibe Coders" (creators using AI coding assistants). This allows non-traditional developers to instantly take their custom-coded applications live with zero DevOps knowledge.
- Visual Automation Builder (Planned): Prototyping a no-code visual workflow builder (e.g., "If order > 1M VND ➔ Send VIP Zalo ZNS") to empower merchants with enterprise-grade automation tools.
🛠️ Tools & Technologies
- Design & Prototyping: Figma, User Flows, Wireframing
- Frontend Implementation: Next.js, React, Tailwind CSS
- Design Handoff: Built reusable UI components mapping directly to the Tailwind design system.