Caminando con Mansion

Caminando con Mansion

Caminando con Mansion

Caminando con Mansion

🌐

Producto

🌐

Producto

🌐

Producto

🌐

Producto

⚙️

Sistemas de diseño

⚙️

Sistemas de diseño

⚙️

Sistemas de diseño

⚙️

Sistemas de diseño

🖥️

UI

🖥️

UI

🖥️

UI

🖥️

UI

📈

UX

📈

UX

📈

UX

📈

UX

Mansion es una compañía que crea plataformas de entretenimiento de juego online a nivel global, pero con especial foco en Asia.

Llegué como parte del equipo encargado del rediseño completo de su plataforma principal M88.

Con el tiempo mi papel evolucionó cogiendo nuevos responsabilidades como investigación, conceptualización e implementación de nuevos productos y funcionalidades.

Mi rol

Diseñador de Producto

Duración

3 años

/

desde 2021

Habilidades

Sistemas de diseño

Variables

Entregas

Flujos de usuario

Conceptualización

Resolución

Equipo

Karina Hernandez / UX/UI Manager

Manuel González / Product Designer

Dusty Dee / UX/UI Designer

Imagen hero del proyecto de Mansion con mockups de diseños para desktop y móvil
Imagen hero del proyecto de Mansion con mockups de diseños para desktop y móvil
Imagen hero del proyecto de Mansion con mockups de diseños para desktop y móvil

Logros clave

Logros clave

Logros clave

Logros clave

« Diseñé un sistema basado en tokens, creando una base reutilizable para colores, tamaños y tipografías adaptable a cualquier producto futuro »

« Implementé diagramas claros y completos acompañados por mockups detallados para facilitar la comunicación entre diseño y desarrollo »

« Profundicé mi comprensión sobre flujos complejos e integraciones tecnológicas al trabajar directamente con desarrolladores »

Logo de M88
Logo de M88
Logo de M88

Relanzamiento de M88 v2.0

Relanzamiento de M88 v2.0

Relanzamiento de M88 v2.0

Relanzamiento de M88 v2.0

Construcción de su sistema de diseño, adaptación al sistema de las páginas rediseñadas y creación de nuevas páginas y funcionalidades.

Built its design system, adapted the redesigned pages to the system, and created new pages and functionalities.

Built its design system, adapted the redesigned pages to the system, and created new pages and functionalities.

Enfoque

Enfoque

Enfoque

Enfoque

Para el sistema de diseño empecé usando la misma lógica con la que trabajé en mi etapa previa: Una estructura jerarquizada con la metodología de atomic design, usando unos tokens, o variables, que permiten una construcción modular y creciente.

Soluciones

Soluciones

Soluciones

Soluciones

Una librería de estilos y componentes sólida y completa, con documentación para usos
y escenarios.

Una librería de estilos y componentes sólida y completa, con documentación para usos y escenarios.

Una librería de estilos y componentes sólida y completa, con documentación para usos y escenarios.

Colores del sistema de diseño de M88
Colores del sistema de diseño de M88
Colores del sistema de diseño de M88
Colores del sistema de diseño de M88
Tipografías del sistema de diseño de M88
Tipografías del sistema de diseño de M88
Tipografías del sistema de diseño de M88
Tipografías del sistema de diseño de M88
Columnas del sistema de diseño de M88
Columnas del sistema de diseño de M88
Columnas del sistema de diseño de M88
Columnas del sistema de diseño de M88
Átomos detallados del sistema de diseño de M88
Átomos detallados del sistema de diseño de M88
Átomos detallados del sistema de diseño de M88
Átomos detallados del sistema de diseño de M88
Modo oscuro del sistema de diseño de M88
Modo oscuro del sistema de diseño de M88
Modo oscuro del sistema de diseño de M88
Modo oscuro del sistema de diseño de M88
Botones del sistema de diseño de M88
Botones del sistema de diseño de M88
Botones del sistema de diseño de M88
Botones del sistema de diseño de M88
Modals del sistema de diseño de M88
Modals del sistema de diseño de M88
Modals del sistema de diseño de M88
Modals del sistema de diseño de M88

Diseños de páginas en los breakpoints que desarrollo solicitaba, mostrando diferentes casos
y estados en lo necesario.

Diseños de páginas en los breakpoints que desarrollo solicitaba, mostrando diferentes casos
y estados en lo necesario.

Diseños de páginas en los breakpoints que desarrollo solicitaba, mostrando diferentes casos y estados en lo necesario.

