Proyecto INNLAB

Empezar

Antes de comenzar

Ten en cuenta...

Puedes utilizar la función de la esquina superior derecha para revelar los elementos interactivos

Haz clic o pasa el cursor sobre los elementos para revelar detalles adicionales.

En esta experiencia tendrás total libertad de explorar a detalle nuestro proyecto

Continuar

Contenido

Puedes regresar aquí siempre que desees con el ícono de

1. Introducción del proyecto

1. Introducción del proyecto

1. Introducción del proyecto

2. Objetivo general

1. Introducción del proyecto

1. Introducción del proyecto

3. Objetivos específicos

4. Proceso de diseño

1. Introducción del proyecto

5. Propuesta de solución

Atrás

Continuar

Introducción

¿Qué es?

Problemática

Atrás

Continuar

Objetivo general

Diseñar e implementar la base de la plataforma digital para INNLAB, con el propósito de mejorar la interacción y relacionamiento con clientes, y consolidar la posición del centro como referente de innovación.

Atrás

Continuar

Objetivos específicos

Revisa el proceso realizado de cada uno con el botón del +

Optimizar la estructura de la página, asegurando la eficiencia a través de análisis de mercado y la participación activa de interesados.

Diseñar una experiencia web única para INNLAB, reflejando la identidad de la marca y fortaleciendo la interacción con clientes.

Implementar eficientemente el código para un funcionamiento sin contratiempos, utilizando tecnologías modernas y buenas prácticas.

Atrás

Continuar

Objetivos específicos

Revisa el proceso realizado de cada uno con el botón del +

Optimizar la estructura de la página, asegurando la eficiencia a través de análisis de mercado y la participación activa de interesados.

Diseñar una experiencia web única para INNLAB, reflejando la identidad de la marca y fortaleciendo la interacción con clientes.

Implementar eficientemente el código para un funcionamiento sin contratiempos, utilizando tecnologías modernas y buenas prácticas.

Atrás

Continuar

Cómo se cumplió

el objetivo #1

Definición de roles

Flujos de interacción

Benchmarking

Regresar a los objetivos

Cómo se cumplió

el objetivo #2

Estrategia de marca

Estrategia de marca

Moodboard

Sistema de diseño en Figma

Definición de elementos visuales

Wireframes de mediana fidelidad de la página

Regresar a los objetivos

Cómo se cumplió

el objetivo #3

Autenticación del acceso del sitio a través de Firebase

Desarrollo del sitio

Búsqueda de mejores tecnologías

Regresar a los objetivos

Proceso de diseño

Puedes revisar el proceso de diseño que realizamos para cada objetivo Dale clic al ícono de + de cada objetivo

Regresar a los objetivos

Continuar

La plataforma será un punto de encuentro integral. Desde una página informativa que destaca sus servicios hasta una plataforma interactiva que permite realizar cotizaciones de los diferentes servicios. Esto representa el inicio de la automatización de servicios, optimizando la experiencia y ofreciendo un acceso más completo a las oportunidades del centro.

Propuesta solución

¡Quiero ver la página!

Atrás

Continuar

¿Tienes preguntas?

¡Gracias!

Volver a ver

Conoce a detalle

cómo resolvimos este objetivo

Para este realizamos:

• Benchmarking de centros de innovación y consultorías
• Definieron roles dentro del sitio web
• Establecieron los principales flujos de interacción

Ver más

Roles

Accesos al sitio web

De acuerdo con las reuniones con los stakeholders se llegó a establecer cuáles van a ser los límites que tendrá cada rol en la plataforma. Se encontró que:

• Hay funciones que se deben tener cuenta para la contrucción del sitio
• Es importante tenerlos claros para diseñar todo el flujo de interacción de la página

Conoce a detalle

cómo resolvimos este objetivo

Para este realizamos:

• Benchmarking de centros de innovación y consultorías
• Definieron roles dentro del sitio web
• Establecieron los principales flujos de interacción

Ver más

Conoce a detalle

cómo resolvimos este objetivo

Para este realizamos:

• Moodboard de páginas y tendencias
• Una estrategia de marca
• Establecieron elementos visuales de la marca
• Un sistema de diseño en Figma
• Wireframes de alta de la página

Ver más

Flujos de interacción

por cada rol

Colaborador

Admin empresa

Admin Innlab

Wireframes

de media fidelidad

Se han realizado aprovechando el sistema de diseño establecido. Aunque algunas secciones están pendientes de contenido debido a que estamos a la espera de información por parte de los interesados, el enfoque informativo ya está mapeado. Estos wireframes constituyen una representación visual integral que servirá como base para la construcción de páginas completas, asegurando coherencia y funcionalidad en el desarrollo del sitio.

Conoce a detalle

cómo resolvimos este objetivo

Para este realizamos:

• Búsqueda de las mejores tecnologías para el desarrollo del sitio web
• Autenticación del acceso del sitio a través de Firebase
• Desarrollo del sitio

Ver más

¿Qué es Innlab?

Es más que un espacio

Es el centro de innovación de la Universidad Icesi donde se potencia la creatividad e innovación en las culturas organizacionales. Facilita la creación de equipos y proyectos enfocados en procesos, productos, servicios y modelos de negocio innovadores y valiosos.

