Back
Quickly shipping features for a digital product using artificial intelligence agents based human-centred research
Splattr
A web app platform bringing together UIUX, user testing, and artificial intelligence

Challenge
  1. Speech pathologists spend hours creating visual resources.
  2. Speech pathology visual resources are unpersonalised to nuanced clinet needs.

Solution and Outcomes
  1. Reduced speech pathologist admin time from 2 hour to sub-15 minutes per week.
  2. Increased quality of visual resource output as evidenced by overwhemingly positive feedback.

What I delivered
  • Branding style guide and a useable visual system for artificial intelligence
  • 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 6 months so far.

Tools
Figma
GitHub
Claude

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.
Problem discovery: watching my sister spend hours building visual resources for speech pathology

Speech therapists spend hours gathering visual resources on apps not built for their use. Further, most existing visual resources are not modern or engaging.

This was validated through interviews conducted with 3 speech pathologists of 5+ years experience in the industry.
Problems identified and proof collected via interviews with industry workers.
Prototyping: testing with Minimum Viable Product built with Figma and artificial intelligence agents

With the power of generative artificial intelligence (AI), I could rapidly build a prototype to test solutions.

The most complex challenges  I had to validate first before building a prototype were:

  1. ✅ Validating that AI could generate personalised images matching specific prompts via testing various image generation models
  2. ✅ Ensuring consistent visual output from generative AI by incorporating agentic skills and clear style guides
  3. ✅ Scaling with quality code for core functions and features by working with a junior software engineer
  4. ✅ Database linking to store data 

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.
AI is merely a tool – not the decision maker: building the right features in a product

While AI agents can certainly build and develop quickly – what AI can never understand is what an end-user needs and how to make truly intuitive.

Introduce the human: I built my first screens in Figma championing features which would reduce workflow time through bulk-editing, automation, and user-friendliness via clear visual hierarchy:

  1. ✅ Bulk edit text to save time individually editing of text boxes
  2. ✅ Bulk generate and auto-place images within pages to save time drag and dropping

The knowledge of designing came from my own experience using a range of softwares, from complex ones such as Adobe Photoshop to more streamlined ones like Canva.