Diseños de páginas en los breakpoints que desarrollo solicitaba, mostrando diferentes casos y estados en lo necesario.

Página de mockups de la Homepage de M88
Página de mockups de la Homepage de M88
Página de mockups de la Homepage de M88
Página de mockups de la Homepage de M88
Página de mockups de los filtros de casino de M88
Página de mockups de los filtros de casino de M88
Página de mockups de los filtros de casino de M88
Página de mockups de los filtros de casino de M88
Página de mockup de torneos de M88
Página de mockup de torneos de M88
Página de mockup de torneos de M88
Página de mockup de torneos de M88
Página de flujos de usuario de OTP de M88
Página de flujos de usuario de OTP de M88
Página de flujos de usuario de OTP de M88
Página de flujos de usuario de OTP de M88

Qué aprendí

Qué aprendí

Qué aprendí

Qué aprendí

Comprendí mejor como construir la librería tanto para que pueda servir de documentación como para que sea útil y ágil para los diseñadores.

Comprendí mejor como construir la librería tanto para que pueda servir de documentación como para que sea útil y ágil para los diseñadores.

Comprendí mejor como construir la librería tanto para que pueda servir de documentación como para que sea útil y ágil para los diseñadores.

Pulí más la lógica en la presentación de los diseños y de sus estados y funcionalidades.

Pulí más la lógica en la presentación de los diseños y de sus estados y funcionalidades.

I refined the logic behind presenting designs, their states, and functionalities.

I refined the logic behind presenting designs, their states, and functionalities.

Logo de M88.io
Logo de M88.io
Logo de M88.io

M88.io

M88.io

M88.io

M88.io

Evolución del sistema de diseño previo para que cubriera cualquier producto usando como base este nuevo producto.

Enfoque

Enfoque

Enfoque

Enfoque

Con la base de M88, definí con mayor detalle y profundidad los tokens a través de Tokens Studio (Figma Tokens). También tuve que investigar soluciones diferentes que se adaptaran a un producto con un enfoque más moderno y simple.

Soluciones

Soluciones

Soluciones

Soluciones

Una librería de componentes más simple y ágil, manteniendo la documentación necesaria.

A solid and comprehensive library of styles and components with documentation for usage and scenarios.

A solid and comprehensive library of styles and components with documentation for usage and scenarios.

Colores del sistema de diseño de M88.io
Colores del sistema de diseño de M88.io
Colores del sistema de diseño de M88.io
Colores del sistema de diseño de M88.io
Tipografía del sistema de diseño de M88.io
Tipografía del sistema de diseño de M88.io
Tipografía del sistema de diseño de M88.io
Tipografía del sistema de diseño de M88.io
Botones del sistema de diseño de M88.io
Botones del sistema de diseño de M88.io
Botones del sistema de diseño de M88.io
Botones del sistema de diseño de M88.io
Átomos en detalle del sistema de diseño de M88.io
Átomos en detalle del sistema de diseño de M88.io
Átomos en detalle del sistema de diseño de M88.io
Átomos en detalle del sistema de diseño de M88.io
Campos de texto del sistema de diseño de M88.io
Campos de texto del sistema de diseño de M88.io
Campos de texto del sistema de diseño de M88.io
Campos de texto del sistema de diseño de M88.io
Cabeceros del sistema de diseño de M88.io
Cabeceros del sistema de diseño de M88.io
Cabeceros del sistema de diseño de M88.io
Cabeceros del sistema de diseño de M88.io
Menús del sistema de diseño de M88.io
Menús del sistema de diseño de M88.io
Menús del sistema de diseño de M88.io
Menús del sistema de diseño de M88.io

Archivos de diseño con mayor complejidad y flujos más completos.

Página de mockups de la sección de cuenta de M88.io
Página de mockups de la sección de cuenta de M88.io
Página de mockups de la sección de cuenta de M88.io
Página de mockups de la sección de cuenta de M88.io
Página de mockups de VIP de M88.io
Página de mockups de VIP de M88.io
Página de mockups de VIP de M88.io
Página de mockups de VIP de M88.io
Página de flujo de usuario de notificaciones de M88.io
Página de flujo de usuario de notificaciones de M88.io
Página de flujo de usuario de notificaciones de M88.io
Página de flujo de usuario de notificaciones de M88.io
Página de flujo de usuario de reward drop de M88.io
Página de flujo de usuario de reward drop de M88.io
Página de flujo de usuario de reward drop de M88.io
Página de flujo de usuario de reward drop de M88.io

Qué aprendí

Qué aprendí

Qué aprendí

Qué aprendí

