About Web:AI
Web:AI is a low-code platform that helps students learn AIoT through block-based coding. Teachers use it to teach logic and deploy projects like AI cars, facial recognition, and voice control—making AIoT education simple and fun.
Background
After Web:AI launched, sales declined as the original user flow no longer matched the target audience, leading to a drop in active users. I took over as Product Designer and also acted as Product Owner to research user behavior and redesign the product experience.
Team
My role
Product Designer & Product Owner
Product strategy planning
User research & usability Testing
Product UI/UX design
Designed blockly-based programming flow
Product management — coordinated a team of 12 members
Members
Product Designer & PO ( Me )
BD x 4
RD x 5
MD x 2
Main Result
Problem
Active user drop-off led to declining sales after launch.
Product complexity was misaligned with users' domain knowledge.
Web:AI Blockly design process was overly complex and lacked consistency across designers.
Challenges & Constraints
Abstract problem: Low-code products lack clear standards and references, requiring designers to rely on their understanding of the product and market.
Technical constraints: The product involves hardware control and is limited by firmware logic, requiring solutions that meet user needs while working around these constraints.
Systematizing the design process: Faced with unfamiliar design challenges, I systematized solutions to provide the team with a consistent approach for future projects.
Research & Strategy
01 Narrowing Down the Business Problem
Sales have declined steadily since launch. Discussions with the business team revealed the main issue: a mismatch between product positioning and user needs.
User Side: The original design had too many complex options, making it hard for users to understand despite its flexibility.
Team Side: The team focused on unique features and technology but ignored core market needs. Competitor analysis showed rivals were too simple and didn’t fit Taiwan’s teaching style, so couldn’t guide Web:AI design.
02 User Research
Collected and organized past user feedback.
Segmented users into vertical groups.
Mapped interactions between user groups.
Applied tailored research methods for each group:
Star teachers (KOL): in-depth interviews
Regular teachers: surveys and guerrilla interviews
Students: surveys
Star teachers (KOLs) have high value and expertise. They know common classroom issues, so we focused on them and involved them in design.
03 Define Success Metrics
Our goal was to help the product reach the "Interface and Business Expertise Curve" and expand its target audience beyond the current baseline.
We defined success metrics as:
Setup time < 10 minutes
User satisfaction > 80 points
Positive qualitative feedback from teachers and students
Synthesized research findings into three key design principles, serving as evaluation criteria for this project and future product design.
Systematizing the Design Process
01 Filtering scenarios
Identified key issues based on user scenarios, balancing feasibility and priority to define core product features.
Conducted guerrilla interviews and surveys
Synthesized and ranked user needs
Evaluated engineering difficulty and market value
Defined feature development priorities
02 Decompose Problem
We deconstructed usage scenarios into the smallest indivisible design elements, following the principle that “every step must have meaning” in educational products. Such as strings, numbers, and logic.
These terms were then grouped and categorized based on their meaning and similarities.
03 Blockly Design
After categorizing the scenario terms, we restructured them into complete phrases. These phrases were then organized according to logical rules and used to design the visual programming blocks.
04 Design Docs
Developed Blockly component guidelines and specs with examples for engineers, boosting collaboration efficiency by 30%.
Design Iteration
Problem 1: Learning transfer barrier
During testing, although Option A had shorter operation time and fewer components, considering users’ learning cost and the overall product flow, Option B offered a lower learning transfer barrier.
Therefore, we chose Option B—despite differing from test results—so users could gradually learn, building new concepts upon their existing knowledge.
Problem 2: Flexibility for advanced users
For advanced users, we enhanced product flexibility by adding integrations like LINE Notify, LINE Bots, and Google Sheets. These expanded use cases help retain KOLs and boost organic recommendations within the user community.
Problem 3: Users' unfamiliarity and uncertainty
When users first use an editor-type product, they often feel unfamiliar and unsure how to start.
Solutions:
Provide technical documentation (user manuals) to guide users through operations.
Offer official examples that automatically generate code for users to reference.
Design Process Systematization
01 Blockly design system
Built a Blockly design system to ensure consistency and speed, defining styles by function (logic, text, color, etc.).
02 Industry guidelines
Besides design, I emphasize social responsibility and encourage the team to follow the Ministry of Education’s AI series, “Be Friends with AI,” to align with industry standards and ethics.
03 Product design & marketing
Collaborated with BD team on marketing strategies: YouTube videos, lesson plans, newsletters, online live events, tech expos, and more.
Results & Impact
The redesign improved user experience and boosted business. Users find it better suited for teaching and prefer Web:AI more.
However, sales growth isn’t solely due to these changes. External factors also affect results. Future focus should be on analyzing product impact on business value.
Insights & Reflections
The design success created a reusable model, saving the team time on future development and communication.
I led Web:AI for 1.5 years as Product Designer and Owner, managing cross-team work and business strategy. Balancing stakeholder visions was tough, but each decision was the best compromise and rewarding.
What I brought to the team…
After 5 months…
Five months after the update, we received exciting news—Google approached us to collaborate with Web:AI MoonCar for a course camp. This recognition of our efforts and iterations feels incredibly rewarding!
(Right image: Me assisting with teaching on-site)
