Walking with Mansion

Walking with Mansion

Walking with Mansion

Walking with Mansion

🌐

Product

🌐

Product

🌐

Product

🌐

Product

⚙️

Design systems

⚙️

Design systems

⚙️

Design systems

⚙️

Design systems

🖥️

UI

🖥️

UI

🖥️

UI

🖥️

UI

📈

UX

📈

UX

📈

UX

📈

UX

Mansion is a company that creates online gaming entertainment platforms on a global scale, with a particular focus on Asia.

I started working on the creation of a robust design system that consolidated it’s main platform, M88, new styles.

Over time, my role evolved taking on additional responsibilities such as research, conceptualization, and implementation of new products and features.

My role

Product Designer

Duration

3 years

/

from 2021

Skills

Design systems

Variables

Deliveries

User flows

Conceptualization

Resolution

team

Karina Hernandez / UX/UI Manager

Manuel González / Product Designer

Dusty Dee / UX/UI Designer

Hero image of Mansion project with mock ups for desktop and mobile designs
Hero image of Mansion project with mock ups for desktop and mobile designs
Hero image of Mansion project with mock ups for desktop and mobile designs

Key achievements

Key achievements

Key achievements

Key achievements

« Designed token-based systems, creating a reusable foundation for colors, sizes, and typography adaptable to any future product »

« Delivered clear and comprehensive diagrams accompanied by detailed mockups to facilitate communication between design and development teams »

« Deepened my understanding of complex workflows and technological integrations by working directly with developers »

M88 logo
M88 logo
M88 logo

M88 v2.0 re-launch

M88 v2.0 re-launch

M88 v2.0 re-launch

M88 v2.0 re-launch

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.

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

Approach

Approach

Approach

Approach

I began using the same logic I applied in my previous experience: A hierarchical structure based on the atomic design methodology, using tokens, or variables, that allow for modular and scalable construction.

Solutions

Solutions

Solutions

Solutions

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.

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

M88's design system colors
M88's design system colors
M88's design system colors
M88's design system colors
M88's design system typography
M88's design system typography
M88's design system typography
M88's design system typography
M88's design system grid system
M88's design system grid system
M88's design system grid system
M88's design system grid system
M88's design system atoms detailed
M88's design system atoms detailed
M88's design system atoms detailed
M88's design system atoms detailed
M88's design system dark mode system
M88's design system dark mode system
M88's design system dark mode system
M88's design system dark mode system
M88's design system buttons
M88's design system buttons
M88's design system buttons
M88's design system buttons
M88's design system modals
M88's design system modals
M88's design system modals
M88's design system modals

Page designs at the breakpoints requested by developers, showcasing different cases
and necessary states.

Page designs at the breakpoints requested by developers, showcasing different cases
and necessary states.

Page designs at the breakpoints requested by developers, showcasing different cases and necessary states.

Page designs at the breakpoints requested by developers, showcasing different cases and necessary states.

M88's homepage mockups page
M88's homepage mockups page
M88's homepage mockups page
M88's homepage mockups page
M88's casino filters mockups page
M88's casino filters mockups page
M88's casino filters mockups page
M88's casino filters mockups page
M88's tournaments mockups page
M88's tournaments mockups page
M88's tournaments mockups page
M88's tournaments mockups page
M88's OTP user flows page
M88's OTP user flows page
M88's OTP user flows page
M88's OTP user flows page

What I learned

What I learned

What I learned

What I learned

I gained a better understanding of how to build a library that serves both as documentation and as an agile tool for designers.

I gained a better understanding of how to build a library that serves both as documentation and as an agile tool for designers.

I gained a better understanding of how to build a library that serves both as documentation and as an agile tool for designers.

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

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

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

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

M88.io logo
M88.io logo
M88.io logo

M88.io

M88.io

M88.io

M88.io

Evolved the previous design system to cover any product while using this new product as a foundation.

Approach

Approach

Approach

Approach

Building upon M88’s foundation, I defined tokens in greater detail through Tokens Studio (Figma Tokens). Additionally, I researched alternative solutions tailored to a more modern and simplified product.

Solutions

Solutions

Solutions

Solutions

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.

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