Aunque la base de atomic design que tenía de base tenía una buena carga en el uso de tokens, aquí pude darle una forma más real y completa al tener que prepararla para que desarrollo la trabajara desde 0.

Aunque la base de atomic design que tenía de base tenía una buena carga en el uso de tokens, aquí pude darle una forma más real y completa al tener que prepararla para que desarrollo la trabajara desde 0.

Aunque la base de atomic design que tenía de base tenía una buena carga en el uso de tokens, aquí pude darle una forma más real y completa al tener que prepararla para que desarrollo la trabajara desde 0.

Aprendí todo lo relacionado con un tipo de producto diferente mientras completaba la forma de preparar los archivos para hacerlos entendibles y ágiles.

Aprendí todo lo relacionado con un tipo de producto diferente mientras completaba la forma de preparar los archivos para hacerlos entendibles y ágiles.

Aprendí todo lo relacionado con un tipo de producto diferente mientras completaba la forma de preparar los archivos para hacerlos entendibles y ágiles.

Logo de M88 para China
Logo de M88 para China
Logo de M88 para China

M88 para China

M88 para China

M88 para China

M88 para China

Preparación del total rediseño de M88 para adaptarlo al mercado chino.

Enfoque

Enfoque

Enfoque

Enfoque

Investigación detallada de cómo la sociedad china entiende y usa las interfaces. Y con esa base, analizar la página principal para evaluar qué podía cambiarse, intentando evitar cambios de alto coste en nivel funcional.

Soluciones

Soluciones

Soluciones

Soluciones

Diseño del proyecto, claramente organizado y presentado.

Diseño del proyecto, claramente organizado y presentado.

Página de mockups de VIP de M88 para China
Página de mockups de VIP de M88 para China
Página de mockups de VIP de M88 para China
Página de mockups de VIP de M88 para China
Página de mockups de invita a un amigo de M88 para China
Página de mockups de invita a un amigo de M88 para China
Página de mockups de invita a un amigo de M88 para China
Página de mockups de invita a un amigo de M88 para China
Página de mockups de OTP de M88 para China
Página de mockups de OTP de M88 para China
Página de mockups de OTP de M88 para China
Página de mockups de OTP de M88 para China
Página de Mockups de descarga la app de M88 para China
Página de Mockups de descarga la app de M88 para China
Página de Mockups de descarga la app de M88 para China
Página de Mockups de descarga la app de M88 para China
Página de flujos de usuario de OTP de M88 para China
Página de flujos de usuario de OTP de M88 para China
Página de flujos de usuario de OTP de M88 para China
Página de flujos de usuario de OTP de M88 para China
Página de detalles de interfaz de torneos de M88 para China
Página de detalles de interfaz de torneos de M88 para China
Página de detalles de interfaz de torneos de M88 para China
Página de detalles de interfaz de torneos de M88 para China

Qué aprendí

Qué aprendí

Qué aprendí

Qué aprendí

Disfrutar entendiendo las diferencias en la usabilidad y las interfaces que hay con los productos digitales chinos, junto con sus porqués.

Disfrutar entendiendo las diferencias en la usabilidad y las interfaces que hay con los productos digitales chinos, junto con sus porqués.

Disfrutar entendiendo las diferencias en la usabilidad y las interfaces que hay con los productos digitales chinos, junto con sus porqués.

Descubrí lo mucho que me gustaba su acercamiento a productos que priorizan la funcionalidad y la practicidad, pero sin perder detalle a la estética.

Descubrí lo mucho que me gustaba su acercamiento a productos que priorizan la funcionalidad y la practicidad, pero sin perder detalle a la estética.

Descubrí lo mucho que me gustaba su acercamiento a productos que priorizan la funcionalidad y la practicidad, pero sin perder detalle a la estética.

También pulí el ojo para buscar consistencia del concepto en todos los niveles del producto.

También pulí el ojo para buscar consistencia del concepto en todos los niveles del producto.

También pulí el ojo para buscar consistencia del concepto en todos los niveles del producto.

Reflexiones finales

Reflexiones finales

Reflexiones finales

Reflexiones finales

« Creo que puedo decir que mi tiempo en Mansion fue clave para consolidar mis habilidades técnicas y estratégicas »

« Diría que lo que más valoro es que tuve margen para aprender a crear soluciones más ágiles tanto para diseñadores como desarrolladores mientras mantenía el enfoque centrado en el usuario final »

¡Y eso es todo!

¡Y eso es todo!

¡Y eso es todo!

¡Y eso es todo!

Andrés Biggemann – 2024