Bella

Building a personalized AI-native learning journey powered by a robot companion

An AI-native learning platform reshaping the edtech landscape through physical robot companionship

About the project

Bella is a groundbreaking learning robotics platform, building the next generation of AI-native education. Rather than simply teaching children about artificial intelligence, Bella lets them learn directly with it — through a physical companion that observes, interacts, adapts, and grows naturally alongside every child.

At the heart of the platform is Bella, a social robot. Children teach it through interaction, explore machine learning through experimentation, and receive personalized guidance across science, math, languages, creativity, and problem-solving. Combining a physical companion, multimodal interaction, and on-device AI, Bella creates learning experiences that feel conversational. Built offline-first for classrooms with limited infrastructure, it syncs when connectivity returns, bringing equitable AI education anywhere in the world.

Services
Branding
Product Design
Website Development
Product Development
Industry
Education
Bella learning robot close-up with a Learn by Teaching label
Laptop showing the Bella flashcards dashboard on a coral desk

Challenge

Quality AI-driven education remains out of reach for many schools due to limited connectivity and resources. The client set out to close this gap with a personalized learning companion, independent of infrastructure. Our team helped create an AI-native platform combining physical AI, adaptive learning, and offline-first deployment to deliver a tailored experience to every child, regardless of location.

Our process

To bring the learning platform to life, we combined strategic discovery with rapid, iterative execution across every stage of design and development, keeping the needs of children and teachers at the center of every decision.

Branding

Before translating Bella into the app experience, we established a strong visual foundation, building a brand capable of carrying the product while making it distinctive and trustworthy.

{{dropdowns-1}}

Gradient tote bag with the Bella logo and a Let's Learn with Bella notebook

UX/UI design for app and admin panel

Designing for a product this complex required balancing engagement with clarity. We focused on making every interaction feel effortless without oversimplifying the experience.

{{dropdowns-2}}

Website design

To communicate Bella’s value to the right audiences, we designed a landing page that presented the robot, platform, and classroom use case in a clear visual narrative.

{{dropdowns-3}}

Two children using a tablet next to the Bella learning robot on the floor

Development

The final stage involved implementing the designs into a fully functional, offline-capable app and a responsive website, ensuring uninterrupted classroom learning and a scalable brand presence.

{{dropdowns-4}}

Meet Bella outdoor poster with the robot character on a city billboard stand

Results

  • End-to-end digital ecosystem was delivered within one year
  • Cohesive brand identity positioned Bella as a standout, credible player in the edtech market
  • Child-first app experience made complex robot interaction feel effortless and alive
  • Role-based admin panel gave teachers and admins full operational control without a deep technical background required
  • Conversion-focused landing page helped communicate Bella’s value clearly to potential users
  • Offline-capable PWA enabled uninterrupted learning through direct device-to-robot communication
  • Production-ready Webflow site set Bella up to scale its web presence alongside the platform’s growth

Review

{{review}}

Our approach

Strong results start with open dialogue. At every stage, we work closely with the client’s team, running workshops, gathering feedback, and refining ideas through multiple iterations. If your product needs the same level of care, contact us — and we’ll help turn complexity into an experience people can understand, trust, and use with confidence.

{{approach}}

{{slider-1}}

5.0
star iconstar iconstar iconstar iconstar icon

“As AI reshapes our society, education must not simply adapt — it must lead this transformation. Bella is our contribution to that future: a vision for how the next generation will learn, create, and thrive alongside AI. Halo Lab has been an exceptional partner in bringing that vision to life, translating ideas into thoughtful design and intuitive software with care and diligence.”

Portrait of Fahim Kawsar, Founder of Bella
Fahim Kawsar Founder of Bella

Ready to discuss your project with us?

Let’s discuss how we can craft a distinctive brand identity that captivates, connects, and converts.
BOOK A CALL

01  ·  Discovery & product definition

