Improving Cereby Capabilities: From Plain Text to Rich Visual Learning Materials

How we transformed Cereby AI from generating basic text notes to creating rich, visually appealing study materials

Introduction

When we first launched Cereby AI, we had built a powerful, context-aware learning assistant. However, as users began creating notes, quizzes, and flashcards, we received consistent feedback: the output looked unprofessional and was hard to read.

Users complained that notes were "just plain text with bullet points," mathematical formulas rendered poorly, and there were no visual aids like diagrams or charts. The content was educationally sound, but it lacked the visual polish that makes study materials effective and engaging.

After months of development, we've transformed Cereby AI's capabilities to generate rich, visually appealing study materials that rival professionally designed textbooks. This post explores the improvements we made and the architectural decisions that enabled this transformation.

The Problem: Plain Text Isn't Enough

User Feedback

The feedback was clear and consistent:

"Notes look like a list of bullet points" — Lacked visual hierarchy and structure
"Math formulas are unreadable" — Plain text with Unicode characters instead of proper notation
"No diagrams or visuals" — Missing the visual aids that make complex concepts understandable
"Text gets cropped" — Poor layout and spacing issues
"Looks unprofessional" — Lacked the polish of quality study materials

Technical Limitations

Our initial implementation had several constraints:

Content Generation: AI-generated markdown-formatted text only
Display: Basic HTML rendering with limited formatting
Formatting: Limited to basic markdown (bold, bullet points, headers)
Math: Plain text formulas with Unicode characters (no proper rendering)
Storage: Plain HTML string in database

The result was functional but visually unappealing content that didn't match the quality of the AI-generated insights.

Our Solution: A User-First, Extensible Architecture

The Core Philosophy

We adopted a user-first approach where we build user-facing capabilities first, then make them extensible for Cereby AI to leverage. This ensures:

Consistency — Users and Cereby use the same underlying systems
Reusability — Features built for users can be programmatically used by Cereby
Quality — User-facing features are tested and refined before Cereby uses them
Portability — Cereby can seamlessly integrate with user-created content

Implementation Strategy

Phase 1: Build User-Facing Capabilities

Enable users to manually create rich, visual study materials
Build image upload, diagram editors, math equation input
Create rich text editing with proper formatting

Phase 2: Create Extensible APIs

Build programmatic interfaces that Cereby can use
Expose content creation, visual element, and formatting APIs

Phase 3: Cereby Integration

Enable Cereby to use the same APIs users use
Ensure AI-generated content matches user-created quality

This approach meant that when Cereby generates notes, it uses the exact same systems that users use to create their own notes, ensuring consistency and quality.

Major Improvements

1. Rich Visual Design System

We completely overhauled the visual design, transforming notes from plain text to professionally designed study materials:

Typography system — Multiple font families, proper sizing hierarchy, optimized line heights
Subject-specific color themes — Math (blue), Science (green), History (red), Language (purple)
Proper layout & spacing — Grid system with consistent margins, card-based layouts, responsive columns
Visual hierarchy — Section headers with icons, numbered sections, callout boxes, progress indicators

Result: Notes now look professional and are easy to read, with clear visual structure.

2. Enhanced Math Rendering

We integrated proper LaTeX rendering for mathematical notation, solving the unreadable formula problem:

Inline and block math — Professional mathematical notation
Comprehensive symbols — Greek letters, operators, relations, set theory symbols
Math visualizations — Graph plotting, equation solving steps, geometric shapes

Result: Mathematical content renders with professional-quality notation that's easy to read.

3. Visual Elements Integration

We added comprehensive support for diagrams, charts, and images:

Diagram integration — Flowcharts, sequence diagrams, concept maps
Data visualizations — Bar charts, line graphs, pie charts, scatter plots
Image management — User uploads, AI image generation, stock image libraries

Result: Notes can now include rich visual aids that make complex concepts easier to understand.

4. Content Structure Enhancement

We moved beyond bullet points to structured, organized content:

Template system — Cornell format, outline format, concept maps, comparison tables, timelines
Specialized sections — Introduction, Key Concepts, Formulas, Examples, Practice Problems, Summary
Smart content blocks — Definition boxes, theorem/proof blocks, code blocks, callouts
Navigation — Auto-generated table of contents, section navigation, progress tracking

Result: Notes are well-organized, easy to navigate, and structured for effective learning.

5. Rich Content Editing

We replaced basic HTML rendering with a professional rich text editor:

WYSIWYG editing — Rich formatting, code blocks, math equations, image embedding
Math equation editor — LaTeX input with live preview and equation library
Template selector — Choose, apply, and customize templates

Result: Users can create and edit rich, formatted content with the same tools Cereby uses.

6. Quiz & Flashcard Enhancements

We extended visual improvements to quizzes and flashcards:

Quiz enhancements — Image support, math equations, visual questions, diverse question types
Flashcard enhancements — Image cards, rich formatting, audio support, multiple study modes

Result: Quizzes and flashcards are now as visually rich and engaging as notes.

Results & Impact

User Experience Improvements

Note Quality Score: Improved from 2.5/5.0 to 4.5+/5.0 (user rating)
Visual Appeal: 90%+ users find notes visually appealing (up from 30%)
Readability: 95%+ users find notes easy to read (up from 60%)
Math Rendering: 100% of formulas render correctly (up from 40%)

Engagement Metrics

Note Creation Rate: 50%+ increase in note creation
Note Revisit Rate: 70%+ users revisit created notes (up from 40%)
Feature Adoption: 80%+ users use enhanced features
User Satisfaction: Significant improvement in user feedback

Technical Metrics

Rendering Performance: <2s for note rendering
Math Accuracy: 99%+ LaTeX rendering accuracy
Mobile Compatibility: 100% feature parity on mobile

Lessons Learned

1. User-First Approach Pays Off

Building user-facing capabilities first, then making them extensible for AI, ensured consistency and quality. Users and Cereby now use the same systems, creating a unified experience.

2. Visual Design Matters

The visual design improvements had a massive impact on user perception and engagement. Professional-looking content is more engaging and effective for learning.

3. Math Rendering is Critical

For STEM subjects, proper math rendering is non-negotiable. Proper LaTeX integration transformed how users interact with mathematical content.

4. Templates and Structure Improve Learning

Structured content with templates and sections makes notes more effective for learning. The organization helps students understand relationships and hierarchies.

5. Visual Aids Enhance Comprehension

Diagrams, charts, and images significantly improve understanding of complex concepts. The visual element integration was one of our highest-impact improvements.

Future Enhancements

We're continuing to improve Cereby's capabilities with:

Interactive features (expandable sections, embedded quizzes)
Advanced visualizations (physics simulations, molecular visualizers)
Collaboration features (shared notes, version history, export options)

Conclusion

The improvements we made to Cereby AI's capabilities transformed it from a system that generated functional but visually unappealing content to one that creates rich, professional-quality study materials. The key was:

User-first architecture — Build for users, then extend for AI
Rich visual design — Professional typography, colors, and layout
Proper math rendering — LaTeX integration for mathematical notation
Visual elements — Diagrams, charts, and images
Structured content — Templates, sections, and organization

These improvements resulted in a 4.5+/5.0 note quality score (up from 2.5/5.0), 50%+ increase in note creation, and 90%+ users finding notes visually appealing.

For teams building similar AI systems, our key takeaway is: invest in visual design and content structure from the start. The quality of the output directly impacts user engagement and learning effectiveness.

Want to learn more about Cereby AI? Check out our Building Cereby AI and Optimizing Cereby AI Performance posts, or reach out on Twitter.