Tillstar Home Page Upgrade
Tillstar Home Page Upgrade
Designed and launched an AI-powered assistant for teachers to reduce their workload, reaching 200,000+ DAU
Designed and launched an AI-powered assistant for teachers to reduce their workload, reaching 200,000+ DAU
Designed and launched an AI-powered assistant for teachers to reduce their workload, reaching 200,000+ DAU
Timeline
Timeline
3 months, 2024
3 months, 2024
Role
Role
UI/UX Design
UX Research
UI/UX Design
UX Research
Team
Team
Ming Xiao - Product Manager
Qiu Rou - Data Analyst
Chen Yi, Hen Mo, Zha Ban - Developers
Ming Xiao - Product Manager
Qiu Rou - Data Analyst
Chen Yi, Hen Mo, Zha Ban - Developers
User Research → Pain Points
User Research → Pain Points
Uncover teachers daily most time-consuming tasks
Uncover teachers daily most time-consuming tasks
Uncover teachers daily most time-consuming tasks
① Dairy Study 📝
① Dairy Study 📝
I conducted a 5-day diary study with 8 teachers documenting their workflows on DingTalk. Key findings showed daily time allocation: Lesson Prep (2.2h), Feedback (2h), Teaching (1.5h), Homework/Newsletters (1h), Parent Communication (0.5h).
I conducted a 5-day diary study with 8 teachers documenting their workflows on DingTalk. Key findings showed daily time allocation: Lesson Prep (2.2h), Feedback (2h), Teaching (1.5h), Homework/Newsletters (1h), Parent Communication (0.5h).
② User Interview 👥
② User Interview 👥
After identifying teachers’ most burdensome tasks, I interviewed 5 participants from the diary study to uncover key pain points: 1) repetitive lesson prep resources, 2) manual feedback overload, 3) rigid templates, and 4) fragmented workflows across tools.
After identifying teachers’ most burdensome tasks, I interviewed 5 participants from the diary study to uncover key pain points: 1) repetitive lesson prep resources, 2) manual feedback overload, 3) rigid templates, and 4) fragmented workflows across tools.
Digging deeper into their pain points
Digging deeper into their pain points
Digging deeper into their pain points
Design Approach
Design Approach
Mapping pain points to AI-powered solutions that address teachers’ core needs
Mapping pain points to AI-powered solutions that address teachers’ core needs
Mapping pain points to AI-powered solutions that address teachers’ core needs
Solution 1
Solution 1
AIGC Features — Tightly integrates AI capabilities within target scenarios, makes it easy to access this feature without disrupting workflows
AIGC Features — Tightly integrates AI capabilities within target scenarios, makes it easy to access this feature without disrupting workflows
AIGC Features — Tightly integrates AI capabilities within target scenarios, makes it easy to access this feature without disrupting workflows
Generate Homework Content
Generate Homework Content
Generate Homework Content
Write Personal Feedback
Write Personal Feedback
Write Personal Feedback
Solution 1 → Feature 1
Solution 1 → Feature 1
Assessment Auto-Generation — Auto-generate flexible, ready-to-use templates tailored to subjects and course materials
Assessment Auto-Generation — Auto-generate flexible, ready-to-use templates tailored to subjects and course materials
Assessment Auto-Generation — Auto-generate flexible, ready-to-use templates tailored to subjects and course materials
🔄 1st Iteration - Low Engagement at Entry Point and Friction with Regeneration
🔄 1st Iteration - Low Engagement at Entry Point and Friction with Regeneration
⚠️ ① Friction Point: Low engagement
⚠️ ① Friction Point: Low engagement
Click-tracking data shows low engagement - only 64.2% of users clicked the 'Write with AI' button during testing.
Click-tracking data shows low engagement - only 64.2% of users clicked the 'Write with AI' button during testing.
① Design Solution: Place button to a high visibility point
① Design Solution: Place button to a high visibility point
Moved the button to the top-right (a high-priority action zone) to increase discoverability.
Moved the button to the top-right (a high-priority action zone) to increase discoverability.
② Design Solution: Added assistant name in button labeling
② Design Solution: Added assistant name in button labeling
Renamed the button from “AI” to a personalized assistant name, adds personality and user connection.
Renamed the button from “AI” to a personalized assistant name, adds personality and user connection.
⚠️ ② Friction Point: Hard to regenerate results
⚠️ ② Friction Point: Hard to regenerate results
During user testing, when teachers weren't satisfied with the results, they had to restart the entire workflow.
During user testing, when teachers weren't satisfied with the results, they had to restart the entire workflow.
① Design Solution: Instant regeneration with one click
① Design Solution: Instant regeneration with one click
Added a 'Swap' button to allow instant regeneration of results without re-entering prompts, streamlining iteration and saving extra steps.
Added a 'Swap' button to allow instant regeneration of results without re-entering prompts, streamlining iteration and saving extra steps.
② Design Solution: Edit prompts without exiting flow
② Design Solution: Edit prompts without exiting flow
Teachers can instantly return to the prompt selection screen (manual input or templates) to refine their prompts without restarting the workflow.
Teachers can instantly return to the prompt selection screen (manual input or templates) to refine their prompts without restarting the workflow.
🔄 2nd Iteration - Action-driven Labeling Drives Click Rate Up to 84.7%
🔄 2nd Iteration - Action-driven Labeling Drives Click Rate Up to 84.7%
⚠️ Friction Point: High drop-off rate for sending prompt
⚠️ Friction Point: High drop-off rate for sending prompt
The CTR for the generate button is only 24%, indicating a high drop-off rate.
The CTR for the generate button is only 24%, indicating a high drop-off rate.
Design Solution: Visual optimization with action-driven labeling
Design Solution: Visual optimization with action-driven labeling
Visually optimized the 'send' button by adding a label that says 'Instant Generate' to make it more prominent and noticeable.
Visually optimized the 'send' button by adding a label that says 'Instant Generate' to make it more prominent and noticeable.
✅ Final Design
✅ Final Design
📝 Before - 60min
📝 Before - 60min
Browse template → Manually adjust layout → Add content → Repeat revisions → Finalize.
Browse template → Manually adjust layout → Add content → Repeat revisions → Finalize.
🤖️ After - 8min
🤖️ After - 8min
AI auto-generate assessments with unlimited regeneration.
AI auto-generate assessments with unlimited regeneration.
Solution 1 → Feature 2
Solution 1 → Feature 2
Feedback Auto-Generation — Automatically generate personalized feedback based on subject and students' grade
Feedback Auto-Generation — Automatically generate personalized feedback based on subject and students' grade
Feedback Auto-Generation — Automatically generate personalized feedback based on subject and students' grade
📝 Before - 120min
📝 Before - 120min
Select student → Manually write comments (1.5min) → Jump to next → Repeat for 80 students.
Select student → Manually write comments (1.5min) → Jump to next → Repeat for 80 students.
🤖️ After - 40min
🤖️ After - 40min
AI auto-generate personalized feedbacks for 80 students.
AI auto-generate personalized feedbacks for 80 students.
Solution 2
Solution 2
AI Agent — AI agents autonomously handle repetitive operations via automated workflows, eliminating repetitive workloads
AI Agent — AI agents autonomously handle repetitive operations via automated workflows, eliminating repetitive workloads
AI Agent — AI agents autonomously handle repetitive operations via automated workflows, eliminating repetitive workloads
Lesson Prep
Lesson Prep
Issue Homework and Newsletter
Issue Homework and Newsletter
Solution 2 — Feature 1
Solution 2 — Feature 1
Lesson Preparation — Rapidly generate lesson plans and materials tailored to course contents and curriculum goals
Lesson Preparation — Rapidly generate lesson plans and materials tailored to course contents and curriculum goals
Lesson Preparation — Rapidly generate lesson plans and materials tailored to course contents and curriculum goals
📝 Before - 120min
📝 Before - 120min
Review textbook → Review practice questions → Browse template → Look for course images → Add content → Adjust slides layout → Revise → Finalize.
Review textbook → Review practice questions → Browse template → Look for course images → Add content → Adjust slides layout → Revise → Finalize.
🤖️ After - 10min
🤖️ After - 10min
AI auto-generate lesson plans with slides and images.
AI auto-generate lesson plans with slides and images.
Solution 2 — Feature 2
Solution 2 — Feature 2
Streamling Workflow — Streamline multi-step tasks and accomplish it with single prompt
Streamling Workflow — Streamline multi-step tasks and accomplish it with single prompt
Streamling Workflow — Streamline multi-step tasks and accomplish it with single prompt
Design Details
Design Details
Progress Visualization During Result Generation — Visualize real-time generation progress, and alleviate impatience during AI processing
Progress Visualization During Result Generation — Visualize real-time generation progress, and alleviate impatience during AI processing
Progress Visualization During Result Generation — Visualize real-time generation progress, and alleviate impatience during AI processing
⚠️ Friction Point: 34.6% drop-out rate
⚠️ Friction Point: 34.6% drop-out rate
Due to technical constraint, the average loading is 30s, resulting in 34.6% drop-out rate during loading phase.
Due to technical constraint, the average loading is 30s, resulting in 34.6% drop-out rate during loading phase.
Design Solution: Reduce drop-out rate to 18.2%
Design Solution: Reduce drop-out rate to 18.2%
To ease user impatience and boost retention, I visualized decision-making with percentage-based progress cues—reducing drop-out rate to 18.2%.
To ease user impatience and boost retention, I visualized decision-making with percentage-based progress cues—reducing drop-out rate to 18.2%.
Character Customization — Customize AI Assistant's character for a personalized experience and foster emotional engagement between users and AI
Character Customization — Customize AI Assistant's character for a personalized experience and foster emotional engagement between users and AI
Character Customization — Customize AI Assistant's character for a personalized experience and foster emotional engagement between users and AI
