Rayuela・Independent project
Where does a therapist look before the next child walks in?
I designed and built Rayuela, from the first interview to a live app. It’s a patient and session management tool for therapists at a pediatric center.
Role
Designer and builder
Timeline
August to September 2026
Responsibilities
Research, product design, design system, front-end and data build
Platform
Web
01 - Context
Who it’s for, and why they needed it
Rayuela is a pediatric therapy center in San Miguel, Buenos Aires. About twenty professionals across psychology, psychopedagogy, speech therapy and occupational therapy see children from 3 to 12, in 45-minute sessions once or twice a week.
In April 2025 I interviewed the center’s co-founder, a speech therapist who works there. I asked what made her work harder. She started with billing, then moved to the clinical histories. They’re on paper, and for children who have been coming for years the file gets very thick. Looking for one specific thing in it is awkward.
There’s no technological tool. It’s all a notebook.
02 - What was there
Four things the work ran on
Histories on paper
Each child’s history was a physical file.
Thick and hard to search
For children seen for years, finding one specific thing meant going through everything.
Waiting lists in notebooks
Speech therapy alone had long ones, spread across several notebooks.
Private by rule
A history belongs to the center and the treating professional. Parents don’t see it, though they can ask for a report.
03 - The bet
One profile per child
Everything a therapist needs for a child goes in one profile: the history, the sessions, the studies and the notes. I held every screen to one test. How long does it take to find and log everything for a single patient touchpoint, from opening the tool before a session to finishing the note after? Today nobody can time that, because the answer is spread across a folder and a notebook.
04 - What it does
Five features, one profile at the center
Inicio
Your day, in order. Appointments at their real times, and the sessions still waiting to be written up.
Day timeline
To write up
Reminders
Perfil de paciente
Everything about a child in one place. Five tabs: summary, sessions, studies, notes and background.
Session history
Author-locked notes
Five tabs
Estudios
School and outside reports go in the profile. Upload a file straight to the child’s record and open it from there.
Upload
View in place
Observaciones
A note that remembers for you. Add a reminder date to a note and it shows up on Inicio until the day after.
Reminder date
Shows on Inicio
Agenda
Day, week or month. Open any appointment and land in that child’s profile.
Día
Semana
Mes
05 - Decisions
What I chose and what I ruled out
Chose
Professionals first
The center also needs an admin side, because the co-founder needs to see across everyone’s caseloads. I wanted to see how the professional’s side would look first, then move on to admin.
Access rules in the database
A therapist only sees the patients assigned to them, and only a note’s author can edit it. Hiding a button in the interface protects nothing on its own, so both rules are enforced in the database.
Reminders expire
A reminder stops showing the day after its date. I considered a “done” button and decided against it. Notes can’t be edited once they’re written, and a dismiss would have changed that.
Brand color at the edges
Therapists read this app for hours. The center’s colors live on Login, avatars, the sidebar and empty states. The tables, agenda grids and forms stay quiet.
Ruled out, and why
Mobile
Therapists at the center work from laptops, and the app holds long patient lists, studies, reports and a full agenda. All of that reads better on a wide screen. I scoped this MVP to desktop and tablet, where the work happens. Mobile is on the list.
A help section
I found no evidence the therapists needed one, and nobody would maintain it. It would have been a dead link.
06 - How I built it
From Figma to a live app
I designed the components and the first screens in Figma. Then I rebuilt each component in code with Claude Code and documented it in Storybook, so every screen is assembled from the same parts. The data lives in Supabase: Postgres with row-level security, login through Auth, and uploaded files in Storage. It's deployed on Vercel.
07 - Where it stands
Live, with fictional demo data
Deployed with fictional demo data. Next: the admin side and the booking flow. Mobile after that.
08 - Learnings
What I learned
Using it caught what tests didn’t
Two bugs only showed up when I clicked through the app myself. Popovers didn't close each other, and a scrollbar appeared on the week view for no reason. The automated checks passed both times.
Dates need a time zone
After I pushed a data migration one evening in Buenos Aires, every date landed a day out. A corrective migration fixed it. Now every date is computed in Argentina's time zone.
A component library makes change cheap
I built every component in Storybook. Each one lives in a single place, so when I change it, every screen that uses it updates together. Seeing each component on its own, in all its states, also let me review it before it reached a screen.
Shipping what I designed felt great
Working with Claude Code was a good experience. It acted like a partner that sped up my workflow, and for the first time I could design something and also ship it. Rayuela is the first project I built this way, and that was very rewarding. I can't wait to do more.
If I had more time,
Three things come next: a mobile version, an admin side, and a booking flow the secretary can use to organize the professionals’ calendars.