Búsqueda de mejores

tecnologías y prácticas

Hemos optado por una combinación de tecnologías que incluyen: - Firebase, proporciona una infraestructura robusta y altamente escalable para gestionar bases de datos y autenticación en tiempo real. - React, con su enfoque modular y eficiente, nos permite construir interfaces interactivas y dinámicas de manera eficiente. - Vite, se seleccionó por su rapidez en el desarrollo, facilitando la creación de una aplicación ágil y escalable.

• Creación rápida de prototipos y optimización de la compilación
• Biblioteca de componentes en React
• Interfaz de usuario creada a partir de componentes: fácil de modificar
• Elementos fáciles de compilar

Elementos visuales

establecidos para Innlab

- La paleta de colores prioriza el amarillo, manteniendo la continuidad con la identidad previa y disminuyendo el uso del morado para evitar confusiones con UXLab. - Se eligieron dos tipografías contrastantes (sans serif y script). - Los elementos visuales están inspirados en el contexto del diseño, evocando la acción de tachar, usar el tablero y hacer bocetos.

Conoce a detalle

cómo resolvimos este objetivo

Para este realizamos:

• Moodboard de páginas y tendencias
• Una estrategia de marca
• Establecieron elementos visuales de la marca
• Un sistema de diseño en Figma
• Wireframes de alta de la página

Ver más

Desarrollo del sitio

Programación

El desarrollo del sitio se realiza de manera integral con Firebase para gestión de datos y autenticación, React para la interfaz de usuario, y Vite para la eficiencia en el desarrollo. GitHub facilita la colaboración y seguimiento de cambios, mientras que Vercel simplifica el despliegue continuo. Esta combinación garantiza un proceso eficiente y un producto final robusto y escalable.

Benchmarking

centros de innovación y consultorías

Se realizó el análisis de 11 sitios web apartir de aspectos como: Usabilidad, Diseño, Contenido, Funcionalidad, Comunicación y Difusión. Se encontró que: - Predomina mucho el azul - Innlab puede aprovechar para resaltar con su violeta y amarillo - No cuentan con herramientas interactivas como el "diagnóstico" que se planea para INNLAB - Se debe hacer visible el beneficio de estas herramientas para los visitantes del sitio

• Calificación de 1 a 10
• Promedio de cada uno
• Comentario por cada calificación
• Criterios por aspecto

Moodboard

inspiraciones visuales para el sitio

El proceso de inspiración para el diseño del sitio INNLAB comenzó con: - La creación de un moodboard que reflejara tendencias actuales en diseño. - Se llevó a cabo un análisis profundo del estilo distintivo de INNLAB, identificando elementos clave que debían mantenerse o realzarse en la nueva plataforma. - Se exploraron y extrajeron inspiraciones visuales de 12 sitios web destacados, buscando elementos innovadores y soluciones creativas que se alinearan con la visión de INNLAB.

• Se realizó moodborad de tendencias
• Se analizó el estilo actual de INNLAB
• Se tomaron inspiraciones visuales de 12 sitios web

Conoce a detalle

cómo resolvimos este objetivo

Para este realizamos:

• Búsqueda de las mejores tecnologías para el desarrollo del sitio web
• Autenticación del acceso del sitio a través de Firebase
• Desarrollo del sitio

Ver más

Autenticación

A través de Firebase

Al implementar la autenticación a través de Firebase, estamos habilitando opciones de registro que permiten a los usuarios participar en transacciones, gestionar equipos y acceder a funciones específicas según su rol en la plataforma. Esta decisión no solo asegura la seguridad de los datos de los usuarios, sino que también posibilita una gestión eficiente de roles y privilegios, garantizando una experiencia personalizada y segura para cada usuario en la plataforma INNLAB.

Sistema de diseño

Documentación e implementación

Se ha implementado un sólido sistema de diseño en Figma, estableciendo los foundations y diversos componentes. Esto garantiza la coherencia visual y funcional en todo el sitio, facilitando su escalabilidad y optimizando el proceso de desarrollo.

Problemática

Desafíos actuales

Enfrenta un obstáculo significativo: la carencia de una plataforma digital integral. Esta ausencia limita la interacción efectiva con los clientes y obstaculiza la maximización de recursos y servicios. La creación de una plataforma digital será un paso crucial hacia la eficiencia operativa y una experiencia mejorada para los clientes.

Roles

Accesos al sitio web

De acuerdo con las reuniones con los stakeholders se llegó a establecer cuáles van a ser los límites que tendrá cada rol en la plataforma. Se encontró que:

• Hay funciones que se deben tener cuenta para la contrucción del sitio
• Es importante tenerlos claros para diseñar todo el flujo de interacción de la página

Estrategia de marca

Inicios de la identidad visual

INNLAB Icesi, un centro de innovación vibrante, fusiona una personalidad enérgica y accesible con valores de innovación sostenible, colaboración y aprendizaje continuo, se compromete a inspirar la innovación a largo plazo. A través de programas educativos y colaboraciones, INNLAB crea un ecosistema donde las ideas se materializan y las conexiones se convierten en colaboraciones significativas, empoderando a mentes para liderar el futuro de la innovación.

• Se estableció para la marca su propósito, valores, personalidad, mensaje
• Se realizó el círculo dorado