HCInterface. Digital Design Solutions

NH Hotels
Design System

2018 Paradigma

Sistema de diseño Turismo UI Design

Como partners de NH Hotel Group decidimos crear un Sistema de Diseño para unificar las soluciones de diseño de los diferentes productos digitales y crear así un lenguaje consistente entre todos ellos que simplifique y estandarice la comunicación con el usuario.

Buscando la eficiencia

En nuestra idea de optimizar y unificar la producción de diseño vimos totalmente natural crear este catálogo de recursos.

Las ventajas son muchas y conocidas y van desde consistencia y optimización de recursos, eficiencia del sistema y producción, mejora de usabilidad y calidad, etc.

Sin reinventar la rueda

Al entrar en el proyecto ya había mucho material creado por lo que, antes de empezar a componentizar, realizamos el ejercicio de seleccionar solo aquello que seguía el estilo definido y tenía la calidad deseada. El resto se pasó por un filtro de rediseño.

Design Systems ♥ Figma

Para diseñar y mantener el sistema utilizamos Figma. Esta herramienta de diseño permite una fácil creación y gestión de componentes en los que se preserva un “padre” y “n” instancias asociadas. Estas instancias se pueden modificar de manera muy sencilla y sin perder la relación con el padre.

Con todos los componentes, estilos de texto y colores creamos una librería en Figma que, asociándola a cada nuevo archivo, agilizaba enormemente la producción de diseño.

El tener una lógica de diseño similar a la lógica de desarrollo permite que no haya incongruencias en los componentes y así, el diseño y desarrollo estén alineados.

Creación de un componente

Identificación

Análisis y/o Rediseño

Desarrollo e integración

Documentación y etiquetado

Estructura de un componente

DATE PICKER

Campo de selección de fecha única sobre vista de calendario.

Default

Open & Selected

Selected

Campo imput en el que al hacer foco se muestra una vista calendario y permite la selección de un día del mes. En el calendario, el usuario podrá moverse libremente por meses y años anteriores y posteriores.

Do’s & Dont’s

Usar cuando el usuario deba seleccionar una fecha y tenga que tener la relación de día del mes respecto al día de la semana.
Usar cuando la fecha a seleccionar sea posterior la fecha actual y cercana en el tiempo (+1 año).
Se deberá permitir la introducción del texto de la fecha en el campo input asociado.
No usar cuando el campo a completar sea la fecha de nacimiento.

Referencia para desarrollo

Un sistema de diseño no es nada si no está vivo y funcionando. Para conseguir esto, el equipo de front traspasó todos los componentes al lenguaje PUG que permitía mantener un código único y crear instancias en cada plantilla sin afectar al original.

En el Sistema de Diseño integramos este código PUG asociado a cada componente para que, además de ser una referencia del diseño e interacción, lo sea también del código.

PUG

+button({btn-primary},{href}}) Copiar

HTML

+button({btn-primary},{href}})Copiar

Documentando el uso

Las Guías de estilo recogen mucha información de cómo aplicar recursos de diseño en cada caso. Van desde lo más genérico como puede ser la guía de “Principios de Experiencia de usuario”, a lo más concreto sobre “cómo crear iconografía corporativa”.

También trabajamos en definir unas reglas globales sobre cómo hablar al usuario y unificar ese lenguaje y tono de comunicación.

Respecto a los componentes la documentación era propio diseño en sí, aunque vimos necesario añadir ciertos Do’s & Dont’s para su aplicación.