AI B2B B2C EdTech
AI Powered Yearbook Creation System
Led the redesign of TreeRing's yearbook creation platform, introducing AI-assisted layouts that reduced completion time by 42% while increasing user confidence to 91%.
ROLE
Senior UX Design Lead
• Strategy
• Research
• System Architecture
• Interaction Design
• Prototype Execution
SCOPE
0 -> 1 Product
AI layout engine integrated into live production platform
TIMELINE
8 Months (Discovery to Launch
IMPACT
Spread completion time
Support tickets
Pre-print confidence
Layout generation speed
↓ 42%
↓ 37%
↑ 91%
↑ 3x
First Yearbook Automation Tool
TreeRing Overview
Treering is a Silicon Valley–based technology company that modernizes how school yearbooks are created, customized, and printed. It empowers students, parents, and advisers to collaborate on personalized yearbooks through intuitive online tools, eliminating minimum orders and reducing financial risk for schools.
In 2025, the Treering community surpassed 12 million members across the world, and the platform supports over 14,000 schools, printing more than 10 million books to date.
A User and A Business Problem
Yearbook creation is emotionally meaningful but operationally overwhelming. Editors, often parents and teachers, were expected to design polished, print-ready spreads using manual tools in a high-risk environment.
This created business strain through seasonal support spikes, preventable print errors, slower production cycles, and retention risk in a competitive market.
↓
Core User Problems
Didn't Know Where to Start
Blank canvas paralysis prevented users from beginning projects
Spent Hours Arranging Photos
Manual photo placement consumed excessive time and energy
Unsure About Design Quality
Lack of design confidence led to project abandonment
Who Were The Users?
Time constrained, deadline driven contributors
Varying design confidence and skills
Customers who need clarity, control, automation
Those who seek efficiency without losing ownership
Core Business Problems
Low Feature Adoption
Complex tools remained underutilized by target users
Delayed Project Completion
Extended timelines affected revenue and customer satisfaction
Increased Support Tickets
Overwhelmed support teams with layout-related questions
What Was Impacting The Business?
Sales cycles slowed by product friction
Marketing struggled to articulate clear value
Operations burdened by repetitive support tickets
Product roadmap reactive, not strategically driven
Research & Core Insight
Through support analysis, workflow audits, usability testing, and stakeholder workshops, we identified:
Most editors spent the first 30 minutes deciding where to start
Layout-related tickets spiked before submission deadlines
Users reused old templates to reduce risk
Print-safe zones were poorly understood
Confidence dropped dramatically near final submission
Core Insight: Users did not need more features. They needed structured momentum and embedded trust.
Beyond The Pixels: Designing For a System
The visual design system was seamlessly integrated from figma into the editor, reinforcing clarity, trust, and confidence while allowing AI-driven layouts to feel intuitive and cohesive within the existing workflow.
Strategy
AI suggests. Users decide.
The system was reframed around collaborative intelligence, not automation.
Design principles:
• Remove blank canvas
• Preserve creative control
• Embed print guardrails into workflow
• Reduce cognitive load through structured steps
• Accelerate momentum without sacrificing ownership
Guardrails & System Behavior
Production safety is enforced in real time through rule-based validation. The AI adapts within constraints. It never overrides user intent.
Prevent images from crossing bleed thresholds
Flag low-resolution assets before placement
Maintain grid integrity across regenerations
Preserve locked elements during AI refinement
Enforce print-compliant layout tokens
Behavioral Architecture
Each regeneration is not a reset. It is a recalculation based on system state. The engine dynamically references:
The structured JSON layout model
User modifications and locked states
Print constraints and safe-zone logic
Component tokens and grid rules
Image metadata and resolution data
From Wireframes to System Execution
I translated system logic into a scalable interaction framework inside Figma.
• Built a modular layout component system
• Defined AI behavior states and regeneration logic
• Created structured layout tokens for consistency
• Designed flexible drag, resize, swap interactions
• Embedded print validation states directly into flows
What began as conceptual architecture became a production-ready interaction system.
An interactive, test-ready environment
These early wireframes define the core journey from content selection to image curation, layout generation, and print review.
The focus was clarity over polish. I reduced complexity into guided steps and defined where AI supports without removing control.
This phase established system logic, decision hierarchy, and print guardrails before layering visual design and intelligent automation.
↓
Live & Launched
The AI-powered layout system is live in production, actively used by millions of yearbook creators across schools worldwide.
In Production Today
Production & Impact
Today, this AI-assisted layout system powers live yearbook creation workflows, generating structured design options while preserving full creative ownership. Users move faster without sacrificing control, confidence, or print accuracy.
↓ 42% reduction in time to complete a spread
↓ 35% decrease in layout-related support tickets
↓ 28% reduction in print errors before submission
↑ 3x faster page generation compared to manual workflows
↑ 91% user-reported confidence before final print approval
Designing AI at scale required constraint modeling, behavioral architecture, and organizational alignment, ultimately redefining how intelligence integrates into a high-risk production system while preserving human control beyond simply accelerating layouts.
Reflection
Leadership & Influence
This was not a feature launch. It was a platform shift. Beyond interface design, I:
Led cross-functional AI strategy workshops
Defined success metrics aligned to confidence and retention
Negotiated engineering constraints around print logic
Advocated for guardrail-first architecture
Influenced roadmap prioritization toward system scalability
Tools
Figma for interaction architecture, component systems, and AI state modeling
Figma Make for rapid prototyping and layout experimentation
FigJam and Mural for cross-functional workshops, systems mapping, and behavioral modeling
Jira for roadmap alignment and engineering collaboration
Product analytics dashboards for workflow, completion, and confidence tracking
JSON schema documentation for AI layout logic and guardrail enforcement
ChatGPT, Claude, and Gemini for AI behavior prototyping, prompt testing, and structured layout exploration
UX Pilot for accelerated wireframing and rapid concept validation