Turni, product design case study, Florencia Sepúlveda

End to endDe punta a punta

Brand, design system, and UI, designed and prototyped end to end, then built in React by a developer.Marca, design system y UI, diseñados y prototipados de punta a punta, y después construidos en React por un desarrollador.

Two sidesDos lados

One product for two users: trainers managing their agenda, and students booking classes.Un producto para dos usuarios: entrenadores gestionando su agenda, y alumnos reservando clases.

ValidatedValidado

Tested with real trainers across disciplines, with genuinely positive feedback.Probado con entrenadores reales de distintas disciplinas, con feedback genuinamente positivo.

Chapter 01 · The setupCapítulo 01 · El planteo

Trainers across gyms, tennis, and more were running their whole schedule through back-and-forth WhatsApp messages.Entrenadores de gimnasios, tenis y más manejaban toda su agenda a través de mensajes de WhatsApp de ida y vuelta.

Turni started from talking to a lot of independent instructors, gym trainers, tennis coaches, all kinds. They were juggling the same things: scheduling clients over endless WhatsApp threads, sending reminders by hand, and keeping track of payments on the side. Coordinating a single time slot could take a dozen messages.Turni nació de hablar con un montón de instructores independientes, entrenadores de gimnasio, profes de tenis, de todo. Hacían malabares con las mismas cosas: agendar clientes por hilos infinitos de WhatsApp, mandar recordatorios a mano, y llevar la cuenta de los pagos por separado. Coordinar un solo horario podía llevar una docena de mensajes.

There are tools for this, but most felt built for features rather than for the person using them, with little thought given to the actual experience. And few fit the Argentine market well, where there's real room for something simple.Hay herramientas para esto, pero la mayoría se sentían hechas para las features y no para la persona que las usa, con poca atención a la experiencia real. Y pocas encajaban bien en el mercado argentino, donde hay lugar real para algo simple.

Chapter 02 · The frictionCapítulo 02 · La fricción

For an independent trainer, every hour spent coordinating is an hour not training, and not earning.Para un entrenador independiente, cada hora coordinando es una hora que no entrena, y que no factura.

The core pain wasn't a missing feature. It was time. Independent instructors run their own admin, and the back-and-forth eats into the hours they could be teaching. The basics they actually needed were simple: reminders over WhatsApp, and a clear handle on payments.El dolor central no era una feature que faltaba. Era el tiempo. Los instructores independientes se manejan su propia administración, y la ida y vuelta se come las horas que podrían estar dando clase. Lo básico que realmente necesitaban era simple: recordatorios por WhatsApp, y un manejo claro de los pagos.

So the goal for Turni was narrow on purpose: cover those basics really well, and make the experience feel calm and obvious instead of piling on options.Así que el objetivo de Turni fue acotado a propósito: cubrir esos básicos realmente bien, y que la experiencia se sintiera tranquila y obvia en vez de amontonar opciones.

Chapter 03 · The ideaCapítulo 03 · La idea

A product both the trainer and the student could use without a manual.Un producto que tanto el entrenador como el alumno pudieran usar sin un manual.

Turni is one product with two sides. Trainers get a dashboard to manage their agenda, their students, and their class packs. Students sign up, either to recurring packs or class by class, depending on how each trainer works.Turni es un producto con dos lados. Los entrenadores tienen un dashboard para gestionar su agenda, sus alumnos y sus packs de clases. Los alumnos se anotan, ya sea a packs recurrentes o clase por clase, según cómo trabaje cada entrenador.

The idea was to keep both sides light. The trainer shouldn't need training to run it, and the student should be able to book in a few taps.La idea era mantener los dos lados livianos. El entrenador no tendría que capacitarse para usarlo, y el alumno debería poder reservar en pocos taps.

FIG. 1 The brand and design system that hold both sides together.La marca y el design system que sostienen los dos lados juntos.

Turni shown on two laptops: the public class-packs page and the trainer dashboard.

FIG. 2 One product, two sides, the public page and the trainer dashboard.Un producto, dos lados: la página pública y el dashboard del entrenador.

Chapter 04 · The workCapítulo 04 · El trabajo

I designed the brand, the design system, and the UI, and prototyped it in Figma Make for a developer to build.Diseñé la marca, el design system y la UI, y lo prototipé en Figma Make para que un desarrollador lo construyera.

I worked on the whole thing end to end: the brand and visual identity, a small design system to keep it consistent, and the full UI for both the trainer and the student sides. Instead of writing the code myself, I built realistic prototypes in Figma Make and handed them to a developer, who built it in React. That's where my front-end background paid off, I could prototype interactions that felt real and hand off something a developer could build straight from.Trabajé en todo de punta a punta: la marca y la identidad visual, un design system chico para mantenerlo consistente, y toda la UI tanto del lado del entrenador como del alumno. Armé prototipos realistas en Figma Make y se los pasé a un desarrollador, que lo construyó en React. Ahí es donde mi background de front-end rindió, podía prototipar interacciones que se sentían reales y entregar algo desde lo cual un desarrollador podía construir directo.

Keeping a design system even on a small product meant the two sides felt like one thing, and changes stayed cheap to make.Mantener un design system incluso en un producto chico hizo que los dos lados se sintieran como una sola cosa, y que los cambios siguieran siendo baratos de hacer.

Turni trainer views on two tablets: the class calendar and the chronological class list.

FIG. 3 The trainer side, calendar and class-list views of the agenda.El lado del entrenador: vistas de calendario y de lista de clases de la agenda.

Turni on four phones, showing the student-facing booking and onboarding flow.

FIG. 4 The student side, booking and onboarding on mobile.El lado del alumno: reserva y onboarding en mobile.

Chapter 05 · What changedCapítulo 05 · Lo que cambió

We tested it with working professionals, and the feedback was genuinely positive.Lo probamos con profesionales en actividad, y el feedback fue genuinamente positivo.

We validated Turni with real trainers across different disciplines, and the feedback was genuinely positive. For a product built by a designer and one developer, that was a strong sign we had understood the problem.Validamos Turni con entrenadores reales de distintas disciplinas, y el feedback fue genuinamente positivo. Para un producto hecho por una diseñadora y un desarrollador, eso fue una señal fuerte de que habíamos entendido el problema.

Chapter 06 · What I took from itCapítulo 06 · Lo que me llevé

Turni is the clearest example of what my mix of design and code lets me do.Turni es el ejemplo más claro de lo que me permite hacer mi mezcla de diseño y código.

Turni is the project where my background comes together most clearly. I framed the problem from real conversations, designed the brand and the system, created the screens, and prototyped it in Figma Make for a developer to build. Start to finish.Turni es el proyecto donde mi background se junta más claramente. Encuadré el problema a partir de conversaciones reales, diseñé la marca y el sistema, creé las pantallas, y lo prototipé en Figma Make para que un desarrollador lo construyera. De principio a fin.

It also taught me to keep scope honest. The product worked because it did a few important things well, not because it tried to do everything.También me enseñó a ser honesta con el alcance. El producto funcionó porque hacía unas pocas cosas importantes bien, no porque intentara hacer todo.