Back
Using artificial intelligence tools to build a web app that is aimed at replacing an uninnovated space within an industry niche
The process of designing and building a web app to fill a market gap using artificial intelligence
An independently-led, AI-enabled project named Splattr

Challenge
Speech therapists spend significant time searching for visuals, formatting worksheets, and manually matching images to therapy activities. Existing workflows are repetitive, fragmented, and slow – making resource creation a major bottleneck in session preparation.

Solution
An intuitive, easy-to-use app that allows speech therapists to generate visual resources tailored to the unique teaching materials and client needs.

What I delivered
  • Designed screens and prototypes in Figma
  • Developed the platform using Claude
  • Designed the UX end-to-end experience and interaction flows for AI image generation
  • Reduced user interactions for seamless use, including developing async multi-page image generation workflows
  • Deployed the platform for beta testing and worked alongside an industry specialist to iterate and develop features
  • Created reusable UI components, documentation, and systems to help AI build consistent UI primitives
  • Integrated the AI build with Supabase, Google Gemini, and Vercel for deployment
  • Outsourced, briefed, and collaborated with a junior software developer during development (feature annotations, Figma hand offs, project management, etc.)

Timeline
Roughly 4 months so far.
Pictured: a marketplace listing for visual resources cannot be edited – pigeonholing speech therapists to the resource pool only available to them.

Legacy processes, outdated visuals, paywalls, and limited ability to customise resources

For the speech therapist I am working with, she spends several hours every week creating her own flashcards for the children she works with.

Rather than use these hours on admin or resting outside of work hours, most of it is spent gathering images from legacy visual resource banks that have not evolved to support modern resource creation, nor are the images optimised for her clients’ needs.

The result? Hours spent gathering mediocre-at-best visual resources that hardly engage their learners.

Is there a way people like her can create visual resources personalised to her clients’ needs without scouring the internet for images with the appropriate licensing?
Initial prototype of swim lanes charting actions on canvases further detailing owner, frontstage, backstage, tools and support required. These user inputs became the basis for the next prototype.
Validating the tools to solve the problem: introducing artificial intelligence image generation

On top of how visual resources on the internet are never truly personalised, the UX processes of some of these platforms are not well designed for users. Primitive UI, clunky processes, and unexciting to use.

Using Google’s artificial intelligence models, I was able to prototype quickly to prove that AI had the capability to produce personalised visual resources based on specific words a speech therapist would want to teach to their clients.

The results? Astounding. It proved the ability to produce bespoke images in styles relatable to clients at lighting speed.
Example Figma screens and quickly-prototyped iterations of key user flows. 
Figma component library of UI primitives as a reference point for both the software dev and artificial intelligence agents – which are, in my experience, terrible at creating consistent on-brand UI elements unless specifically instructed to.