Design Systems escalables para múltiples marcas en Edcetera

Un design system escalable y experiencias web responsivas generan consistencia, mejoran la usabilidad y apoyan la optimización de la tasa de conversión (CRO).

Ver sitio web

Diseño UI/UX
Diseño web
Design System
Wireframing
Prototipado

Decisiones clave de diseño

Claridad, diseñada en cada capa

Metodología ágil

Los sprints cortos ayudan a aclarar las necesidades de los stakeholders, priorizar los objetivos del proyecto y alinear al equipo en torno a una visión compartida.
Wireframes de baja fidelidad

Una jerarquía visual simplificada hace que la selección de cursos y el pago se sientan intuitivos y secuenciales.
Diseño final

Un design system multitema simplifica el descubrimiento y la compra de cursos, y ofrece una experiencia consistente entre múltiples marcas.
Prototipado

Patrones de comercio reutilizables crean una experiencia consistente en escritorio y móvil, y permiten flexibilidad para contenido específico de campañas.

Enfoque y proceso

Construyendo un design system para múltiples temas de color

Construimos un design system escalable y multitema con más de 200 componentes reutilizables, organizado con principios de diseño atómico. Esta base promueve la consistencia, agiliza los flujos de diseño y respalda el crecimiento entre productos y marcas.

Vista general en escala de grises de las páginas del design system de Edcetera

Vista general en escala de grises de las páginas del design system de Edcetera, segundo tema

Design system

Consistencia en toda la marca

Fundamentos de tipografía: fuente DM Sans con estilos de títulos y botones para escritorio y móvil

Fundamentos de color: paletas azul, azul claro y naranja con tokens primarios y secundarios

Fundamentos de grid: breakpoints responsivos, gutters y layouts de 12 columnas

Componentes de tarjetas: precios, reseñas, características y miembros del equipo

Diseños del sitio web de Edcetera en escritorio y móvil construidos con el design system

La solución

Una experiencia consistente en cada pantalla

El design system responsivo extiende la experiencia a móvil y escritorio, y mantiene la consistencia visual y la usabilidad entre múltiples marcas. Los componentes reutilizables y los layouts adaptables garantizan una experiencia cohesiva durante el descubrimiento de cursos y el recorrido de aprendizaje.