Bella

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

An AI-driven 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.

That companion is Bella, a social robot children can train through interaction while exploring machine learning and receiving personalized guidance across science, math, languages, creativity, and problem-solving. By making the logic behind smart systems tangible, Bella builds the computational thinking young minds need to shape the world they’re growing up in.

Industry
Education
Services
Branding
Website Design
Website Development
Web App Design
Web App Development
Mobile App Design
Mobile App Development
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 instruction, 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 all stages of design and development, keeping the needs of children and teachers at the center of every decision.

App design

Bella’s app had to control a physical robot in real time, function offline, and serve two distinct audiences simultaneously: children interacting with the robot and teachers designing their lessons. For a product this complex, the design needed to balance engagement and clarity for both user groups while staying in sync with the hardware.

{{dropdowns-1}}

Our team helped translate an abstract AI curriculum into a hands-on learning loop where children built, trained, and tested a real robot on their own. Teachers gained the ability to turn any lesson into a robot task, while the offline architecture kept the platform viable in schools without connectivity.

Woman hanging a Join Kids to Learning poster with the Bella robot

App development

The development scope covered three interconnected parts: a PWA with native-app capabilities, a web admin panel, and a stable connection to a robot. Since many schools have limited internet access and use older devices, the app had to work offline and perform well on modest hardware while staying dependable as the robot’s software changed.

{{dropdowns-2}}

Over about nine months of development, we took the app from the first prototype to a stable, demo-ready product. The flexible architecture enabled new features, starting with multilingual support for schools in different countries, while keeping the app adaptable to evolving needs and future expansion.

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

Branding

While the product team was designing the app, our brand team was building Bella’s identity in parallel, giving the product a recognizable face it could take to schools, partners, and investors. In just one month, we needed to create a brand that would feel playful for children and credible for educators, while being strong enough to carry Bella forward as an independent company.

{{dropdowns-3}}

Bella got a ready-to-use brand that the client could immediately use in product demos, partner meetings, and pitches to schools. A cohesive identity system gave the team a foundation for expanding Bella’s presence while building a brand the future standalone company could fully own and develop.

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

Website design
& development

The landing page had to win over schools, educators, and investors, striking a balance between a friendly and professional tone. Early concepts focused on the robot’s hardware, but Bella’s real value lay in the learning software, and this was what we set out to highlight in a clear yet flexible way as the product continued to evolve.

{{dropdowns-4}}

The landing page reframed Bella as a classroom-ready learning platform rather than a standalone gadget. It showed schools how children could train AI offline and how little preparation each lesson required, making the product’s practical value clearer for educators. As Bella moved into its next stage as part of the IchiZero spin-off, the site continued to support the product within the company’s broader digital presence.

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

Results

  • End-to-end digital ecosystem delivered from scratch in about 11 months took Bella from early prototypes to a product ready for its first classrooms
  • Bella was deployed through AI Studio, a national AI literacy programme launched in October 2026 across four Finnish learning centres and aiming to reach 19,000 sixth-graders in its first year
  • Child-first app experience made AI education accessible to children aged 6–12, with no coding skills or specialist teachers required
  • Role-based admin panel allowed schools to run robot lessons and manage devices without technical expertise, lowering the barrier to adoption
  • Landing page focused on the problem and its solution translated Bella’s complex technology into a clear value case for schools and partners
  • Offline-capable PWA removed the need for internet and data storage, opening Bella to schools with limited infrastructure and strict privacy requirements
  • A production-ready Webflow site gave Bella a scalable web presence to grow alongside the platform as an independent company
  • A cohesive brand identity positioned Bella as a credible, distinctive player in the edtech market

