01 · VISIÓN GENERAL

Un lugar más tranquilo para pasar tu tiempo

MitMind es un concepto de plataforma de salud mental que creé. Reúne sesiones con psicólogos colegiados, un diario de ánimo privado llamado Daily Feelings, cursos cortos y meditaciones, comunidades moderadas y charlas en vivo.

Diseñé la primera versión en 2024. En 2026 volví al proyecto con más experiencia y lo rediseñé desde cero: nueva investigación, principios de cuidado, un design system completo y 67 pantallas para escritorio y móvil.

El reto principal: una persona en terapia tiene unas 4 horas de contacto con su psicólogo al mes. MitMind está pensado para el resto del mes, de una forma segura, privada y que nunca juzga cómo se siente alguien.

Lo que entregué

• 67Pantallas en alta fidelidad58 de escritorio y 9 móviles, con estados vacíos, de carga y de error
• 60+Componentes36 conjuntos de variantes, todos vinculados a variables y estilos de texto
• 130Design tokensPrimitivos, colores semánticos y dimensiones, con verificación WCAG
• 7Flujos de prototipoDel onboarding a la reserva, el compartir y los eventos en vivo

Mi rol y herramientas

Proyecto en solitario. Fui responsable de todo el diseño de producto: investigación, arquitectura de información, reglas de cuidado y privacidad, UX writing, el design system y cada pantalla. Trabajé como lo hago con equipos de producto: entender el problema, definir principios, construir el sistema y luego diseñar los flujos.

• UX Research
• Evaluación heurística
• Arquitectura de información
• UX Writing
• UI Design
• Design System
• Prototipado
• Accesibilidad
• Figma

Cronología del proyecto

1. 2024Versión 1Primer concepto: inicio, Daily Feelings, comunidades y sesiones.
2. 2026 · Fase 1Investigación y auditoríaInvestigación documental, evaluación heurística de la v1 y principios de cuidado.
3. 2026 · Fase 2Design systemFundamentos, 130 tokens y más de 60 componentes.
4. 2026 · Fase 3Pantallas y flujos67 pantallas, estados, móvil y 7 flujos clicables.

02 · INVESTIGACIÓN

Entender el espacio entre sesiones

Empecé con datos públicos sobre salud mental y tiempo en pantalla en Brasil, y luego audité mi propia primera versión con una mirada más crítica.

El contexto en números

• 5%de las personas en Brasil hace psicoterapia
• 9h32en internet al día, de media, en Brasil (media global: 6h58)
• ~4 hde contacto con un psicólogo al mes, para quien hace terapia semanal

Métodos de investigación

• Investigación documentalDatos públicosCifras sobre acceso a terapia y tiempo en internet en Brasil, para entender el tamaño de la brecha.
• AuditoríaEvaluación heurística de la v1Revisé cada pantalla de la v1 con las 10 heurísticas de Nielsen y añadí una pregunta: ¿esto se siente seguro para alguien en un mal día?
• BenchmarkAnálisis competitivoPlataformas de terapia, apps de meditación y comunidades online. Cada una resuelve una parte del problema, ninguna las conecta.
• PautasCuidado y accesibilidadPautas de comunicación segura para la prevención del suicidio, la línea CVV 188 en Brasil y WCAG 2.2 AA.

Hallazgos clave

1. 01Las semanas entre sesiones están vacíasLa terapia ocurre en una hora a la semana. Los pensamientos, los malos días y las pequeñas victorias ocurren en las otras 167 horas, y la mayoría se olvida antes de la siguiente sesión.
2. 02Los emojis y el rojo juzgan los sentimientosLa v1 usaba emojis de dibujo, incluida una cara llorando para "Super Sad". En salud mental, eso convierte un día bajo en algo que parece incorrecto o vergonzoso.
3. 03La privacidad es la condición para la honestidadLa gente solo escribe la verdad en un diario si controla quién lo lee. Compartir con el terapeuta tiene que ser explícito, limitado y fácil de detener.
4. 04La ayuda debe estar a un toqueLa v1 no tenía ningún camino para una crisis. Un producto de salud mental debe decir con claridad lo que no es y mostrar dónde encontrar ayuda urgente desde cualquier pantalla.

Proto-personas

Personas ficticias creadas a partir de la investigación para guiar las decisiones. Son hipótesis que validar en pruebas de usabilidad, no resultados de entrevistas.

• AS

  Amanda Smith, 34Gerente de marketing · São Paulo
  • Terapia semanal
  • Agenda llena

  Empezó terapia el año pasado. Jornadas largas y muchas horas con el móvil. Quiere mantener vivo durante la semana el progreso de sus sesiones.

  Objetivo

  Notar patrones en su ánimo y llevarlos a terapia.

  Frustración

  Apps de bienestar que parecen deberes o la castigan por saltarse un día.

  “El jueves ya no recuerdo cómo me sentí de verdad el lunes.”

