Saltar al contenido

Caso de estudio — UX / UI / Branding

De PoC a MVP gracias al diseño de experiencia, branding e interfaz

Diseñé la experiencia completa de una plataforma SaaS, desde la prueba de concepto hasta el producto mínimo viable, incluyendo la identidad de marca y el sistema de diseño.

Captura principal del proyecto

Rol

Product Designer

UX, UI, branding y sistema de diseño

Equipo

5 personas

1 PM · 1 Designer · 2 Devs · 1 QA

Duración

4 meses

Febrero — Mayo 2025

Herramientas

Figma

FigJam · Notion · Maze

Objetivo

Transformar una idea validada en un producto funcional y escalable

El cliente necesitaba pasar de una prueba de concepto técnica a un producto real que pudiera salir al mercado. Mi objetivo era darle forma a toda la experiencia de usuario, crear una marca reconocible y construir un sistema de diseño que permitiera al equipo iterar de forma ágil.

"Necesitamos que lo que hoy es un prototipo técnico se convierta en algo que un usuario real pueda entender y usar desde el primer momento."

El reto

¿Qué reto resolvía?

La plataforma existía solo como prototipo técnico: funcional pero sin identidad visual, sin flujos pensados para el usuario final y con una interfaz que no transmitía confianza. El reto era doble: diseñar una experiencia intuitiva para usuarios no técnicos y crear una marca que posicionara el producto en el mercado.

Captura del estado inicial / prototipo técnico

Proceso · Research

Entender antes de diseñar

Empecé con entrevistas a stakeholders y usuarios potenciales para mapear el contexto completo. Sinteticé toda la investigación en un canvas que conectaba las necesidades de negocio, los objetivos de usuario y el análisis competitivo.

Canvas de research — Competidores · Qué busca el usuario · Qué busca negocio · Pain points · Oportunidades

Canvas de síntesis — la base sobre la que se construyeron todas las decisiones de diseño

Proceso · Arquitectura

Sitemap y flujos de usuario

Con los insights del research definí la arquitectura de información y diseñé los flujos principales, priorizando las funcionalidades core para el MVP.

Sitemap completo de la plataforma

Sitemap v2 — después de iterar sobre los hallazgos del research

User flow principal — alta de usuario + primera sesión

Flujo de onboarding — el flujo más crítico para la retención

Proceso · Prototipado

De wireframe a prototipo para testing

La interfaz evolucionó a través de tres niveles de fidelidad. Cada salto de fidelidad incorporó los hallazgos del testing anterior, asegurando que cada decisión estuviera validada antes de invertir más esfuerzo visual.

1Wireframes
Wireframes — estructura y jerarquía de contenido
2Prototipo mid-fi
Prototipo mid-fi — layout, spacing, flujo interactivo
3Prototipo high-fi
Prototipo high-fi — UI final, branding, micro-interacciones
Flujo interactivo completo← Scroll automático · Hover para pausar →
Pantalla 1 — Login / Onboarding
Pantalla 2 — Configuración inicial
Pantalla 3 — Dashboard principal
Pantalla 4 — Crear nueva sesión
Pantalla 5 — Detalle de sesión
Pantalla 6 — Resultados
Pantalla 1 — Login / Onboarding
Pantalla 2 — Configuración inicial
Pantalla 3 — Dashboard principal
Pantalla 4 — Crear nueva sesión
Pantalla 5 — Detalle de sesión
Pantalla 6 — Resultados

Proceso · UI & Design System

Sistema visual escalable

Creé la identidad visual de la plataforma y construí un sistema de componentes en Figma que permitía a desarrollo implementar nuevas vistas de forma autónoma.

Paleta de colores + tipografías
Iconografía + estilo de ilustración
Librería de componentes — botones, inputs, cards, modales, tablas…

+120 componentes organizados con variantes y estados

Pantalla final — Dashboard
Pantalla final — Detalle
Pantalla final — Settings

Mi aportación

Qué aporté

Mi contribución conectó diseño, negocio y tecnología en tres áreas clave.

Visión de producto: Ayudé a definir qué debía incluir el MVP y qué podía quedar fuera, priorizando funcionalidades con mayor impacto.

Sistema escalable: El design system permitió al equipo de desarrollo implementar nuevas vistas en mucho menos tiempo.

Puente dev-negocio: Actué como nexo entre el equipo técnico y los stakeholders, traduciendo requisitos en soluciones viables.

Captura de entrega en Figma / handoff a desarrollo

Resultados

Qué solucioné

El producto pasó de ser un prototipo técnico a una plataforma con una experiencia clara, una marca definida y un sistema de diseño listo para escalar.

85%

Tasa de completado en tests

40%

Reducción tiempo onboarding

120+

Componentes en design system

3x

Velocidad implementación UI

Antes
Estado anterior de la plataforma
Después
Resultado final

Aprendizajes

Qué aprendí

Cada proyecto es una oportunidad de crecer. Estos son los aprendizajes clave.

01

Educar en diseño es parte del trabajo

En equipos sin diseñador previo, parte del valor está en enseñar el proceso y demostrar el impacto del diseño.

02

MVP ≠ baja calidad

Un producto mínimo viable debe ser mínimo en funcionalidades, no en cuidado del detalle ni en experiencia de usuario.

03

Documentar desde el día uno

Invertir tiempo en documentar decisiones de diseño evitó innumerables idas y venidas con desarrollo.

Hablemos

¿Tienes un proyecto?

Estoy abierta a proyectos de diseño de producto, branding y colaboraciones que tengan sentido humano. Cuéntame en qué estás pensando.