Design System
Creación desde cero y evolución del sistema multi-brand.
Product portfolio · Selected case study
Bilbao · 2026
Itsaso
Albaina
Design Systems
& UX Manager
Selected Case Study
MÁSMÓVIL Group —
Regional Brands Digital Transformation
EuskaltelRTelecableGuuk
02
El proyecto en 30 segundos
Regional Brands
Digital Transformation
Lideré el área UI/UX de las marcas regionales del norte del Grupo MÁSMÓVIL —Euskaltel, R, Telecable y Guuk— dentro de un proyecto para migrar sus ecosistemas digitales a la infraestructura central del grupo.
El reto: crear desde cero un sistema común y escalable que compartiera recursos de diseño y desarrollo sin perder la identidad y necesidades de cada marca.
La solución se estructuró sobre Material UI, con componentes y flujos preparados para React y experiencias B2C y B2B multidispositivo.
4Regional brands
B2C + B2BDigital ecosystems
20Design + development team
+80%Phone-service acquisitions
Increase in acquisition volume compared with the period prior to the transformation.
03
My role
UI/UX Project Lead
Regional Brands
Responsable del proyecto UI/UX para Euskaltel, R, Telecable y Guuk dentro de un equipo multidisciplinar de 12 perfiles UI/UX y 8 desarrolladores.
Trabajo mediante sprints, coordinación continua con desarrollo y reporting dentro de la estructura digital del Grupo MÁSMÓVIL.
12UI/UX
08Developers
04Brands
Component Architecture
Foundations, componentes, variantes, estados y patrones reutilizables.
Product Design
Experiencias B2C/B2B, journeys y flujos de contratación.
Design → Development
Handoff, especificaciones y colaboración con el equipo React.
Responsive Design
Comportamiento consistente en desktop, tablet y mobile.
Quality Assurance
Revisión de implementación y detección de desviaciones.
04
El reto
One ecosystem.
Multiple brands.
Los ecosistemas diferenciados duplicaban recursos, aumentaban la complejidad de mantenimiento y limitaban la reutilización entre productos.
Había que centralizar la base tecnológica sin perder la identidad de cada marca y soportando modelos B2C y B2B.
Before
EuskaltelIndependent system
RIndependent system
TelecableIndependent system
GuukIndependent system
Transformation
After
EuskaltelRTelecableGuuk
05
Arquitectura del design system
Building the system
from scratch
Una arquitectura común sobre Material UI: foundations, componentes core y patrones de producto compartidos, con una capa visual y funcional específica para cada marca.
01
Material UI / MUI
Base técnica
02
Foundations
Color · Typography · Spacing · Grid · Icons
03
Core components
Buttons · Inputs · Navigation · Feedback · Surfaces
04
Brand layer
Euskaltel · R · Telecable · Guuk
05
Product components
Pricing · Features · Accordion · Cards · Zig zag
06
Product experiences
B2C · B2B · Acquisition · Checkout
07
React
Implementación
06
Multi-brand system
One architecture.
Four identities.
La misma lógica de comportamiento y desarrollo debía expresar identidades diferentes. Cada componente contemplaba tamaño, estado, variante, iconografía, loading y marca.
SizeStateVariantIconsLoadingBrand
07
Shared + brand-specific components
Reuse where it helps.
Extend where it matters.
Los componentes dinámicos se compartían entre webs. Las necesidades particulares se resolvían como extensiones ad hoc, evitando fragmentar la arquitectura común.
Shared / Accordion
Abrir mockup Shared / Features image
Abrir mockup Brand-specific / Guuk tariff cards
Abrir mockup 08
Responsive design
Designed as a system,
not as individual screens.
Los componentes y patrones definían su comportamiento responsive desde el sistema. Cada breakpoint heredaba reglas consistentes, acelerando diseño e implementación.
Home · Fibra y móvil / Sólo móvil
Abrir mockup Checkout · With / without add-ons
Abrir mockup 09
B2C + B2B / Product complexity
Supporting different
business models.
La misma base debía soportar experiencias B2C y productos SOHO para empresas, con journeys, navegación y necesidades comerciales diferentes.
El sistema era flexible sin volver a separar la arquitectura por negocio.
Abrir mockup 
Abrir mockup SOHO · Autónomos y empresas
Complexity made composable.
Arquitectura de información, tarifas, servicios, equipamiento y contratación resueltos con la misma gramática de componentes.
10
Interaction behaviour
Designing behaviour,
not just screens.
El sistema Click to Call de la home de Guuk definía banner, widget, sticky, pop-up, modal y estados abiertos/cerrados en desktop y mobile.
Abrir mockup Entry pointOpen / closeModalStickyResponsive
11
Design → Development
Bridging design
& engineering.
La colaboración con desarrollo comenzaba al definir el componente. Propiedades, variantes, estados y comportamiento responsive se preparaban para su correspondencia con React.
El trabajo conjunto mediante sprints permitía resolver dependencias antes de producción.
Figma→Component specs→Zeplin / Handoff→React→Production
Abrir mockup Future-ready foundation
Tokens, propiedades, estados y documentación estructurada crean una base compatible con prototipado rápido y workflows design-to-code, incluidos los asistidos por IA.12
QA & Governance
Closing the loop.
El proceso no terminaba con el handoff. La implementación se revisaba para preservar la correspondencia visual, semántica y de comportamiento con el sistema.
K / Euskaltel
Typography, spacing & semantics
Abrir mockup Guuk
Component structure & responsive
Abrir mockup Design specification→Implementation→QA review→Correction
Accessibility by default
La revisión incluía roles semánticos, contraste, foco de teclado y consistencia de interacción como parte del sistema, no como una comprobación final aislada.
13
Impact
Regional brands
Migradas hacia una arquitectura digital compartida.
Shared system
Foundations, componentes y patrones reutilizables.
One ecosystem
Diferentes modelos de negocio sin fragmentar la base.
Shared workflow
Alineación sostenida entre diseño y desarrollo.
+80%
Increase in phone-service acquisitions.
Compared with acquisition volumes prior to the transformation.
The result was not simply a new UI, but a scalable digital foundation connecting brand, product, design and engineering across multiple businesses.
14
Final / Contact
Itsaso Albaina
Design Systems
& UX Manager
Senior UI/UX Designer
Design Systems · Product Design · Digital Transformation
Selected work and additional project documentation available on request.