• JA

  Jason Adams, 41Psicoterapeuta · Remoto
  • Psicólogo colegiado
  • Sesiones online

  Atiende a la mayoría de sus pacientes por videollamada. Valora tener contexto, pero desconfía de las herramientas que recogen más datos de los necesarios.

  Objetivo

  Empezar cada sesión con contexto, sin pedir formularios a sus pacientes.

  Frustración

  Plataformas donde el consentimiento no es claro o los datos se comparten por defecto.

  “Solo quiero ver lo que mi paciente eligió mostrarme.”

• LR

  Lucas Rocha, 22Estudiante universitario · Recife
  • Nunca hizo terapia
  • Vive en internet

  Pasa casi todo su tiempo libre en redes sociales. Lleva meses sintiéndose ansioso, pero no sabe por dónde empezar ni cuánto cuesta la terapia.

  Objetivo

  Entender lo que siente y encontrar ayuda asequible.

  Frustración

  Sentirse juzgado, o que su problema no es lo bastante serio.

  “Ni siquiera sé si lo que siento es suficiente para ver a alguien.”

03 · IDEACIÓN

Diseñar el cuidado dentro del producto

Planteé el problema con preguntas "Cómo podríamos" y escribí principios de cuidado que cada pantalla debía cumplir.

Cómo podríamos

• ¿Cómo podríamos acompañar a las personas en las semanas entre sesiones de terapia?
• ¿Cómo podríamos ayudar a registrar cómo se sienten sin que un día bajo parezca un fracaso?
• ¿Cómo podríamos permitir compartir el diario con el terapeuta manteniendo el control total?
• ¿Cómo podríamos hacer que la ayuda urgente sea fácil de encontrar sin que todo el producto parezca clínico?

Principios de voz y cuidado

1. 01Cálido, nunca clínicoDecir "un día difícil", no "ánimo negativo". Sin palabras de diagnóstico ni promesas de cura.
2. 02Privado por defectoLos datos de ánimo y del diario solo los ve la persona. Cada vez que se comparte es explícito, limitado y revocable.
3. 03La ayuda, a un toqueEl apoyo en crisis vive en la barra lateral y el pie de página. MitMind nunca se presenta como atención de emergencia.
4. 04Sin castigosSin rojo para los ánimos bajos, sin culpa por las rachas. Los estados vacíos invitan, no regañan.
5. 05Jerarquía tranquilaUna acción principal por pantalla, miel solo para conversión, mucho espacio en blanco.
6. 06AccesibleContraste WCAG AA, áreas táctiles de 40 px o más, anillos de foco y texto junto a cada icono de navegación.

Conceptos elegidos

• Daily FeelingsUn check-in de menos de un minuto: cinco caras de ánimo propias, factores opcionales y una nota privada. El historial y los insights muestran patrones, siempre recordando que no son un diagnóstico.
• Compartir con consentimientoUn flujo en dos pasos: elegir los días y luego revisar exactamente qué verá y qué no verá el terapeuta, y durante cuánto tiempo. Cada acceso queda registrado y se puede detener en cualquier momento.
• Apoyo en crisis en todas partesUna tarjeta tranquila en la barra lateral en escritorio y en el pie en móvil, con el CVV 188. Cuando una búsqueda sugiere que alguien lo está pasando mal, MitMind muestra apoyo en lugar de resultados.
• Reserva en cuatro pasosEncontrar un terapeuta, leer el perfil, elegir un horario y pagar con tarjeta o PayPal. Una pantalla clara de error de pago ayuda a resolverlo sin perder la cita.
• Learn y eventos en vivoCursos cortos, meditaciones guiadas, vídeos y artículos, además de charlas en vivo con psicólogos y sus grabaciones. El progreso se guarda para seguir donde lo dejaste.
• Comunidades moderadasGrupos en torno a experiencias compartidas, como vivir con TDAH o sanar tras una ruptura, en lugar de un feed de personas a seguir.

04 · DISEÑO

Del sistema a las pantallas

Comparé la v1 con lo que mostró la investigación, construí el design system y luego diseñé cada pantalla usando solo sus componentes.

Antes y después

v1 · 2024

• Emojis de dibujo para el ánimo, incluida una cara llorando
• Amarillo intenso en todas las acciones
• Diseño de red social, con personas a seguir
• Sin apoyo en crisis ni señales de privacidad
• 5 páginas: Home, Sessions, Daily Feelings, Learn, Saved

v2 · 2026

