Case study

Imagine Stories: an AI app for dyslexia and ADHD therapy

Speech therapists, therapists and parents lacked stories tailored to a particular child. We designed and built Imagine Stories: a web app with generative AI that creates texts and illustrations for children with dyslexia and ADHD, with control over typeface, background and reading pace.

Product Hunt

3

AI models in the product: OpenAI, Anthropic Claude, Stable Diffusion

WCAG 2.1

criteria 1.4.3 and 1.4.8 implemented with people with dyslexia in mind

2

dyslexia-friendly fonts: Lexend and OpenDyslexic

We designed and built Imagine Stories: from product workshops, through wireframes and high-fidelity prototypes, to a Next.js/React app integrated with OpenAI, Anthropic Claude and Stable Diffusion. The platform generates text and illustrations in real time and lets users adapt how they are presented to each child's needs.

Product type
Generative AI web app
Market
Education and therapy (speech therapy)
Technologies
  • OpenAI
  • Anthropic
  • Stable Diffusion
  • Replicate
  • Vercel
  • Next.js
Key facts
  • Text and illustrations generated in real time
  • Predefined characters and scenes, plus custom story elements
  • Font, colour and background editing to suit each patient
  • A player that matches reading pace to the child's abilities
  • Lexend and OpenDyslexic fonts and backgrounds with tuned contrast
  • Next.js/React with OpenAI, Anthropic Claude and Stable Diffusion integration

Reading therapy stories that are created on the fly and can be tailored to a specific child.

AI-generated story in the Imagine Stories app on a phone
Child reading a therapeutic story on a tablet

Goals

  • 01

    Materials on demand

    Address the shortage of speech therapy materials with a tool that generates new stories.

  • 02

    Tailored to the child

    Let users set characters, scenes, reading pace and text appearance to each patient's individual needs.

  • 03

    Text that is easier to read

    Meet the WCAG 2.1 criteria for visual presentation and contrast, with people with dyslexia in mind.

Process

Empathize Define Ideate Design / Prototype & Delivery
  1. Product workshops
    Product workshops

    The key needs of speech therapists, therapists and parents.

  2. Wireframing
    Wireframing

    Screen structure: creating, editing and playing stories.

  3. Product design
    Product design

    An interface shaped around the requirements of therapists and parents, with features that support people with dyslexia.

  4. Hi-fi prototyping
    Hi-fi prototyping

    High-fidelity prototypes before building the app.

  5. Development and support
    Development and support

    Next.js/React and integrations with OpenAI, Anthropic Claude and Stable Diffusion.

What we delivered

A platform where a story is created, tailored to the patient and used for reading practice.

  • Story generation - text and illustrations created in real time and adapted to each new part of the story.
  • Characters and scenes - predefined elements to choose from, with the option to add your own.
  • Editing and personalisation - changing fonts, colours and backgrounds, e.g. for people with colour blindness or visual impairments.
  • Player - reading pace set by the therapist to match the child's abilities.
  • Dyslexia support - switching between Lexend and OpenDyslexic fonts, and text backgrounds with research-based contrast.
  • Development - a Next.js/React app integrated with OpenAI, Anthropic Claude and Stable Diffusion.
Story character selection screen in Imagine Stories

Challenge: too few materials for reading therapy

The project addresses a shortage of speech therapy materials. Speech therapists, therapists and parents need stories tailored to each child's individual needs, and there are too few ready-made texts.

Text alone isn't enough. For children with dyslexia, presentation matters too: typeface, background colour and contrast, and in reading therapy, pace as well. The product had to combine generative AI with tools that let users control all of this.

The tool had to be functional and, at the same time, fit the specific requirements of therapists and parents.

Story with a reading pace player in the desktop view

Solution: a story generated and tailored to the child

Users build a story from predefined characters and scenes or add their own elements, and AI generates the text and illustrations on the fly.

Stories and images adapt to each new part of the narrative, so the storyline stays flexible and every story can unfold differently. The finished text can be edited: font, colours and background can be changed, e.g. for colour blindness or visual impairments. The player matches reading pace to the patient's abilities, and the therapist sets it for a specific child.

Support for people with dyslexia

The accessibility features meet WCAG 2.1 criteria 1.4.8 (Visual Presentation) and 1.4.3 (Contrast). Users switch between the Lexend and OpenDyslexic fonts, which make letters easier to recognise, and choose the text background colour. The colour choices are based on the study by Rello and Baeza-Yates, "Good Background Colors for Readers: A Study of People with and without Dyslexia".

Boy reading a generated story on a monitor
Story editor with font size and typeface options

Results: therapy material created on the spot

Speech therapists, therapists and parents got a tool in which therapy material is created on the fly and can be tailored to the child straight away.

One platform combines content and illustration generation, text presentation settings and a player with adjustable pace. A therapist can prepare a new story and immediately set it up for a patient's needs, instead of searching for ready-made materials.

Child with a tablet during a reading exercise
Mobile story view with the current passage highlighted

Written by Published Updated

An idea for a generative AI product?

We start with a workshop where we agree who it should help, and with what.

Let's talk