SOCIAL
Conecta e Innova Tacna
La plataforma digital que impulsa el ecosistema emprendedor de la región Tacna.
Cliente
Tacna Innova
Propietario de proyecto
Paulonia
Team
2 diseñadores
Duración
4 semanas
Rol
UX
UI
Testing
Design QA
Figma
Photoshop
Maze
Useberry
Jira
Slack
Loom
Metodologías
Atomic Design
Lean Kanban
Design Thinking
Test de usabilidad
Dispositivos
Web
Mobile
Acerca del proyecto
Conecta e Innova Tacna es una plataforma diseñada para fomentar la innovación y la colaboración principalmente en la región de Tacna - Perú. La web ofrece recursos y herramientas como espacios para exposición de proyectos, convocatorias, concursos, asesorías, cursos de capacitación y rutas de aprendizaje.
Objetivo
El objetivo principal de Conecta e Innova es crear un entorno dinámico y colaborativo que promueva la innovación y el emprendimiento en diversas áreas. La plataforma busca:
Facilitar la conexión entre emprendedores, asesores, investigadores y estudiantes.
Impulsar el desarrollo de proyectos
Fomentar el aprendizaje continuo
Aumentar la visibilidad de proyectos
Promover la colaboración.
Etapa UX
Analicé los requerimientos del cliente y realicé entrevistas con usuarios para definir las funcionalidades.
Hice un bechmarking de plataformas similares para saber el estado del mercado.
Basado en toda la información levantada en las entrevistas y benchmarking, junto al equipo ideamos las secciones, flujo de usuario y wireframes.
Durante todo el proceso de diseño, participé en reuniones con el cliente para validar el diseño y recibir retroalimentación.
En paralelo tuve coordinaciones con equipo de desarrollo para garantizar la viabilidad de funcionalidades en el diseño.
Arquitectura de la plataforma
Etapa UI
Debido a que la plataforma tenía múltiples módulos y era necesario garantizar calidad y consistencia en las interfaces, decidí diseñar un sistema de diseño.
Creé de la guía de estilos, paleta de colores, tipografía, iconografía, componentes UI, recursos gráficos.
Diseñé las interfaces web con un enfoque responsive.
Paleta de colores
Empecé revisando el manual de marca de Tacna Innova para la paleta de colorew.
Incorporé tonos claros y oscuros a la paleta de colores para potenciar la flexibilidad del sistema de diseño.
Tipografía
Lexend
Definí los estilos en Figma para cada cada tipo de texto, headers, buttons, body, captions etc.
Iconografía
Usé la librería Phospor por su amplia gama de íconos, eligiendo Regular para elementos estándar por su claridad, y Duotone para enriquecer visualmente componentes clave.
Componentes con variantes
Diseñé variantes para cada componente para mantener la consistencia en todo el diseño. Aquí algunos ejemplos:
Buttons
Avatar
Texts fields
Rich Text Editor
Configuración de componentes en Figma
Configuré cada componente en Figma para facilitar su uso y acceso. Aquí un ejemplo de uso:
Página principal
Contiene una introducción y llamado a la acción para explorar todas las secciones de nuestra plataforma.
Página principal
Aprende/Rutas de aprendizaje
Los usuarios pueden seguir rutas de aprendizaje, acceder a cursos y obtener certificados para avanzar en su desarrollo educativo.
Ruta de aprendizaje
Conecta
Los usuarios podrán descubrir proyectos y personas basados en su ubicación, ampliando así sus oportunidades de networking y colaboración local.
Sección Conecta
Conecta/Proyectos de Innovación Empresarial
Los usuarios pueden compartir sus proyectos de emprendimiento, innovación empresarial e investigación, así como colaborar en otros.
Proyecto de innovación empresarial
Perfil
En el perfil de cada usuario, se mostrarán los proyectos y asesorías asociados, junto con sus datos de contacto, permitiendo una comunicación directa.
Perfil de usuario
Comunidad/Blog
Los usuarios pueden compartir en el blog público, donde tendrán la oportunidad de interactuar con otros miembros de la comunidad y participar en discusiones.
Sección Blog
Prueba con usuarios
Recursos
Prototipo, guión, tareas, escenarios
Tipo de pruebas
Prueba de 5 segundos, A/B testing, firts click, preference test text, sesiones guiadas.
Métricas
Eficiencia, eficacia, cuestionario de satisfacción, mapas de calor.
Hallazgos y Soluciones
Primer hallazgo
En la sección "Conecta", donde mostramos los diferentes proyectos de emprendimiento, innovación empresarial, investigación y personas, la mayoría de los usuarios tuvieron dificultades para navegar. Problemas identificados:
Problemas identificados:
Relevancia del Mapa: Ver la información en un mapa no fue relevante para los usuarios, ya que la ubicación no era una limitante para hacer contactos.
Interacción con Pines: Tener que hacer clic en cada pin sobre el mapa para ver los detalles de algún proyecto o persona reducía el interés por seguir navegando o descubriendo proyectos.
Sección Conecta - Antes
Solución
Sección Conecta en la Barra de Navegación: Trasladamos el concepto de la sección "Conecta" a la barra de navegación, ahora, las personas y los proyectos se han organizado en nuevos módulos, "Comunidad" y "Repositorio", respectivamente.
Barra de navegación sección Comunidad - Después
Barra de navegación sección Repositorio - Después
Sección Comunidad: Todas las personas registradas en la plataforma han sido trasladadas a una sección específica llamada Comunidad. Esto permite a los usuarios encontrar y conectarse con otros miembros de manera más organizada.
Sección Comunidad - Después
Nueva Sección Repositorio: Creamos una nueva sección llamada Repositorio donde se agrupan todos los tipos de proyectos. Esta sección centraliza toda la información relevante de los proyectos, facilitando su búsqueda y consulta.
Sección Repositorio / Proyectos de Emprendimiento - Después
Sección Asesorías: Creamos una sección dedicada a las "Asesorías", donde se albergan todas las asesorías registradas en la plataforma. Anteriormente, estas asesorías solo se mostraban en el perfil de las personas que las ofrecían, pero las pruebas indicaron que los usuarios necesitaban ver las asesorías en una sola sección.
Barra de navegación sección Asesorías - Después
Sección Asesorías - Después
Segundo hallazgo
Información en la página principal: Algunos usuarios durante su primera visita en la página principal tenían que volver a revisar las secciones para descubrir la información, lo que tomaba tiempo extra y no quedaba del todo claro.
Página principal - Antes
Solución
Rediseño de la página principal: Rediseñamos la página principal para que sea más amigable y fácil de entender. Ahora, destacamos quiénes son los usuarios y qué funciones tienen, así como los proyectos de manera más visible. También mejoramos los textos de cada sección para que sean más claros y estén bien organizados.
Página principal - Después
