Loading...
EdTech / AI Education4 months · 3-person team
VisiLearn: Making Machine Learning Visually Learnable
How RedGobble built VisiLearn — a visual-first platform that turns tokenizers, embeddings and attention into interactive diagrams so students and developers actually understand NLP.
AI DevelopmentSaaS DevelopmentUI/UX Design
Client
RedGobble Product
Industry
EdTech / AI Education
Timeline
4 months
Our Role
Product concept, interactive visualizations, platform build
The Problem
NLP and machine learning concepts — tokenizers, embeddings, attention — are usually taught from dense text. Learners hit a wall: they memorise terms but cannot see what is happening. RedGobble set out to close that gap with a product that visualises these concepts interactively, letting people watch the mechanics instead of decoding prose.
Research & Discovery
How we validated the problem and shaped the approach before building.
Mapped common learner misconceptions in core NLP topics from courses, forums and teaching communities.
Evaluated which concepts benefit most from visualisation: tokenization, embedding spaces, attention maps and sentiment pipelines rank highest.
Studied interaction design patterns from math and physics visualisers that successfully teach abstract ideas.
Prototyped three visualization formats with learners and kept the ones that produced real comprehension gains.
Architecture
VisiLearn is a Next.js web application with interactive, canvas-based visualizations generated from real model behaviour. Each concept page pairs a step-by-step narrative with live visualizations — token streams splitting into sub-words, embedding distances plotted in reduced dimensions, attention weights drawn as arcs between tokens. LLM-backed explainers answer follow-up questions inside the context of each visual, keeping learning hands-on rather than passive.
Next.js + React + TypeScript — fast, SEO-friendly platformCanvas / SVG rendering — interactive attention maps and embeddingsPython + Hugging Face models — real tokenizer and model behaviourLLM API integration — contextual explainers per conceptTailwind CSS — design-system-consistent interface
Development Process
1
Concept sprint: identify the highest-impact visualisations and define the learning flow.
2
Built real model pipelines first — tokenizers and small transformer models — so every visual shows genuine behaviour, not mock data.
3
Iterated the interaction design with learners in short feedback cycles.
4
Shipped as a web platform with a course builder so educators can structure lessons.
5
Published on the web for free access as an AI-education contribution.
Challenges & How We Solved Them
Visualising high-dimensional embeddings honestly without oversimplifying.
Used faithful dimensionality reduction and labelled axes, with caveats surfaced in the UI rather than hiding complexity.
Keeping visuals truthful to real model behaviour.
Every visualization renders from actual tokenizer/model output through the Python pipeline — no canned graphics.
Making it genuinely useful to both beginners and developers.
Progressive depth: a clear narrative layer first, then inspectable internals for those who want the mechanics.
Results
Launched as a live, free web platform
Interactive visualisations for tokenizers, embeddings, attention, sentiment and NER
Course builder for educators to structure visual lessons
Proof of RedGobble's depth in both AI engineering and interactive product design
Concepts visualised
Tokenization, embeddings, attention, NER, sentiment
Model fidelity
Real model output, not mock data
Platform
Web (Next.js), free access
Availability
Live at visilearn.vercel.app
Project Timeline
1
Concept & learner research
3 weeks
Topic selection, misconception mapping, format prototyping.
2
Model pipelines
4 weeks
Real tokenizer/transformer integrations producing visualisable output.
3
Platform build
7 weeks
Interactive visualizations, explainers, course builder.
4
Launch & iteration
Ongoing
Public launch, feedback loops, new concept coverage.
Lessons Learned
What we would carry into the next project — and what we apply to yours.
Showing real model behaviour beats hand-drawn diagrams for teaching credibility.
Learners teach product teams: the interaction formats that 'feel nice' often differ from those that teach.
A free, genuinely useful education tool earns authority and backlinks organically.
Business Impact
VisiLearn demonstrates RedGobble's ability to turn advanced AI expertise into approachable products — establishing topical authority in AI education and serving as a deployable or extensible platform for institutions.
Frequently Asked Questions
Everything You Need To Know
VisiLearn is a visual-first AI education platform that turns NLP and machine-learning concepts into interactive diagrams built from real model behaviour.
Students, developers and educators who struggle to grasp abstract NLP concepts from text alone.
Tokenizers, embeddings, attention maps, sentiment analysis and named-entity recognition, with more on the roadmap.
Yes. Every visual renders from actual tokenizer and model output — no canned graphics.
Yes. The course builder supports structured lessons, and RedGobble can customise it for institutions.
More Case Studies
Building MalwareX: AI-Powered Malware Detection for Android
How RedGobble designed and shipped MalwareX — a real-time AI malware detection platform that catches phishing, cloned apps and unknown threats that signature-based antivirus misses.
Wordique: A Gamified, AI-Personalized Vocabulary App
How RedGobble built Wordique — a language-learning app that uses spaced repetition and AI-personalised lessons to make vocabulary growth daily, measurable and genuinely engaging.
Have a Project Like This?
Tell us what you are building and get a tailored plan from the same engineering team.