AI product · Learning experience

Character Compass: Avatar Builder 5000

A classroom-ready avatar experience that connects guided self-reflection, AI image generation, teacher workflows, and cloud processing.

RoleProduct design, instructional strategy, UX, and full-stack implementation
AudienceMiddle school learners and teachers
StatusBuilt and iterated in a live learning context

The challenge

Virtual classroom icebreakers and social-emotional activities can feel like one more survey. The opportunity was to create something learners would choose to engage with while giving teachers a practical way to manage participation and outputs.

The experience also had to handle multiple simultaneous users, longer-running image generation, session state, stored results, and a simple interface that did not expose that complexity.

The design insight

Image generation alone was not the experience. The useful product was the guided decision path around it: learners made character choices that encouraged reflection, while teachers received a separate management workflow.

This reframed the work from an AI novelty into a small learning platform.

The solution

Character Compass guides a learner through structured character-building decisions and turns those choices into a personalized animal avatar. A teacher dashboard supports classroom sessions, submissions, and administrative control.

The product combined:

  • Guided learner choices
  • AI-generated personalized avatars
  • Teacher dashboard and classroom controls
  • Session and submission management
  • Responsive browser interface
  • External processing for longer-running AI work

A consequential architecture decision

The first implementation processed image requests inside Wix. Testing exposed execution limits, slow responses, and unreliable handling of large image outputs.

The architecture was redesigned so Wix Velo and Wix CMS managed the interface and application data while a Railway-hosted Node.js service handled external AI generation asynchronously. Separating those responsibilities kept the browser experience responsive and made the processing workflow more dependable.

Iteration

The product evolved through interface redesign, prompt refinement, dashboard changes, database restructuring, API testing, error handling, and deployment testing. The strongest lesson was that an AI feature becomes useful only when the surrounding workflow, failure states, and human roles are designed with equal care.

Evidence status: The narrative is based on the current public case study and resume. Approved screenshots, a system diagram, dates, collaborators, and measured outcomes are still required before publication.

What this project demonstrates

  • Connecting an instructional goal to a working product workflow
  • Designing distinct learner and teacher experiences
  • Recognizing an architectural bottleneck through testing
  • Moving long-running AI processing outside the primary site runtime
  • Treating iteration and error handling as core design work