MediBlas
Diseñé una app de chat que conecta pacientes con médicos certificados, con soporte para compartir exámenes y recibir diagnósticos — sobre un design system propio con light y dark mode.I designed a chat app connecting patients with certified doctors, with support for sharing test results and receiving diagnoses — built on a custom design system with light and dark mode.
El retoThe challenge
Una consulta médica remota no es una conversación cualquiera.A remote medical consultation is not just any conversation.
El paciente llega con una preocupación, a veces con urgencia, y necesita compartir información sensible —exámenes previos, historial— y recibir algo que pueda guardar y volver a leer: un diagnóstico.The patient arrives with a concern, sometimes urgent, needs to share sensitive information —previous tests, history— and to receive something they can keep and re-read: a diagnosis.
El reto era construir una interfaz de chat que soportara ese peso sin volverse una app clínica intimidante, y hacerlo sobre un sistema de diseño con requisitos explícitos: componentes con variantes y parámetros, web y mobile, light y dark mode y —lo más exigente— que cualquier cambio en el design system se propagara automáticamente a todos los diseños.The challenge was to build a chat interface able to carry that weight without turning into an intimidating clinical app, and to do it on a design system with explicit requirements: components with variants and parameters, web and mobile, light and dark mode and —the hardest part— any change in the design system propagating automatically to every screen.
El procesoThe process
Design Thinking arrancando desde la fase Definir: el alcance del ejercicio no incluía research primario, y lo dejé documentado como tal en lugar de inventar entrevistas.Design Thinking starting from the Define phase: the scope of the exercise did not include primary research, and I documented it as such instead of inventing interviews.
De la forma
a la funciónFrom form
to function
La burbuja de texto es efímera; el documento clínico es permanente.The text bubble is ephemeral; the clinical document is permanent.
El design system como infraestructura, no como documentaciónThe design system as infrastructure, not documentation
Definí escalas de 11 pasos para neutrales y de 9 para cada color de marca (blue, aqua, yellow) y de sistema (success, error), cada tono con hex, RGB y ratio de contraste calculado y etiquetado AA/AAA. El dark mode no es una inversión automática: es un set propio de escalas ajustadas para mantener el contraste.I defined 11-step scales for neutrals and 9-step scales for each brand colour (blue, aqua, yellow) and system colour (success, error), every tone with hex, RGB and a calculated contrast ratio labelled AA/AAA. Dark mode is not an automatic inversion: it is its own set of scales tuned to keep contrast.
En un producto de salud eso no es un detalle de accesibilidad opcional: la gente lee estos mensajes con prisa, de noche, con poca luz. Ese rigor es lo que hace posible el requisito de propagación automática.In a health product that is not an optional accessibility detail: people read these messages in a hurry, at night, in low light. That rigour is what makes automatic propagation possible.
El adjunto médico es un objeto, no un archivoThe medical attachment is an object, not a file
Un examen o un diagnóstico compartido no aparece como una fila con nombre de archivo: es un bloque grande, oscuro, con una franja de color que lo etiqueta y un icono de ojo para previsualizar. Ocupa espacio deliberadamente. Es el elemento más importante de la conversación y la interfaz lo trata como tal.A shared test or diagnosis does not appear as a row with a filename: it is a large, dark block with a colour strip labelling it and an eye icon to preview. It takes up space on purpose. It is the most important element of the conversation and the interface treats it as such.
El banner de "Consulta prioritaria" es la única superficie con gradiente azul-aqua a todo el ancho y rompe la retícula de tarjetas del resto del home. El camino de la urgencia no puede pesar lo mismo que el resto de opciones — y no se resolvió con rojo de alarma, que habría añadido ansiedad, sino con contraste de tratamiento.The "Priority consultation" banner is the only full-width blue-aqua gradient surface and it breaks the card grid of the rest of the home. The urgent path cannot weigh the same as every other option — and it was not solved with alarm red, which would have added anxiety, but with contrast of treatment.
El home abre con "Buen día Alejandra" y su avatar, no con un menú. Las tarjetas de fecha usan el lenguaje visual de una hoja de calendario, el azul domina y el aqua da el respiro. La decisión de fondo fue que la app se sintiera como una conversación con alguien, no como un portal de EPS.The home opens with "Good morning Alejandra" and her avatar, not a menu. Date cards use the visual language of a calendar sheet, blue dominates and aqua provides the breathing room. The underlying decision was to make the app feel like a conversation with someone, not an insurance portal.
La soluciónThe solution
El recorrido crítico completo —urgencia, médico, conversación, examen, diagnóstico— en mobile y desktop, en ambos temas.The full critical path —urgency, doctor, conversation, test, diagnosis— on mobile and desktop, in both themes.
El resultadoThe result
En productos de salud, la jerarquía visual es una decisión de seguridad, no de estética.In health products, visual hierarchy is a safety decision, not an aesthetic one.
Un design system funcional con contraste verificado en cada token de color, en ambos temas — la base que hace real el requisito de propagación automática.A working design system with verified contrast on every colour token, in both themes — the foundation that makes automatic propagation real.
Cobertura completa del recorrido crítico (urgencia → médico → conversación → examen → diagnóstico) en mobile y desktop.Full coverage of the critical path (urgency → doctor → conversation → test → diagnosis) on mobile and desktop.
Aprendizaje: decidir que el documento clínico pesa más que el mensaje de texto —y darle el espacio para demostrarlo— fue la decisión que más cambió la sensación de la app.Takeaway: deciding that the clinical document outweighs the text message —and giving it the space to prove it— was the decision that changed the feel of the app the most.
Caso personal, sin métricas de producción.Personal project, no production metrics.