We ran research workshops to understand how children relate to technology and what makes it inviting. This helped shape an early-stage idea into clear requirements, mapping user roles, lesson logic, and evaluating robotics and PWA constraints.

Bella learning robot for kids shown with its wheel details beside a smiling child hugging the robot

Deliverables

  • User roles & system map
  • Learning & content logic

02  ·  Logo design

With Bella’s core values in mind, we built a wordmark from modular letterforms with detached pixel squares as a nod to programming. Such a metaphor reflected how children could collaboratively build something greater from smaller parts.

Deliverables

  • Twelve logo concepts
  • Wordmark & logomark

03  ·  Branding & visual direction

Extending the logo idea, we built the visual identity around pixelated gradients in a soft, bright palette to convey expressiveness, technology, and progress. The Neue Haas Grotesk typeface was chosen for clarity across all touchpoints.

Deliverables

  • Three brand design concepts
  • Brand guidelines
  • Brand kit

01  ·  App UX design

When mapping user journeys, we considered how children and teachers move through the product differently, accounting for confidence and interaction pace. The architecture and navigation were structured to keep the experience intuitive for both.

Bella mobile app video call screen on a smartphone lying on a coral armchair, with movement and video flow tags

Deliverables

  • App UX flows
  • Clear information architecture

02  ·  App UI design

Our designers built the app interface around the flashcard training flow and intuitive robot interaction. Pixel illustrations, videos, and dynamic elements created a playful environment that stayed engaging without feeling overly simplified.

Deliverables

  • Two app design concepts
  • Over thirty UI screens designed

03  ·  Admin panel UI

The admin panel was designed for two audiences — admins and teachers. A clean layout and neutral filled icons gave both full control over lessons, devices, and users regardless of technical experience, keeping every action accessible.

Parents at a laptop creating a flash card in the Bella admin panel for kids' lessons

Deliverables

  • Admin panel UI
  • Lesson management interface

01  ·  UX design

Based on competitor analysis of robotics and education platforms, we structured the page to guide schools, educators, and potential investors from first impression to a clear understanding of what Bella does and why it matters.

Deliverables

  • Landing page wireframe
  • User flows

02  ·  UI design

Using the existing brand system, we created a landing page design that balanced a playful mood with product-focused clarity. Grounded by photos from classroom demos with children and the robot, the page delivered an immediate and tangible impact.

Deliverables

  • Eight landing page sections
  • Branded UI components

01  ·  App development

We built the app as a PWA to run offline in classrooms, enabling communication with the robot without internet or external servers. Certificate handling and local data syncing required custom solutions for stable performance across devices.

Bella app lesson list with Video Explorer tasks on a smartphone next to branded denim, designed by Halo Lab

Deliverables

  • Offline-capable PWA
  • Robot communication logic

02  ·  Website development

The landing page was built in Webflow using GSAP for scroll-driven animations, Swiper for sliders, and Lottie for robot animations. Custom JavaScript handled interactions outside Webflow’s native capabilities, keeping the build performant.

Woman in a hoodie browsing the Bella learning solution website on a laptop

Deliverables

  • Production-ready website
  • Scroll-driven animations

03  ·  Testing & continuous iteration

We iterated through testing with developers and client testers, refining robot interactions, offline logic, and lesson flows on real devices. With everything validated, we prepared a full handoff with documented specs and dev-ready assets.

Deliverables

  • Robot interaction testing
  • Offline scenario validation
  • UX refinements

Team

A cross-functional team worked in close sync, continuously adapting to new insights from classroom trials and robot behavior.

  • 1 Project Manager
  • 2 Brand Designers
  • 2 UI/UX Designers
  • 2 Web Designers
  • 1 Front-end Developer
  • 1 Back-end Developer
  • 1 QA Engineer

Technologies

Our stack supported offline interaction, hardware communication, scalable content management, and smooth cross-platform UI.

Figma
Node.js
PWA
React
Webflow
WebSockets / Local network communication