This project was bootstrapped with Create React App.

GUIA DE ESTILOS DE LABORATORIA (SITIO WEB)

RETO: Crear un styleguide de Laboratoria con componentes en React.

Paso 1 (Equipo Multidisciplinario):
Definir grupalmente el problema que implica el reto, identificar usuario, objetivos y producto.

TRABAJO EQUIPO UX

USUARIO

Reunión con Isabel Ordoñez (Communications Manager City) de Laboratoria. Quien maneja directamente lo relacionado con el uso del Manual de Marca de Laboratoria.

Isabel nos indica que en Laboratoria, el Manual de Marca lo usa el desarrollador que se encarga de realizar el sitio web y ella misma, en situaciones en donde debe realizar algún producto digital sencillo que vaya dirigido al posicionamiento de marca.

HALLAZGOS

• Una guía de estilo viva, amigable y práctica, será vital para facilitar el flujo de trabajo de quienes desarrollan el sitio, se dedicarán sólo a eso y no a diseñar. (Ahorro de tiempo importante).

OBJETIVOS

• Crear un styleguide de componentes de diseño visual para Laboratoria(con el nuevo branding). Proponemos nuevos elementos y mejoras a los elementos existentes.

• Nuestro producto será un documento tipo biblioteca de plantillas, algo ágil e intuitivo. Será una colección bien definida de elementos visuales, está ser vital para ahorrar tiempo en el trabajo del usuario, evitando contratiempos técnicos o de diseño.

PRIMEROS TRAZOS (Sketch)

WIREFRAMES

Basados en la información entregada por Isabel Ordoñez y en el Manual de Marca actualizado de Laboratoria, procedemos a definir el alcance de nuestro proyecto de Styleguide.

TOMA DE DATOS Y EXPERIENCIAS SIMILARES

1. Entrevistas a usuarios de guías de estilo (programadores y diseñadores -4 en total- ), como testimonio para conocer sus dolores y alivios usando las guías.

HALLAZGOS

1. Una guía de estilo ideal debe ser: una guía visual Ordenada por categorías, ojalá de tipo drag and drop, completa ("no tener que buscar estilos en otro lugar, casarse con ella").

2. Definimos dos tipos de user-persona, para en base a sus necesidades, desarrollar nuestro producto.

PRODUCTO (TRABAJO EQUIPO FRONT)

Una Styleguide de componentes de React que permite utilizar y re-utilizar elementos con un diseño visual pre-definido. Lo que se busca con el producto, es ahorrar tiempo al desarrollador o diseñador, que sólo deberá tomar el elemento que requiere y ocuparlo. Así de fácil!. Nuestro producto busca potenciar los nuevos elementos visuales de Laboratoria establecidos en el Branding Corporativo.

DEMO

Ver demo aquí: https://carrz.github.io/Hackathon-final

EN ESTE TRABAJO SE UTILIZARON LAS SIGUIENTES HERRAMIENTAS:

• Marvel App (Prototipado)
• Material UI
• Flexboxgrid

Autores

• Carla Zumarán (Front-End)
• Diana Chaparro (UX Designer)
• Kesly Martínez (Front-End)
• Nadia Morales (Front-End)
• Sasha Avilés (UX Designer) Equipo multidisciplinario de Laboratoria