Case Study: Character Compass – Avatar Builder 5000

​

Overview

Character Compass: Avatar Builder 5000 is an AI-powered web application that combines social-emotional learning, creativity, and artificial intelligence to help students build personalized animal avatars while encouraging self-reflection and classroom engagement. The project was designed to move beyond simple AI image generation by creating a complete classroom experience—from student interaction to teacher management—within a scalable web application.

​

The Problem

Traditional classroom icebreakers and social-emotional learning activities often struggle to capture student interest, particularly in virtual learning environments. The goal was to design an experience that students would genuinely enjoy while giving teachers an efficient way to manage submissions, monitor progress, and display student creations.

The challenge extended beyond creating attractive AI artwork. The application needed to support multiple students simultaneously, maintain user sessions, securely process AI image requests, manage classroom data, and provide a smooth, intuitive experience for both students and teachers.

​

Research & Discovery

Early planning focused on identifying how students naturally engage with digital experiences. Rather than asking students to complete another worksheet or survey, the project centered around creativity, personalization, and ownership.

Research quickly revealed that image generation alone would not create a compelling learning experience. Students needed a guided workflow that encouraged thoughtful choices while making the process feel effortless. Likewise, teachers required a dashboard that simplified classroom management rather than adding additional complexity.

​

Solution

The final solution was a full-stack AI-powered web application that guides students through a series of character-building decisions before generating a personalized avatar.

​

The application includes:

​

• Guided character creation

• AI-generated personalized avatars

• Teacher dashboard

• Student session management

• Classroom data management

• Real-time submission workflow

• Administrative controls

• Responsive web interface

​

Rather than functioning as an isolated AI image generator, Character Compass became an integrated classroom platform that supports both instruction and classroom management.

​

System Architecture

One of the most significant architectural decisions involved separating AI image generation from the primary Wix application.

​

Initial development attempted to process AI image requests directly within Wix. While functional, testing exposed several limitations, including timeout issues, long processing delays, and inconsistent handling of large image files.

​

After extensive experimentation, the architecture was redesigned.

​

The final implementation utilized:

​

• Wix Velo for the front-end application

• Wix CMS for application data

• Custom backend web modules

• Railway-hosted Node.js services

• External AI generation APIs

• Asynchronous image processing

• Secure API communication

​

Offloading image generation to Railway dramatically improved reliability while allowing the front-end application to remain responsive throughout the generation process.

​

Technical Challenges

Several significant technical obstacles emerged throughout development.

​

AI Processing

Large image generation requests frequently exceeded execution limits during early testing.

​

Session Management

Maintaining individual student sessions while multiple users generated avatars simultaneously required redesigning portions of the application logic.

​

Image Handling

Generated images needed to be stored, retrieved, resized, and displayed efficiently without degrading performance.

​

User Experience

Students needed a simple, intuitive workflow despite the complex technical processes occurring behind the scenes.

​

Each challenge required multiple rounds of testing before arriving at a stable solution.

​

Iterative Development

Character Compass was developed through continuous experimentation rather than a single linear build.

​

Development included:

• Multiple user interface redesigns

• Prompt engineering refinement

• AI workflow optimization

• Dashboard redesigns

• Database restructuring

• API testing

• Railway deployment testing

• Performance optimization

• Error handling improvements

• Extensive debugging and quality assurance

​​

Many components were redesigned several times before reaching the final implementation.

​

Technologies Used

Artificial Intelligence

• ChatGPT

• AI image generation APIs

• Prompt engineering

Development

• JavaScript

• HTML

• CSS

• Wix Velo

• Node.js

• Express

Cloud Infrastructure

• Railway

• REST APIs

• Asynchronous processing

Database

• Wix CMS Collections

​​

Skills Demonstrated AI Application Development

• Prompt Engineering

• Instructional Design

• UX Design

• Full-Stack Development

• Cloud Architecture

• API Integration

• Database Design

• Educational Technology

• Testing & Debugging

• Agile Iteration

• Problem Solving

​​

Lessons Learned

One of the biggest takeaways from this project was recognizing that successful AI applications depend as much on system architecture as they do on the AI itself. Separating AI processing into an external cloud service dramatically improved application stability, scalability, and user experience. Equally important was the iterative nature of development—continuous testing, refinement, and redesign were essential to transforming an initial concept into a classroom-ready application.

​

Impact

Character Compass demonstrates how artificial intelligence can be integrated into education through thoughtful instructional design and modern software architecture. Rather than using AI as a novelty, the project creates meaningful opportunities for creativity, self-expression, and classroom engagement while providing teachers with practical tools for managing student participation.

 

The completed application showcases expertise across AI integration, instructional design, cloud deployment, full-stack web development, prompt engineering, and user experience design, reflecting a comprehensive approach to solving complex educational challenges through technology.