M88.io's design system colors
M88.io's design system colors
M88.io's design system colors
M88.io's design system colors
M88.io's design system typography
M88.io's design system typography
M88.io's design system typography
M88.io's design system typography
M88.io's design system buttons
M88.io's design system buttons
M88.io's design system buttons
M88.io's design system buttons
M88.io's design system detailed atoms
M88.io's design system detailed atoms
M88.io's design system detailed atoms
M88.io's design system detailed atoms
M88.io's design system input texts
M88.io's design system input texts
M88.io's design system input texts
M88.io's design system input texts
M88.io's design system headers
M88.io's design system headers
M88.io's design system headers
M88.io's design system headers
M88.io's design system menus
M88.io's design system menus
M88.io's design system menus
M88.io's design system menus

Design files with greater complexity and more comprehensive workflows.

M88.io's account mockups page
M88.io's account mockups page
M88.io's account mockups page
M88.io's account mockups page
M88.io's VIP mockups page
M88.io's VIP mockups page
M88.io's VIP mockups page
M88.io's VIP mockups page
M88.io's notifications user flows
M88.io's notifications user flows
M88.io's notifications user flows
M88.io's notifications user flows
M88.io's reward drops user flows
M88.io's reward drops user flows
M88.io's reward drops user flows
M88.io's reward drops user flows

What I learned

What I learned

What I learned

What I learned

Although the atomic design foundation already had strong token usage, here I was able to shape it more fully by preparing it for development from scratch.

Although the atomic design foundation already had strong token usage, here I was able to shape it more fully by preparing it for development from scratch.

Although the atomic design foundation already had strong token usage, here I was able to shape it more fully by preparing it for development from scratch.

I learned everything related to this type of product while refining how to prepare files to make them clear and efficient.

I learned everything related to this type of product while refining how to prepare files to make them clear and efficient.

I learned everything related to this type of product while refining how to prepare files to make them clear and efficient.

M88 China's logo
M88 China's logo
M88 China's logo

M88 for China

M88 for China

M88 for China

M88 for China

Preparing the complete redesign of M88 to adapt it to the Chinese market.

Approach

Approach

Approach

Approach

I conducted detailed research on how Chinese society understands and uses interfaces. Based on this research, I analyzed the main page to evaluate what could be changed while avoiding high-cost functional modifications.

Solutions

Solutions

Solutions

Solutions

A clearly organized and well-presented project design.

A clearly organized and well-presented project design.

M88 China's VIP mockups page
M88 China's VIP mockups page
M88 China's VIP mockups page
M88 China's VIP mockups page
M88 China's refer a friend mockups page
M88 China's refer a friend mockups page
M88 China's refer a friend mockups page
M88 China's refer a friend mockups page
M88 China's OTP mockup pages
M88 China's OTP mockup pages
M88 China's OTP mockup pages
M88 China's OTP mockup pages
M88 China's download app mockup pages
M88 China's download app mockup pages
M88 China's download app mockup pages
M88 China's download app mockup pages
M88 China's KYC mockups page
M88 China's KYC mockups page
M88 China's KYC mockups page
M88 China's KYC mockups page
M88 China's tournaments mockups page
M88 China's tournaments mockups page
M88 China's tournaments mockups page
M88 China's tournaments mockups page

What I learned

What I learned

What I learned

What I learned

I thoroughly enjoyed understanding the differences in usability and interfaces in Chinese digital products along with their reasoning.

I thoroughly enjoyed understanding the differences in usability and interfaces in Chinese digital products along with their reasoning.

I thoroughly enjoyed understanding the differences in usability and interfaces in Chinese digital products along with their reasoning.

I discovered how much I appreciated their approach to products that prioritize functionality and practicality without sacrificing aesthetic detail.

I discovered how much I appreciated their approach to products that prioritize functionality and practicality without sacrificing aesthetic detail.

I discovered how much I appreciated their approach to products that prioritize functionality and practicality without sacrificing aesthetic detail.

Additionally, I sharpened my eye for ensuring conceptual consistency across all levels of the product.

Additionally, I sharpened my eye for ensuring conceptual consistency across all levels of the product.

Additionally, I sharpened my eye for ensuring conceptual consistency across all levels of the product.

Final reflections

Final reflections

Final reflections

Final reflections

« I believe my time at Mansion was pivotal in solidifying my technical and strategic skills »

« What I value most is that I had room to learn how to create more agile solutions for both designers and developers while maintaining a user-centered approach »

And this is my experience here!

And this is my experience here!

And this is my experience here!

And this is my experience here!

Andrés Biggemann – 2024