• Cinco caras de ánimo propias, de frío a cálido, nunca rojo
• Salvia como color de marca, miel solo para conversión
• Una acción principal por pantalla y jerarquía tranquila
• Apoyo en crisis en cada pantalla, etiqueta "Privado" en cada registro
• 13 áreas de producto, 67 pantallas, escritorio y móvil

Fundamentos visuales

Tranquilo, confiable y humano: una interfaz silenciosa que deja espacio para respirar. La salvia es el color de marca (naturaleza, equilibrio, respiración), la miel es un acento cálido heredado del amarillo original y el texto es grafito en lugar de negro puro. Plus Jakarta Sans da una interfaz neutra que contrasta con el logotipo manuscrito, con iconos Lucide de 1,5 px.

Paleta principal

• Sage 600#356C62 · Acción principal
• Sage 800#22453F · Tarjetas destacadas
• Sage 50#F1F7F5 · Fondo de marca
• Honey 400#E3B146 · Conversión
• Graphite 900#1D2629 · Texto principal
• Neutral 25#FBFBF9 · Fondo de la app

Design system

• Tokens130 variables. Las escalas primitivas alimentan tokens semánticos como text/secondary o action/accent, y el contraste se comprueba desde los propios tokens.
• ComponentesMás de 60 componentes en 36 conjuntos de variantes: de botones y campos a opciones de ánimo, tarjetas de sesión, de terapeuta y opciones de pago.
• LayoutBase de 4 px y ritmo de 8 px. Escritorio 1440: cabecera de 72 px, barra lateral de 248 px, 12 columnas. Móvil 390: 4 columnas con márgenes de 20 px.

Componentes del sistema

Decisiones de diseño clave

1. 01Nunca rojo para ánimos bajosLos colores de ánimo van del lavanda a la miel. El rojo solo se usa para errores reales, como un pago fallido, nunca para sentimientos.
2. 02Privacidad visibleCada pantalla del diario muestra "Privado · solo tú ves tus registros". La pantalla de consentimiento lista lo que el terapeuta verá y lo que no.
3. 03Check-ins, no rachasEl inicio cuenta "12 check-ins este mes" en lugar de una racha que se rompe. Saltarse un día nunca reinicia nada.
4. 04Miel significa "hazlo"El acento cálido se reserva para la conversión, como Reservar sesión. Todo lo demás es salvia o neutro, para que la página siga tranquila.

Flujos del prototipo

1. 1OnboardingBienvenida, registro, 4 preguntas, todo listo, inicio
2. 2Inicio y navegaciónBarra lateral, cabecera, notificaciones, menú de perfil, búsqueda
3. 3Reservar sesiónBúsqueda, perfil, horario, pago (tarjeta, PayPal, error), confirmado
4. 4Daily FeelingsRegistro, historial, compartir con consentimiento, gestionar
5. 5LearnCatálogo, curso, reproductor de vídeo y de meditación
6. 6EventosLista, detalle, sala en vivo y grabación
7. 7MóvilInicio, sesiones, reserva, ánimo, Learn, reproductor

Pantallas en alta fidelidad

Móvil

El recorrido principal también funciona en una pantalla de 390 px: check-in, sesiones, reserva y reproductor de meditación, con barra inferior y apoyo en crisis en el pie.

• 
  Inicio
• 
  Daily Feelings
• 
  Pago
• 
  Reproductor de meditación

05 · PLAN DE VALIDACIÓN

Cómo lo voy a medir

MitMind es un concepto y todavía no se ha probado con usuarios. Estos son los objetivos que seguiría en la primera ronda de pruebas de usabilidad.

Objetivos de éxito

• < 60 sPara completar un check-in diario con una nota
• ≥ 90%De participantes que saben decir quién ve sus registros tras compartir
• < 10 sPara encontrar apoyo en crisis desde cualquier pantalla
• ≥ 80%De participantes que reservan una sesión sin ayuda

Prueba de usabilidad planificada

Sesiones moderadas con 5 personas: 3 en terapia y 2 que nunca la probaron. Los resultados se mostrarán en un gráfico por tarea.

06 · CONCLUSIÓN

Reflexión y aprendizajes

Qué funcionó, qué fue difícil y qué viene después.

Retos y concesiones

• Cálido pero claroEvitar palabras clínicas puede volver vago el texto. Escribí reglas de voz con ejemplos, para que cada mensaje sea amable y aun así diga exactamente qué hacer.
• Privacidad frente a compartir con utilidadEl terapeuta necesita contexto, la persona necesita control. Compartir por día, notas opcionales, plazos y registro de accesos añaden pasos, pero cada paso genera confianza.
• Alcance13 áreas de producto es mucho para un solo diseñador. Terminé primero el recorrido principal con todos sus estados y dejé el modo oscuro y la tableta para después.

Aprendizajes clave