Ampliando Pawwy con un Design System unificado
Cronograma
Noviembre 2024 - Enero 2025.
Noviembre 2024 - Enero 2025.
Rol
Product Designer (Design Lead) + Front-end Developer.
Product Designer (Design Lead) + Front-end Developer.
Contexto
Pawwy es una plataforma dedicada a la salud de las mascotas que pone en contacto a veterinarios y tutores de mascotas. A medida que el producto fue creciendo, la interfaz se volvió inconsistente y difícil de adaptar a nuevas escalas.
Lideré la creación de un design system para unificar componentes, tokens y patrones de diseño utilizados por los equipos de diseño y desarrollo.
Pawwy es una plataforma dedicada a la salud de las mascotas que pone en contacto a veterinarios y tutores de mascotas. A medida que el producto fue creciendo, la interfaz se volvió inconsistente y difícil de adaptar a nuevas escalas.
Lideré la creación de un design system para unificar componentes, tokens y patrones de diseño utilizados por los equipos de diseño y desarrollo.
Un producto más rápido y consistente
Estandarizando componentes y tokens para reducir tiempos de desarrollo y mejorar la consistencia y accesibilidad.
Estandarizando componentes y tokens para reducir tiempos de desarrollo y mejorar la consistencia y accesibilidad.
Proceso
Discover
Exploración del problema (empatizar)
Investigación
Entrevistas
Auditoría competitiva
Exploración del problema (empatizar)
Investigación
Entrevistas
Auditoría competitiva
Define
Resumen de investigación
Mapa de empatía
Identificación de temas (puntos de dolor)
Definición de descubrimientos
Solución
Resumen de investigación
Mapa de empatía
Identificación de temas (puntos de dolor)
Definición de descubrimientos
Solución
Develop
Diseño de documentación UI
Design System
Arquitectura de información
Flujo de usuario
Wireframes
Feedback y revisiones de diseño
Diseño de documentación UI
Design System
Arquitectura de información
Flujo de usuario
Wireframes
Feedback y revisiones de diseño
Deliver
Prototipos de alta fidelidad
Traducción de UI a código
Feedback
Testing general
Realización de ajustes
Publicación de resultados
Prototipos de alta fidelidad
Traducción de UI a código
Feedback
Testing general
Realización de ajustes
Publicación de resultados
Planteamiento del Problema
¿Cómo podemos mantener la coherencia visual a medida que el producto crece?
A medida que Pawwy fue ampliando su gama de productos, empezaron a surgir inconsistencias en los componentes, las convenciones de nomenclatura y los estilos visuales. Al carecer de un sistema común, los equipos tenían dificultades para diseñar y desarrollar funciones de forma estandarizada, lo que daba lugar a experiencias de usuario fragmentadas.
A medida que Pawwy fue ampliando su gama de productos, empezaron a surgir inconsistencias en los componentes, las convenciones de nomenclatura y los estilos visuales. Al carecer de un sistema común, los equipos tenían dificultades para diseñar y desarrollar funciones de forma estandarizada, lo que daba lugar a experiencias de usuario fragmentadas.
Resultados de la Investigación
El verdadero problema no eran las interfaces, sino la falta de un sistema
Las auditorías, las entrevistas con los equipos y las comprobaciones de accesibilidad revelaron que las incoherencias en los productos de Pawwy no eran problemas de diseño aislados, sino síntomas de la falta de una base de diseño común entre los equipos de diseño y desarrollo.
Las auditorías, las entrevistas con los equipos y las comprobaciones de accesibilidad revelaron que las incoherencias en los productos de Pawwy no eran problemas de diseño aislados, sino síntomas de la falta de una base de diseño común entre los equipos de diseño y desarrollo.
La identidad visual no reflejaba el valor del producto
La identidad visual no reflejaba el valor del producto
La identidad visual no reflejaba el valor del producto
No se tuvo en cuenta la accesibilidad
No se tuvo en cuenta la accesibilidad
No se tuvo en cuenta la accesibilidad
El diseño y el desarrollo no estaban coordinados en un sistema común
El diseño y el desarrollo no estaban coordinados en un sistema común
El diseño y el desarrollo no estaban coordinados en un sistema común
Estrategia de Solución
En lugar de arreglar pantallas, construí las bases
La investigación reveló que muchos problemas de experiencia de usuario se debían a la falta de un sistema común. Así que en lugar de resolver las incoherencias pantalla por pantalla, me centré en crear el design system de Pawwy como base para todos los productos.
La investigación reveló que muchos problemas de experiencia de usuario se debían a la falta de un sistema común. Así que en lugar de resolver las incoherencias pantalla por pantalla, me centré en crear el design system de Pawwy como base para todos los productos.
Arquitectura de la Información
Simplificando como los usuarios navegan por Pawwy
Los productos se habían vuelto cada vez más difícil de navegar. Por lo tanto redefiní la arquitectura de la información de cada uno para crear jerarquías más claras y un sistema de navegación más coherente.
Los productos se habían vuelto cada vez más difícil de navegar. Por lo tanto redefiní la arquitectura de la información de cada uno para crear jerarquías más claras y un sistema de navegación más coherente.
Design System
Un solo sistema para cada producto de Pawwy
He diseñado un sistema de diseño unificado para dar soporte a Pawwy Tutors, Pawwy Vets y futuros productos. Al estandarizar los tokens, los componentes y los patrones, el sistema garantiza la coherencia en todas las experiencias y permite a los equipos diseñar y desarrollar con mayor rapidez.
He diseñado un sistema de diseño unificado para dar soporte a Pawwy Tutors, Pawwy Vets y futuros productos. Al estandarizar los tokens, los componentes y los patrones, el sistema garantiza la coherencia en todas las experiencias y permite a los equipos diseñar y desarrollar con mayor rapidez.
Una paleta de colores vivos y expresivos diseñada para reflejar la misión de Pawwy: aportando energía, calidez y confianza a un producto que conecta a los tutores de mascotas con los veterinarios.
Una paleta de colores vivos y expresivos diseñada para reflejar la misión de Pawwy: aportando energía, calidez y confianza a un producto que conecta a los tutores de mascotas con los veterinarios.
Resultados e Impactos
Diseño y desarrollo más rápidos: reducción del tiempo de configuración de las pantallas en aproximadamente un 40% gracias a la reutilización de componentes. Resultado basado en pruebas internas.
Diseño y desarrollo más rápidos: reducción del tiempo de configuración de las pantallas en aproximadamente un 40% gracias a la reutilización de componentes. Resultado basado en pruebas internas.
Nuevas mascotas registradas
Nuevas mascotas registradas
7.000
7.000
Satisfacción del Usuario
Satisfacción del Usuario
87%
87%
87%
Retención del usuario
Retención del usuario
