Psiquea.com
Diseñamos y desarrollamos Psiquea™: una plataforma de investigación psicológica donde identidad visual, UX/UI, arquitectura funcional y desarrollo moderno crecieron juntos como un único sistema.
- Cliente
- Psiquea™
- Año
- 2026
- Sector
- Salud mental, evaluación psicológica y producto digital
- Lugar
- Proyecto digital
Contexto y reto
La necesidad central del cliente era construir un entorno digital fiable para un flujo muy concreto: invitar a usuarios a participar en un estudio, guiarlos a través del registro y la contextualización, y conseguir que completaran una batería de evaluación dentro de una experiencia coherente, fluida, cercana y técnicamente sólida.
a.Cuestionario sociodemográfico como pieza estratégica
Lo concebimos como una pieza a medida: recoge información relevante del participante antes de la evaluación, con rigor en los datos y una experiencia clara y cálida. El flujo debía comunicar que la cuenta era necesaria para continuar, con un tono serio y humano.
b.Batería de cuatro tests integrada en una misma experiencia
Tras el registro y la fase sociodemográfica, el usuario accedía a cuatro instrumentos de evaluación dentro del mismo ecosistema. El reto era doble: traducir pruebas complejas a una interfaz usable, y encadenar cada fase —registro, acceso, contexto, formularios, tests y área privada— con fluidez y continuidad.
Enfoque estratégico
En SIMA planteamos Psiquea™ como un proyecto donde la forma y la función debían crecer juntas. Marca, experiencia de usuario y tecnología avanzaron de la mano: trabajamos los cuatro frentes en paralelo, con la misma lógica de sistema que aplicamos a proyectos de identidad física.
a.Identidad y posicionamiento
Desarrollamos el universo visual completo: logotipo, paleta cromática, tipografía, tono gráfico, iconografía y jerarquías visuales. Un sistema pensado para transmitir, a la vez, rigor, confianza, sensibilidad humana e innovación científica.
b.Arquitectura UX orientada al flujo real
Diseñamos el recorrido del usuario desde una lógica de participación concreta: entrada desde landing o enlace de estudio, registro, validación, acceso a zona personal, cuestionario sociodemográfico y progresión hacia la batería. Cada pantalla resuelve dudas y aligera la carga cognitiva: una experiencia de usuario (UX) serena de principio a fin.
c.Visión de producto desde el inicio
Definimos una lógica donde cada usuario es un participante dentro de un contexto concreto de estudio, con progresión funcional estructurada, continuidad entre sesiones y acceso protegido a su área privada.
d.Base técnica como decisión estratégica
La elección de Next.js, Prisma y backend integrado fue deliberada: era la base que unía experiencia pública de marca, autenticación, lógica de servidor y flujos de estudio en un único ecosistema.
Qué hicimos.
01
Estrategia y producto
- definición estratégica del producto digital
- estructuración funcional del sistema de participación en estudios
- arquitectura de continuidad del estudio por usuario
- lógica de registro, acceso y progresión
02
Identidad de marca
- conceptualización de marca y naming
- logotipo e identidad visual completa
- paleta cromática, tipografía y tono gráfico
- iconografía consistente con el entorno científico
03
UX/UI y sistema de interfaz
- sistema de interfaz y componentes visuales
- jerarquías de contenido y experiencia digital completa
- diseño responsive para todos los contextos de uso
- lenguaje visual alineado con confianza y usabilidad
04
Flujo funcional y evaluación
- diseño e integración del cuestionario sociodemográfico
- integración funcional de la batería de 4 tests en la plataforma
- lógica de área privada de usuario y continuidad del estudio
- diseño de encadenamiento entre fases del proceso
05
Tecnología y desarrollo
- frontend sobre Next.js y React
- backend integrado en entorno Next.js
- modelado de datos con Prisma
- sistema de autenticación moderna y middleware de acceso
- comunicación transaccional con branding propio mediante Resend
- base técnica preparada para nuevos estudios y funcionalidades
Identidad de marca
El símbolo de Psiquea™ reúne en una sola forma las tres ideas del producto: una mente que investiga, una conversación que la acompaña y un resultado validado. Cinco lóbulos dibujan un cerebro que es también un bocadillo de diálogo, y dentro, un check en verde celebra cada estudio completado.
El wordmark, redondeado y muy legible, se construye con una altura de la x generosa, pensada para la pantalla. Índigo profundo, verde validación, tinta y lavanda forman una paleta serena que acompaña con comodidad durante sesiones largas.
Pensar, conversar, validar.
El símbolo de Psiquea reúne las tres ideas del producto en una sola forma: la mente que investiga, la conversación que la acompaña y el resultado validado. A su lado, un wordmark redondeado, cercano y muy legible, construido sobre un módulo x.
01 / 06
Una mente que conversa
Cinco lóbulos dibujan un cerebro que también es un bocadillo de diálogo; dentro, el check confirma cada estudio completado. Pasa por encima para aislar cada pieza y pulsa «Validar» para ver el gesto.
- Lóbulos
- 5
- Piezas
- 9
- Colores
- 2
- Altura del símbolo
- 8,6x
- Proporción
- 2,6 : 1
Guía de color
Un índigo profundo que transmite rigor y calma, y un verde validación que celebra cada paso completado. Lavanda y tinta completan un sistema sereno, pensado para leerse con comodidad durante sesiones largas.
HEX
#3E2F6F
RGB
62 · 47 · 111
CMYK
44 · 58 · 0 · 56
Contraste
11.4 : 1 / blanco
Proporción de uso
Índigo sobre papel · 10.6 : 1 · AAA
La marca en uso
- Registro
- Cuestionario
- Batería de test
- Resultados
Estudio completado
Te damos la bienvenida a tu estudio
Tu espacio ya está listo. Puedes avanzar a tu ritmo y retomar cuando quieras.
Empezar →Desarrollo visual del proyecto
Psiquea™ se trabajó desde la sobriedad y la precisión. La intención era construir un entorno claro, limpio, cálido y profesional. La percepción premium nacía de la coherencia del conjunto: tono, paleta, jerarquía, componentes y arquitectura de experiencia operando como un solo lenguaje.
Se sustituyeron los recursos visuales genéricos por un sistema de iconografía más sobrio y consistente, alineado con la identidad de marca. Toda la capa visual —branding, UI, componentes, colores, estilo editorial— fue diseñada para funcionar con la misma coherencia tanto en las páginas públicas como dentro del área privada del estudio.
Sistema, replicabilidad y profundidad
Psiquea™ es una arquitectura funcional diseñada para operar. Cada módulo está conectado con los demás y responde a una lógica de producto coherente, escalable y pensada desde el principio para crecer.
a.Frontend público
Landing pages, páginas informativas, explicación del enfoque de investigación y acceso al registro. Aquí cuidamos especialmente la coherencia del sistema visual: cabecera global, navegación unificada, llamadas a la acción y un lenguaje de interfaz premium consistente en todos los puntos de entrada.
b.Sistema de autenticación
El usuario puede crear su cuenta, acceder a la plataforma y entrar en el flujo de estudio asociado. Este bloque es seguro y sencillo, y mantiene la continuidad del proceso y las redirecciones necesarias dentro del flujo.
c.Registro contextual
Está conectado con el propósito del estudio y con la lógica de acceso del usuario invitado. La experiencia de registro refuerza el sentido de pertenencia al proceso de investigación.
d.Cuestionario sociodemográfico
Recoge la base contextual del participante antes de iniciar la batería de evaluación. Lo diseñamos como pieza estratégica del flujo: el participante entiende por qué lo rellena y cómo avanza.
e.Batería de tests
Organiza la ejecución de los 4 instrumentos dentro del entorno Psiquea™, manteniendo coherencia de flujo y experiencia. Cada test se adapta visualmente al sistema de interfaz y preserva la integridad del instrumento evaluativo.
f.Área privada de usuario
Da continuidad al proceso y permite que la experiencia se reparta en varias sesiones. El usuario puede retomar su estudio, consultar su progresión y acceder a las fases pendientes dentro de su espacio protegido.
g.Base tecnológica
- 01Next.js — unifica frontend y backend bajo una misma arquitectura, facilita routing moderno y ofrece una base potente para escalar producto digital serio
- 02React — interfaz modular, mantenible y coherente; toda la UI se apoya en lógica componible que facilita evolución y mantenimiento
- 03Backend integrado — lógica de servidor, rutas protegidas y coherencia entre frontend y negocio dentro del mismo ecosistema, de forma cohesionada
- 04Prisma — modelado limpio y tipado de usuarios, sesiones, progresión, datos de formularios y lógica de estudio; base estructurada para crecer
- 05Autenticación moderna — middleware de seguridad robusto con compatibilidad entre zonas públicas y privadas, continuidad de sesión y acceso protegido
- 06Resend — emails transaccionales de confirmación y onboarding con identidad de marca, fiabilidad operativa y coherencia en cada comunicación del sistema
Resultado y transformación conseguida
El resultado es una plataforma operativa que combina marca, interfaz, lógica de participación y arquitectura tecnológica moderna en un solo sistema coherente, preparado para operar y escalar.
- 01una identidad visual diferencial para un entorno que exige alta confianza
- 02una interfaz clara y humana que reduce fricción en procesos potencialmente complejos
- 03un flujo de participación en estudios funcional, guiado y bien resuelto
- 04un cuestionario sociodemográfico integrado como pieza estratégica del recorrido
- 05una batería de cuatro tests accesibles dentro del mismo ecosistema visual
- 06un área privada que da continuidad real al proceso de evaluación
- 07una arquitectura con Next.js, Prisma y backend moderno lista para evolucionar
- 08una base escalable para nuevos estudios, nuevas pruebas y nuevas funcionalidades
La web
Psiquea.com es el punto de entrada a la plataforma: un entorno digital donde identidad, experiencia y arquitectura funcional conviven en una sola superficie coherente. Cada pantalla traduce el sistema visual de marca a interfaz operativa con todo su criterio y carácter.
La experiencia de usuario fluye desde la landing pública hasta el área privada de estudio con una lógica continua. El registro, el cuestionario sociodemográfico y la batería de tests tienen su propia presencia visual dentro del mismo sistema, reforzando la percepción de rigor y cuidado en cada paso del recorrido.
El resultado es un producto digital donde la forma y la función se sostienen mutuamente, y la identidad forma parte de la propia estructura tecnológica.
01Inicio
02Soluciones
03Servicios
En productos digitales sensibles, el diseño eleva la percepción, la confianza, la claridad y la manera en que una persona entiende y completa una experiencia compleja.
Psiquea™ demuestra que una plataforma bien planteada, además de lucir, organiza procesos reales, reduce fricción y convierte una necesidad difusa en un sistema claro, usable y preparado para crecer. La arquitectura técnica y la visual crecieron juntas en Psiquea™, y eso se nota.
Branding · Diseño web UX/UI · Marketing
Mi Caseta Flamenco