Design System: Nintendo (EU)
Design System:
Nintendo (EU)
El actual sitio web de Nintendo Europa presenta elementos obsoletos en comparación con el resto de regiones de la marca, con la competencia y, en definitiva, con las tendencias actuales de diseño web.
Este sistema de diseño es el resultado del análisis y rediseño de dichos elementos.
Design System: Nintendo (EU)
Design System:
Nintendo (EU)
El actual sitio web de Nintendo Europa presenta elementos obsoletos en comparación con el resto de regiones de la marca, con la competencia y, en definitiva, con las tendencias actuales de diseño web. Este sistema de diseño es el resultado del análisis y rediseño de dichos elementos.
El actual sitio web de Nintendo Europa presenta elementos obsoletos en comparación con el resto de regiones de la marca, con la competencia y, en definitiva, con las tendencias actuales de diseño web. Este sistema de diseño es el resultado del análisis y rediseño de dichos elementos.
Aviso: Este proyecto sigue en proceso de diseño, por lo que esta página será actualizada en cuanto esté terminado.
Aviso: Este proyecto sigue en proceso de diseño, por lo que esta página será actualizada en cuanto esté terminado.
Análisis heurístico y auditoría de componentes
Análisis heurístico
y auditoría de componentes
El primer paso en el rediseño fue analizar el sitio web actual. Mediante este análisis heurístico, se encontraron diversos problemas de experiencia de usuario. Además de valorar la gravedad de estos problemas, se establecieron posibles soluciones de diseño que mejorasen la jerarquía visual, redujesen la carga cognitiva y facilitasen la navegación entre los productos y su compra. Posteriormente, se realizó una auditoría de todos los componentes de la web actual. De este modo se pudieron comenzar a plantear algunos elementos básicos del nuevo diseño, como colores, iconos o tipografía.
Análisis heurístico y auditoría de componentes
El primer paso en el rediseño fue analizar el sitio web actual. Mediante este análisis heurístico, se encontraron diversos problemas de experiencia de usuario. Además de valorar la gravedad de estos problemas, se establecieron posibles soluciones de diseño que mejorasen la jerarquía visual, redujesen la carga cognitiva y facilitasen la navegación entre los productos y su compra. Posteriormente, se realizó una auditoría de todos los componentes de la web actual. De este modo se pudieron comenzar a plantear algunos elementos básicos del nuevo diseño, como colores, iconos o tipografía.
Análisis de la competencia
A continuación se pasó a analizar la competencia. Así, se analizaron las webs de PlayStation, Xbox como competencia directa, y las de otros servicios que no compiten directamente con Nintendo, tales como Steam o Epic Games Store. Además, se analizó con más detenimiento la web de Nintendo of America, la cual, desde hace años, presenta un diseño mucho más actual que las versiones europeas. Todo este análisis dio respuesta a muchos "Qué" y "Cómo": qué contenido e información debían incluir las cards, cómo debía ser el proceso de compra, etc.
Análisis de la competencia
A continuación se pasó a analizar la competencia. Así, se analizaron las webs de PlayStation, Xbox como competencia directa, y las de otros servicios que no compiten directamente con Nintendo, tales como Steam o Epic Games Store. Además, se analizó con más detenimiento la web de Nintendo of America, la cual, desde hace años, presenta un diseño mucho más actual que las versiones europeas. Todo este análisis dio respuesta a muchos "Qué" y "Cómo": qué contenido e información debían incluir las cards, cómo debía ser el proceso de compra, etc.
Design Tokens
Tras establecer todos los tamaños y pesos de tipografía, colores y su función, tipos de stroke y de corner radius… se comenzó a "tokenizar" todo el sistema de diseño. De este modo, quien utilizara este sistema de diseño podría mantener su consistencia y, de cara a un posible desarrollo, mejorar la precisión en el proceso de handoff. Inicialmente, se establecieron los tokens primitivos con las paletas de color establecidas y, a continuación, los tokens semánticos. Para este paso debían estar predefinidas algunas bases del diseño, como qué colores se utilizarían para las superficies, para los textos o para los bordes. Por último, aunque quizá en el estado actual de este sistema de diseño no fuera especialmente necesario, decidí incluir algunos tokens específicos para componentes muy recurrentes, como botones o links. De este modo, se añadiría una capa más de precisión y quedaría establecido el naming para este tipo de tokens cuando se añadan futuros componentes.
Design Tokens
Tras establecer todos los tamaños y pesos de tipografía, colores y su función, tipos de stroke y de corner radius… se comenzó a "tokenizar" todo el sistema de diseño. De este modo, quien utilizara este sistema de diseño podría mantener su consistencia y, de cara a un posible desarrollo, mejorar la precisión en el proceso de handoff. Inicialmente, se establecieron los tokens primitivos con las paletas de color establecidas y, a continuación, los tokens semánticos. Para este paso debían estar predefinidas algunas bases del diseño, como qué colores se utilizarían para las superficies, para los textos o para los bordes. Por último, aunque quizá en el estado actual de este sistema de diseño no fuera especialmente necesario, decidí incluir algunos tokens específicos para componentes muy recurrentes, como botones o links. De este modo, se añadiría una capa más de precisión y quedaría establecido el naming para este tipo de tokens cuando se añadan futuros componentes.
Diseño de componentes
Cada componente está diseñado tanto para la versión mobile como para desktop. Mediante la metodología Atomic Design, han sido diseñados desde su elemento más básico (átomos) al más complejo y, a su vez, cada átomo está compuesto de tokens de color, texto, corner radius, etc. Esto agiliza todo el proceso si hay que actualizar algún elemento, reduce los errores evitables y, sobre todo, da consistencia a todo el diseño.
Diseño de componentes
Cada componente está diseñado tanto para la versión mobile como para desktop. Mediante la metodología Atomic Design, han sido diseñados desde su elemento más básico (átomos) al más complejo y, a su vez, cada átomo está compuesto de tokens de color, texto, corner radius, etc. Esto agiliza todo el proceso si hay que actualizar algún elemento, reduce los errores evitables y, sobre todo, da consistencia a todo el diseño.
Resultado final
El resultado es un sistema de diseño para las principales páginas de la web de Nintendo. Sin embargo, gracias a su diseño, es escalable a todas las páginas que necesite la web, manteniendo la consistencia. Pero lo más importante es que ahora el usuario dispone de un diseño con una jerarquía visual cuidada, que le dirige al elemento más importante: el producto.
Resultado final
El resultado es un sistema de diseño para las principales páginas de la web de Nintendo. Sin embargo, gracias a su diseño, es escalable a todas las páginas que necesite la web, manteniendo la consistencia. Pero lo más importante es que ahora el usuario dispone de un diseño con una jerarquía visual cuidada, que le dirige al elemento más importante: el producto.