{{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 KawsarFounder of Bella

Ready to discuss your project with us?

Let’s talk about how we can design, build, and grow a product that puts you in the top 1%
GET IN TOUCH

01 · Discovery & product definition

We ran research workshops to understand how children aged 6–12 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 & needs
  • Learning & content logic

02 · Audience-focused UX

When defining 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

03 · Training inside the task

We explored two ways to fit model training into the app: as a separate flow or built into each flashcard. The client chose the second, so the goal of completing a task was not only to create an action algorithm but also to train the robot to perform specific tasks. This meant that when a block needed a new skill, like “Find an apple,” the child showed an object or recorded a sound, and the confidence bar increased with each example.

Deliverables:

  • UX design concepts
  • Video & audio training
  • Live confidence feedback

04 · Block-based algorithm builder

We designed a visual block editor that lets children program robot behavior without writing code. By combining movement commands, object-scanning actions, and sound instructions into branching algorithms, they learn to sequence actions and solve each flashcard task.

Deliverables:

  • Branching logic
  • In-context hints

05 · App UI design

Our designers shaped the app interface around the flashcard training flow and intuitive robot interaction. Pixel illustrations, videos, and dynamic elements created a playful, immersive environment that invited exploration and discovery without making the learning experience feel overly simplified.

Deliverables:

  • Over thirty UI screens designed
  • Video & animation integration

06 · Admin panel UI

Bella’s admin panel is where lessons start: teachers create the flashcards children later solve with the robot. We designed it for two roles: creating and assigning activities and homework, and admins managing the school’s robots and user accounts. A clean layout and filled icons in neutral tones 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 · PWA development

We built the app as a PWA, so schools could open it right away, with no app store or installation. Following the approved designs, we developed the screens where children worked through lessons and flashcards, keeping the experience smooth and easy to use in the classroom.

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

Deliverables:

  • Offline-capable PWA
  • Responsive interface

02 · Robot integration

The robot software changed with every prototype, so we worked closely with the client’s engineers to keep each app release aligned. The PWA connected directly to the robot over the local network, letting lessons run with no internet or external servers. To keep the connection stable across devices, we built custom solutions for certificate handling and robot communication, including in-app setup guidance.

Deliverables:

  • Local robot connection
  • In-app setup guidance

03 · Backend & admin panel

Teachers created tasks in the admin panel, so we built the admin panel and the app on a shared data structure, ensuring each task’s logic carried over between the two without loss. Alongside the core features, we added a Resources section where admins could upload guides and videos, helping schools get started with the robot.

Deliverables:

  • Backend & data model
  • Admin panel
  • Resources library

04 · Testing & stabilization

We iterated through testing with developers and client testers, refining robot interactions, offline logic, and lesson flows on real devices, with regular client feedback guiding each round of changes. The final month went to regression testing and UI polish, leaving the app stable and ready for its first users.

Deliverables:

  • Real-device testing
  • Regression testing

01 · Exploration & conception

Since Bella had to appeal to both children and educators, we decided to combine modernity with brightness, making the brand feel innovative yet approachable and fun. Our designers developed two identity concepts: one built on pixelated elements, gradients and rounded shapes, and another with an innovative, accessible visual style that emphasized technology. The client chose to combine the strongest elements of both.

Deliverables:

  • Brand concepts
  • Visual direction

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:

  • Wordmark & logomark

03 · Brand identity

Extending the logo idea, we built the visual identity around pixelated gradients in a soft, bright palette to convey expressiveness, technology, and progress. The glass effect added variety and lightness to the brand, setting the spirit of digitalization, while colorful pixel icons and lively imagery of children interacting with the robot carried the playful aesthetic across the website.

Deliverables:

  • Color & typography system
  • Brand kit

04 · Brand guidelines

Finally, we brought the identity together in a set of brand guidelines covering logo usage, color and typography systems, graphic elements, and imagery. They gave the client’s team a single reference for keeping Bella consistent across the app, the website, and future touchpoints as the company grew.

Deliverables:

  • Brand guidelines
  • Usage rules

01 · Market research

To understand how the industry positions itself, we analyzed the landing pages of leading educational robotics and edtech platforms. The insights pushed us toward a problem-solution narrative that would show Bella’s market potential and make the value clear to both schools and investors.

Deliverables:

  • Competitive research
  • Content gap analysis

02 · Structure & content

Based on competitor analysis, 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. It opened by introducing Bella, demonstrating what it could do and how it taught, and addressing schools’ biggest concerns: privacy, setup time, and teacher effort.

Deliverables:

  • Landing page structure
  • Content strategy

03 · Landing page design

We carried the brand’s pixel aesthetic into a minimal page with a strong character, balancing a playful mood with product-focused clarity. Grounded by photos from classroom demos with children and the robot, the page made the product’s real-world application immediately clear.

Deliverables:

  • Page sections design
  • UI kit

04 · Motion design

Animation helped bring Bella’s personality to the landing page, making it feel more tangible. Through the robot’s blinking eyes, playful reactions, and scroll-driven reveals, visitors could intuitively understand how Bella learns and responds without heavy technical explanations.

Deliverables:

  • Robot animations
  • Interactive scroll scenes

05 · Webflow 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

Team

  • 1 PM
  • 2 Brand Designers
  • 2 UI/UX Designers
  • 2 Web Designers
  • 1 Frontend Developer
  • 1 Backend Developer
  • 1 QA Specialist

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